Sunday, April 10, 2011

A little more on userChrome.css (1)

I'm a bit obsessed with Firefox's GUI customization via config files these days...

Hide the location bar drop down list

#PopupAutoComplete, #PopupAutoComplete > .autocomplete-tree { display: none !important; }

Turn off the dropdown in the URL and search bars

.autocomplete-tree { visibility: hidden !important;
display: none !important; }


Change the location bar to a Google search bar

Enter about:config in the address bar.
Enter keyword.URL in the filter.
Double click keyword.URL and change the value to http://www.google.com/search?q=

Resize the search box

/* Make the Search box flex wider */
#search-container {
-moz-box-flex: 400 !important;
}
#searchbar {
-moz-box-flex: 400 !important;
}

Change the font in the location and status bars

#urlbar, #status-bar
{ font-size: 9pt !important;
font-family: Times New Roman !important; }

Remove the yellow from the URL bar

/* Remove yellow shading in the urlbar */
#urlbar[level="high"] > .autocomplete-textbox-container,
#urlbar[level="low"] > .autocomplete-textbox-container,
#urlbar[level="broken"] > .autocomplete-textbox-container {
background-color: white !important; }

Other alterations to toolbars

/* Resize urlbar and searchbar height */
#urlbar, #searchbar .searchbar-textbox { height: 19px; }
/* Slightly rounded address and search bar corners */
#urlbar {
-moz-appearance: none !important;
-moz-border-radius: 3px !important;
padding-right: 1px !important; }

#searchbar .searchbar-textbox {
-moz-appearance: none !important;
-moz-border-radius: 3px !important; }

/* Adds a little space between icon and text in the Search bar */
.searchbar-dropmarker
{ margin-right: 2px !important;
margin-left: 1px !important; }

/* Urlbar and searchbar background and text color */
#urlbar, #searchbar .searchbar-textbox{
background-color: #F6F6F6 !important;
color: #000000 !important; }

/* Resize Navigation Bar */
#navigator-toolbox toolbar { max-height: 26px !important; }
#navigator-toolbox toolbarbutton { padding: 0px !important; }

Hide the dropdowns on the Back/Forward buttons

/* Hide dropdown arrows in Back & Forward buttons */
#back-button .toolbarbutton-menubutton-dropmarker,
#forward-button .toolbarbutton-menubutton-dropmarker
{ display: none !important; }
Alterations to status bar

/* Hide status bar icons */
statusbarpanel#security-button,
statusbarpanel#page-report-button,
statusbarpanel#page-theme-button,
statusbarpanel#statusbar-updates {
display: none !important; }

/* Remove orange RSS icon in status bar */
#livemark-button { display: none !important; }

/* Remove the security-button from the status bar */
#urlbar .info-icon {
display:none !important; }

/* Remove the statusbar-progress panel from the status bar */
#statusbar-progresspanel {
display: none !important; }

/* Hide styleselector/switcher */
#page-theme-button[themes] { display: none !important; }

/* Status Bar Height */
#status-bar { max-height: 21px !important; }

Hide Find Toolbar

#FindToolbar { display: none !important; }

Change the font in the search bar

/* Searchbar Font */
.searchbar-textbox {
font-family: Tahoma !important;
font-size: 9pt !important; }

Change the background colour in the location bar

#urlbar > .autocomplete-textbox-container
{
background-color: rgb(78,101,124) !important;
}

Hide the autoupdate icon

toolbarbutton[type="updates"] > .toolbarbutton-icon {
display: none !important;
}

Remove favicons

/* Remove Favicon placeholder in Tab Bar */
.tab-icon {
display: none !important;
}

/* Remove Favicon placeholder in URL bar */
#page-proxy-deck {
display: none !important;
}

Change to custom images for the throbber, copy the images into the same directory as your userchrome.css and include this code - changing the image names to match.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Custom Throbber */
#navigator-throbber {
list-style-image:url("item1.gif") !important;
}
#navigator-throbber[busy="true"] {
list-style-image:url("ani_multi1.gif") !important;
}
toolbar[iconsize="small"] #navigator-throbber,
toolbar[mode="text"] #navigator-throbber {
list-style-image:url("item1.gif") !important;
}
toolbar[iconsize="small"] #navigator-throbber[busy="true"],
toolbar[mode="text"] #navigator-throbber[busy="true"] {
list-style-image:url("ani_multi1.gif") !important;
}

Change the throbber on tabs

