traviblog

just some sort of lame blog

Firefox User CSS

I'll occasionally browse the Firefox Tips section of Firefox Help. Every now and then I'll come across something cool. Here're a couple of things that I've found useful (or at least cool):

These styles are in my userChrome.css. This first one changes the active tab's background color to white (irrelevant if your theme specifies the background as white) and makes sure the text is still black, I usually have eleventy-million tabs open so I needed some other way of telling which tab was active besides the title text:

/* Change color of active tab */ 
tab{
   -moz-appearance: none !important; 
} 
tab[selected="true"] { 
   background-color: rgb(255,255,255) !important; 
   color: black !important;
   font-weight: normal !important;
} 

This next one reduces the padding around the icons of the browser:
/* Remove extra padding from the Navigation Bar */
.toolbarbutton-1, .toolbarbutton-menubutton-button {
   padding: 2px 3px !important;
}
.toolbarbutton-1[checked="true"], .toolbarbutton-1[open="true"], 
.toolbarbutton-menubutton-button[checked="true"], 
.toolbarbutton-menubutton-button[open="true"] {
   padding: 4px 1px 1px 4px !important;
}

This one makes the browser's menus look more XPish:
/* Make menus XP style */
menupopup, popup {
   border: 1px solid ThreeDShadow !important;
   -moz-border-left-colors: ThreeDShadow !important;
   -moz-border-top-colors: ThreeDShadow !important;
   -moz-border-right-colors: ThreeDShadow !important;
   -moz-border-bottom-colors: ThreeDShadow !important;
   padding: 1px !important;
   background-color: Menu !important;
}
menubar > menu {
   border: 1px solid transparent !important;
   padding: 2px 5px 2px 7px !important;
   margin: 0 !important;
}
menubar > menu[_moz-menuactive="true"] {
   background-color : Highlight !important;
   color: HighlightText !important;
}

These styles are in my userContent.css. Basically they just change the cursor if it will most likely open in a new window:

/* Change cursor for JavaScript links */
a[href^="javascript:"], a[onclick^="javascript:"] {
   cursor: move;
}

/* Change cursor for links that open in new window */
:link[target="_blank"], :visited[target="_blank"], :link[target="_new"], :visited[target="_new"] {
   cursor: crosshair;
}

Anyone else have any cool Firefox CSS hacks to share? (I really should make a Mozilla category for posts soon)

[EDIT]: Edit your user files with ChromEdit. Also, here's my user.js file:

// Disable tab bar autohide feature:
//user_pref("browser.tabs.autoHide", false);

// Instead of annoying error dialog messages, display pages:
user_pref("browser.xul.error_pages.enabled", true);


// More DOM/JavaScript options

// Make sure all pop-up windows are resizable:
user_pref("dom.disable_window_open_feature.resizable", true);

// Make sure all pop-up windows are minimizable:
//user_pref("dom.disable_window_open_feature.minimizable", true);

// Always display the menu in pop-up windows:
user_pref("dom.disable_window_open_feature.menubar", true);

// Always display the Navigation Toolbar in pop-up windows:
user_pref("dom.disable_window_open_feature.location", true);


// Change to normal Google search:
//user_pref("keyword.URL", "http://google.com/search?btnG=Google+Search&q=");

// This one makes a huge difference. Last value in milliseconds (default is 250)
user_pref("nglayout.initialpaint.delay", 0);

// Open links in a new tab
user_pref("browser.linkTarget", 1);

// (??? I'm not really sure if this works or not)
// Stop reusing active windows: 
//user_pref("advanced.system.supportDDEExec", false);

// Change language to Esperanto (default is "en, en-us") 
user_pref("intl.accept_languages", "eo, en, en-us");

// http://www.mozillazine.org/talkback.html?article=4960
user_pref("network.protocol-handler.external.shell", false);
// pref("network.protocol-handler.external.shell", false);

Comments

Archived Comments

namedatecomment
BillR Change color of active tab

Thanks, I spent an hour searching the net for exactly this instruction.

This or something like it should be part of the default behavior!
TtWEAK Use bold instead of normal in the change color of tab text hack to make the tab your viewing bold.

font-weight: bold !important;

comments powered by Disqus