ActiveState Community

Komodo XUL UI

You can customize most of the (xul) UI by creating your own customized "userChrome.css" file, stored in your Komodo profile. See this forum post for where your Komodo profile is located:
http://community.activestate.com/faq/komodo-file-locations#appdata_dir

You need to make a sub-directory "chrome" in the Komodo profile's "XRE" folder. Then create the file "userChrome.css", which will contain your customized (overide) settings. The full file pathname should like similar to this on a Windows machine:

C:\Documents and Settings\<your_username>\Application Data\ActiveState\KomodoIDE\4.2\host-
<your_hostname>\XRE\chrome\userChrome.css

Here is a sample userChrome.css file that overrides the tab colours to be a darker shade of grey (active one even darker), provide rounded corners on the tabs and make the text of the selected tab bold:

/* Customized setting for override the selected editor Tab colors */

/* Tabbox background */
tabbox, tabs {
    background-color: #ddd !important;
}

/* Tab background and visuals */
tabs > tab {
    background-color: #D3D3D3 !important;
    border-width: 1px !important;
    border-color: black !important;
    /* Rounded tabs */
    -moz-border-radius:	3px 3px 0px 0px	!important;
}

/* Hovering over tab, change background and font color */
tabs > tab? {
    background-color: #ccc !important;
    color: #fff !important;
}

/* Active tab including hovering, change background and font weight */
tabs > tab[selected="true"], tabs > tab[selected="true"]? {
    background-color: #ccc !important;
    font-weight: bolder !important;
}

/* Sample to update all the trees inside komodo for white on black theme. */
tree { 
    background-color: #000 !important;
    color: #fff !important;
}
treechildren {
  background-color: #000 !important;
  color: #fff !important;
}

/* Set font size and family for dialogs and other miscellaneous text */
window, dialog {
  font-size: 100% !important;
  font-family: helvetica !important;
}

/* Make menus big, pretty and readable */
menubar, menubutton, menulist, menu, menuitem {
  font-family: helvetica !important;
  font-size: 4mm !important;
}

For more examples, take a look at the mozilla/firefox userChrome.css documentation, as it's the same as Komodo, except for the id used in some xul elements.

• Customizing Mozilla
• Editing Firefox configuration files

Mozilla Config

You can edit the mozilla configuration settings using the "about?" url, same as in Firefox and Thunderbird. You can easily get to this editor by

• Open a file in the Komodo editor
• Perform a Preview with Browser command (ctrl+K, ctrl+V)
• In the dialog window, select preview with another file or URL and change the textbox url to be "about?"

Internal Browser

You can use the same method as Mozilla/Firefox uses for overriding browser content as well, by creating your own customized "userContent.css" file, located in XRE directory in your Komodo profile (see above).

hr {
    background-color: #ffffff !important;
    color: #ffffff !important;
}

span, p, ol, td, th, h1, h2, h3, h4, h5, h6 {
    background-color: #000000 !important;
    color: #ffffff !important;
}

This example overrides most of the contents to use a black background and a white foreground.

Komodo Editor UI

Komodo's editor is based on the Scintilla editing component. Komodo provides preferences for most of the parts that are customizable, although there are a few less obvious ones that are missing. If you need to do your own custom settings (i.e. different settings for different file types), then you can create a macro in your Komodo toolbox that is set to run "triggers" on the file load event.

Example:

// Example JS macro
// Set the trigger to run on file load through the macro editor
// Example to change calltip colours to use black bg, white fg.
if (komodo.editor) {
    komodo.editor.callTipSetBack(0x000000);
    komodo.editor.callTipSetFore(0xFFFFFF);
}

Once created, you can also run this macro code on demand by simply double-clicking.

How do I find out about other editor/scintilla calls:

• create a new JavaScript file inside Komodo and type (Komodo 4.2 onwards):
  Components.interfaces.ISciMoz.
• open the scimoz IDL "ISciMoz.idl" file in the sdk directory (Komodo 4.1 onwards)
• see Komodo's internal help
• check out the scintilla website