/* Custom Throbber-TABS -->Busy */
/* Images should be 16x16pixels for the tabs */
tab[busy] > .tab-icon {
list-style-image: url("ani_16red.gif")!important;
}
/* Custom Throbber-TABS -->Inactive---visible only if no favicon available */
/* Images should be 16x16pixels for the tabs */
tab > .tab-icon {
list-style-image: url("desert.gif")!important;
}


Menu bar alterations

/* Menu bar activity */
menubar > menu {
color: #000000 !important;
height: 18px !important;
max-height: 22px !important; }

/* Change maximum width of bookmarks in menus - default is 26em */
menu.bookmark-item, menuitem.bookmark-item { max-width: 16em !important; }

/* Icon is too big when I put it up on the menu bar */
toolbarbutton.bookmark-item > .toolbarbutton-icon {
margin-top: -1px !important; }

/* Hide type ahead auto-complete drop down in Address bar */
#PopupAutoComplete, .autocomplete-tree { visibility: hidden !important;
display: none !important; }


Hide one of the menus

/* Remove the Tools Menu */
menu[label="Tools"] {
display: none !important;
}

Hide parts of menus

/* Hide Menus */
#navigator-toolbox menu[label="File"],
#navigator-toolbox menu[label="Go"],
#navigator-toolbox menu[label="Edit"],
#navigator-toolbox menu[label="View"],
#navigator-toolbox menu[label="Tools"],
#navigator-toolbox menu[label="Help"] { display: none !important; }

/* Hide Tools Menus */
menuitem[label="Web Search"],
menuitem[label="Downloads"],
menuitem[label="Themes"],
menuitem[label="Extensions"],
menuitem[label="Read Mail (0 new)"],
menuitem[label="New Message..."],
menuitem[label="DOM Inspector"],
menuitem[label="Page Info"] { display: none; }

/* Hide Bookmarks Menuitems */
menuitem[label="Add to Bookmarks..."],
menuitem[label="New Bookmark..."],
menuitem[label="New Separator"],
menuitem[label="Open in Tabs"] { display: none; }

menuitem[label="Open"],
menu[label="Mozilla Firefox & Mozilla Information"],
menu[label="Bookmarks Toolbar Folder"] { display: none !important; }

menupopup > menuitem[label="Bookmark This Page..."] {display: none !important;}

/* Hide Context Menuitems */
#context-back,
#context-forward,
#context-reload,
#context-stop,
#context-viewsource,
#context-openlink,
#context-openlinkintab,
#context-viewpartialsource-selection,
#context-selectall,
menuitem[label="View Background Image"],
menuitem[label="Reload Tab"],
menuitem[label="Reload All Tabs"],
menuitem[label="Close Tab"] { display: none !important; }

menuitem[label="Open"],
menuitem[label="Open in New Tab"],
menuitem[label="Expand"],
menuitem[label="Manage Folder"],
menuitem[label="New Folder..."],
menuitem[label="Show Only This Frame"],
menuitem[label="Open in New Window"],
menuitem[label="JavaScript Console"],
menuitem[label="Reload Frame"],
menuitem[label="Bookmark This Frame..."],
menuitem[label="Save Frame As..."],
menuitem[label="View Frame Source"],
menuitem[label="View Frame Info"],
menuitem[label="Open Frame in New Window"] { display: none; }

Bookmark Tweaks
Change the icons for Bookmark folders on the toolbar
See this thread http://forums.mozillazine.org/viewtopic.php?t=202845

Remove the icons from the Bookmark Toolbar

/* Hide "normal" bookmark icons in the bookmarks menu */
menuitem.bookmark-item > .menu-iconic-left {
display: none; }

/* Hide bookmark icons in the Personal Toolbar */
toolbarbutton.bookmark-item > .toolbarbutton-icon {
display: none; }

/* Hide icons for bookmark folders in Bookmarks menu */
menu.bookmark-item > .menu-iconic-left {
display: none; }

/* Hide icons for bookmark groups in Bookmarks menu */
menuitem.bookmark-group > .menu-iconic-left {
display: none; }

/* Hide All Separators...except View>Toolbars>Bookmarks Toolbar(unknown) */
menuitem + menuseparator { display: none; }
menu + menuseparator { display: none !important; }

Remove Manage Bookmarks from the Bookmark menu

menuitem[label="Manage Bookmarks..."],
menuitem[label="Manage Bookmarks..."] + menuseparator { display: none !important; }

Remove several entries from the Bookmark menu

/* Hide Bookmarks Menu Items */
#navigator-toolbox menuitem[label="Manage Bookmarks..."] { display: none; }
#navigator-toolbox menuitem[label="Bookmark This Page..."] { display: none; }
#navigator-toolbox menuitem[label="Bookmarks"] { display: none; }
#navigator-toolbox menuitem[label="Bookmarks"] + menuseparator { display: none !important; }

