- Community |
- Code |
- Docs |
- Downloads ▼ |
- more ▼
Customizing the Komodo UI
How can I change the UI widgets and the look and feel of Komodo? Like:
- Tabs
- Menus
- Toolbar buttons
- Internal browser
- Editor
- etc...
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 be similar to this on a Windows XP machine:
C:\Documents and Settings\<your_username>\Local Settings\Application Data\ ActiveState\KomodoIDE\6.1\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:
/* 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,
treechildren,
treechildren::-moz-tree-row /* for Komodo 7 */
{
background-color: #000 !important;
color: #fff !important;
}
/* Change the document toolbar to use a white on black theme. */
.view-toolbar {
background-color: #000 !important;
color: #fff !important;
/* or to hide it completely using:
visibility: collapse;
*/
}
/* 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.
Mozilla Config
You can edit the mozilla configuration settings using the "about:config" 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:config"
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).
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:
// 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
- Login to post comments
This is very interesting but I do wonder if it's possible to use background images.
--
Isaak Malik
Web Developer
Here's how you might colour a tab according to the file extension and add fancy icons:
#tabbed-view tabs > tab[label$=".php"] { background-color: #b1b3d1 !important; }
#tabbed-view tabs > tab[label$=".php"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_php.png) !important; }
#tabbed-view tabs > tab[label$=".htm"],
#tabbed-view tabs > tab[label$=".html"] { background-color: #a6d39a !important; }
#tabbed-view tabs > tab[label$=".htm"],
#tabbed-view tabs > tab[label$=".html"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_world.png) !important; }
#tabbed-view tabs > tab[label$=".xml"] { background-color: #f6a877 !important; }
#tabbed-view tabs > tab[label$=".xml"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_code.png) !important; }
#tabbed-view tabs > tab[label$=".js"] { background-color: #77cac8 !important; }
#tabbed-view tabs > tab[label$=".css"] { background-color: #f6dbaa !important; }
#tabbed-view tabs > tab[label$=".css"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_paint.png) !important; }
#tabbed-view tabs > tab[label$=".txt"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_text.png) !important; }
Works like a charm on Windows, tabs remain rounded and all. Using this approach and CSS3 selectors, you can separate your Controllers, Views & Models for example.
Consider also the extension ColorTab
--
dafi
Enhance KomodoEdit with MoreKomodo
Hi Dafi,
Thanks for this -- I am aware of your extension, but in my case I prefer the userChrome.css method as it's easier to update and it gives me full control over the styling.
For novice users however, I'd strongly recommend using ColorTab over the above approach.
Cheers,
Stan
You are a great developer and I'll be glad if you can do feedback to improve ColorTab to convince you to use it.
BTW I understand you prefer a "low-level" approach with userChrome.css ;)
friendly,
davide
--
dafi
Enhance KomodoEdit with MoreKomodo
I don't see to be able to edit my previous post any longer, so here's an updated version with opacity fx on the icon:
#tabbed-view tabs > tab .tab-image-left
{
background-image: url(chrome://famfamfamsilk/skin/icons/page_white.png) !important;
height: 16px !important;
width: 16px !important;
opacity: 0.75;
-moz-opacity: 0.75;
}
#tabbed-view tabs > tab:hover .tab-image-left,
#tabbed-view tabs > tab[selected="true"] .tab-image-left
{
opacity: 1;
-moz-opacity: 1;
}
#tabbed-view tabs > tab[label$=".php"] { background-color: #b1b3d1 !important; }
#tabbed-view tabs > tab[label$=".htm"] { background-color: #a6d39a !important; }
#tabbed-view tabs > tab[label$=".html"] { background-color: #a6d39a !important; }
#tabbed-view tabs > tab[label$=".xml"] { background-color: #f6a877 !important; }
#tabbed-view tabs > tab[label$=".js"] { background-color: #77cac8 !important; }
#tabbed-view tabs > tab[label$=".css"] { background-color: #f6dbaa !important; }
#tabbed-view tabs > tab[label$=".php"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_php.png) !important; }
#tabbed-view tabs > tab[label$=".htm"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_world.png) !important; }
#tabbed-view tabs > tab[label$=".html"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_world.png) !important; }
#tabbed-view tabs > tab[label$=".xml"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_code.png) !important; }
#tabbed-view tabs > tab[label$=".css"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_paint.png) !important; }
#tabbed-view tabs > tab[label$=".txt"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_text.png) !important; }
If I want to add these file type icons to the project pane, how do I go about it? I've looked at the XUL and to me it looks like the project pane files are rendered with javascript? I'd definitely like to get this done. Has anyone gotten close or done it themselves?
How do I select/show a Tab when I move mouse cursor on a Tab by using userchrome.css
I'm guessing you mean how do you tell if a tab is selected or mouse hovered?
tab[selected="true"] {
border-top-width: 1px;
}
So, I'm trying to make Komodo (Edit) look uniformly dark, as the mixing of light grey with my dark color theme is icky.
Following the directions here, I managed to get the menus to change font, but not background color...
background-color: #222 !important;
font-family: "Bitstream Vera Sans Mono" !important;
background-image: none !important;
}
The background-image definition was just an in-case, and doesn't affect anything whether or not it's in. Pic here.
FWIW, Firefox looked like that previously, but no longer does (since I changed the theme). Do I need to try and find some sort of gtk config to change this?
BTW, is there a way to subscribe to these threads? I can only find the option for actual forum threads, not these FAQs.
Generally you'll be better off changing the OS (GTK) theming rather than trying to tweak Komodo via CSS, as most of the UI widgets are native widgets (i.e. GTK widgets on Linux).
The trick with removing the native theming support from XUL is to use the CSS "-moz-appearance: none" setting:
https://developer.mozilla.org/En/CSS/-moz-appearance
Cheers,
Todd
This looked cool
Hi!
I started playing around with this and I come up with a really nice skin, I'm pretty happy with the results, check it out:
You must be using some JavaScript to update the tab icons right?
No, i'm using this method that is explained in a previous post:
#tabbed-view tabs > tab[label$=".htm"]
I looked everywhere, but I couldn't find the class to change this.
Anyone know how it's done?
Also I'll like to change the padding on the bar that contains this.
The line numbers are a part of the Scintilla editor (which is used as a plugin inside of Komodo).
Scintilla has it's own API for controlling fonts and UI. You can customize the line numbers font through Komodo's "Fonts and Colors" preferences. The line number margin width requires a Scintilla API call, see here for an example of this:
http://community.activestate.com/forum/scimoz-api-examples#comment-6679
Cheers,
Todd
Thanks Todd,
Also, I didn't get lucky trying to find the call for the close image on the tabs.
Any idea wich is?
It's styled using the ".tab-close-button" class:
http://grok.openkomodo.com/source/search?q=tab-close-button&path=%2Fopen...
You can use the DOM Inspector tool to help track down XUL element CSS styling:
http://community.activestate.com/xpi/dom-inspector
Cheers,
Todd
seams like you created a "mac look like" skin. Would you share this? How can i get it so I can use it as a base to make my own?
Thanks
Could you give an example of how to use the DOM inspector to track down XUL element styling?
For example, suppose I want to discover which element is associated with the tooltip which appears on -hover. How would I use the DOM inspector to figure out what elements control the colors of that? Or other attributes of it?
How do I apply this approach to differentiate controllers, views, and models? What are the available attributes for "tab"?
I used to use ColorTab for this, but even though it has as been updated, it still breaks under the K7 beta. I'm fine using the userChrome css approach, if I can figure out how to apply it to different php files differentiated by file path.
I tried targeting .tab-image-left in userChrome.css. But it adds a second icon next to default one. I tried .tab-icon-image and it doesn't work. How can I change tab icons?
This is because Komodo 7 now has "tab-image-left" / "tab-image-right" / "tab-image-right"
The icon can be selected via " .tab-image-middle > .tab-icons "
Best way to figure this stuff out is to use the DOM Inspector (use the "click to select" icon (next to binoculars) to click on stuff).
I have tried
tab > .tab-text {
color: #f00;
}
But nothing. Thanks for a hint.