Remove entry for Bookmarks Toolbar from Bookmarks menu

menuitem[label="Bookmarks Toolbar Folder"]{display: none !important;}

Remove icons from the bookmark toolbar

#personal-bookmarks .toolbarbutton-icon {display: none !important;}

Change the width of the bookmark menu

/* Change maximum width of bookmarks in menus - default is 26em */
menu.bookmark-item, menuitem.bookmark-item { max-width: 32em !important; }

Tabs Tweaks

Remove the Close Tab icon on the tab bar and sidebar

/* Remove the close button on the tab bar */
.tabs-closebutton-box {
display: none !important;
}

Hide tab icons

/* Don't show tab icons */
.tab-icon { display: none !important; }

Other tab alterations

/* Change all tab properties */
tab {
-moz-appearance: none !important;
height: 18px !important;
max-height: 20px !important; }

/* Cosmetic effects to line everything up */
.tabs-closebutton {
padding: 1px !important; }
/* Hide the close button on the tab bar */
.tabbrowser-tabs > stack > .tabs-closebutton-box > .tabs-closebutton,
.tabbrowser-tabs > stack > .tabs-right,
.tabbrowser-tabs > hbox > .tabs-right {
display: none !important; }

Show tabs at bottom

/* Show tabs at bottom */
#content > tabbox { -moz-box-direction: reverse; }

Change tab colours

/* Change Tab Colors */
/* Change color of active tab */
tab[selected="true"] {background-color: rgb(222,218,210) !important; color: black !important;}
/* Change color of normal tabs */
tab {background-color: rgb(200,196,188) !important; color: gray !important;}
/* Tab while loading */
tab[busy] {color:gray !important;}

Make loading tabs red

/* Tab while loading */
tab[busy] {
color: red !important;}

Put tabs at the left hand side of the screen

/* tabs at left */
#content > tabbox {
-moz-box-orient: horizontal;
}
.tabbrowser-strip {
-moz-box-orient: vertical;
/* note: you can set this to -moz-scrollbars-vertical instead,
but then the scrollbar will *always* be visible. this way
there is never a scrollbar, so it behaves like the tab bar
normally does */
overflow: -moz-scrollbars-none;
}
.tabbrowser-tabs {
-moz-box-orient: horizontal;
min-width: 20ex; /* you may want to increase this value */
-mox-box-pack: start;
-moz-box-align: start;
}
.tabbrowser-tabs > hbox {
-moz-box-orient: vertical;
-moz-box-align: stretch;
-moz-box-pack: start;
}
.tabbrowser-tabs > hbox > tab {
-moz-box-align: start;
-moz-box-orient: horizontal;
}
/* remove the close-tab button. trust me, you need to do this. */
.tabbrowser-tabs > stack {
display: none;
}

Show tab indicator when tab is loading

/* Show tab loading indicator while the tab is loading */
.tabbrowser-tabs *|tab[busy] .tab-icon {
display:-moz-box;
}

General Browser Tweaks

Make visited links a different colour

a[href]:visited{
color: rgb(95,155,175) !important;
text-decoration: overline !important;
}

Remove border from the bottom of the navigation toolbar

#nav-bar {
border-bottom: 0px !important;
}

General browser changes

/* Stop blinking text */
blink { text-decoration: none ! important; }


Sidebar Tweaks

To override the maximum width for the sidebar

#sidebar { max-width: none !important; }

Some other alterations to the sidebar

/*Override maximum sidebar width and set minimum*/
#sidebar { max-width: none !important;
min-width: 0px !important; }

/*Reduce the size of the splitter*/
#sidebar-splitter { min-width: 0px !important;
max-width: 4px !important; }

/* Hide bookmarks sidebar scrollbar.. remains scrollable with mouse wheel */
#bookmarks-view, scrollbar[orient=vertical] { width: 0px !important; }

/* Sidebar background color and font */
#historyTree, #bookmarks-view tree{
-moz-appearance: none !important;
background-color: #F6F6F6 !important;
font-size: 9pt !important;
font-family: Times New Roman !important; }

sidebarheader { height: 23px !important; }

/* Hide the Sidebar bookmarks Search box */
#bookmarksPanel > hbox { display:none; }

Labels: ,

2 Comments:

Anonymous Ino said...

After having tried for hours to find a way to fix something in firefox, finding your post helped me do that and quite more, thank you so much!
Greetings from Greece.
Take care!

6:19 PM  
Blogger hictio said...

Hey, thanks a lot.
Glad it was useful.

7:51 PM  

Post a Comment

<< Home