userchrome.css - Firefox Appearance Tweaks PDF Print E-mail
User Rating: / 3
PoorBest 
Firefox - Firefox Tweaks
Written by Stuart Duncan   
Tuesday, 16 June 2009 12:11

There is a file currently on your computer called userChrome-example.css and it's found in a folder called Chrome in your Firefox profile directory. This magical little file does absolutely nothing unless you take out the '-example' part of the file name, and fill it with CSS information that can change how your browser looks.

Finding your profile directory can be tricky since there are so many different operating systems and they all do things differently. My first suggestion is to read this: http://support.mozilla.com/en-US/kb/Profiles
If that doesn't help, simply do a search on your computer for userChrome-example.css. It should lead you directly to it.

Rename file to userChrome.css and open it up in wordpad. Now we begin having fun.

Do not touch what is already there or it will break. That is to say, it looks like it's mostly just comments giving you suggestions but there is some stuff in there (like the namespace line) that has to stay or it won't work, so it's best to just go to the bottom of the page and start there.

/* Remove Edit menu (if you already use all the keyboard shortcuts) */
#helpMenu, #edit-menu { display: none !important; }

This will remove the help and edit menus... but you can also add in more to remove the other menus if you want. For example, not many people use the history menu, so you could also add in  #history-menu as well and it would be gone.

/* Remove Back button when there’s nothing to go Back to */
#back-button[disabled="true"] { display: none; }

By default, the back button is disabled when there's nothing to go back to... this will remove it entirely. You could do the same with the forward button, just use #forward-button instead of #back-button.

/* Remove Stop button when there’s nothing to Stop */
#stop-button[disabled="true"] { display: none; }

Just like the back button, the stop button is a useless space waster when the page is already stopped, so this will remove it if you can't click it anyway.

/* Remove Home button (never use it) */
#home-button { display: none; }

Pretty self explanatory, don't ya think?


/* Remove Go button from address bar */
#go-button-stack, .search-go-button-stack { display: none !important; }
/*Remove magnifying glass button from search box*/
.search-go-button-stack { display: none !important; }
/* Remove the Bookmark Star */
#star-button { display: none !important; }
/* Place the sidebar on the right edge of the window */
window > hbox {
direction:rtl; } window > hbox > * {
direction:ltr; }
/* Display the Tab bar at the bottom */
#content > tabbox { -moz-box-direction: reverse; }
/* Eliminate the throbber and its annoying movement: */
#throbber-box { display: none !important; }
/* Show keyword input box when adding a bookmark */
#keywordRow { display: -moz-grid-line !important; }
/* Make the active tab wider */
tab[selected="true"] { min-width: 200px !important; }
/* Make inactive tabs partially transparent */
#content tab:not([selected="true"]) { -moz-opacity: 0.5 !important; }
/* Show tab favicon only on selected tab */
tab:not([selected="true"]) .tab-icon { display: none !important; }
/* Change the progress bar color */
.progress-bar {
-moz-appearance: none !important;
background-color: #660000 !important; }
/* Multi-Row Bookmarks Toolbar */
#bookmarks-ptf {display:block} #bookmarks-ptf toolbarseparator {display:inline}
/* Hide AutoComplete in Address Bar */
#PopupAutoComplete, .autocomplete-tree { visibility: hidden !important; display: none !important; }
/* Use a Background Image for the Toolbars */
menubar, toolbox, toolbar, .tabbrowser-tabs {
background-image: url('/”background.gif”') !important; background-color: none !important; }
/* Change Color of Active tab */
tab{
-moz-appearance: none !important; }

tab[selected="true"] {
background-color: rgb(222,218,210) !important;
color: black !important; }
/* Change Color of Normal Tabs */
tab:not([selected="true"]) {
background-color: rgb(200,196,188) !important;
color: gray !important; }
/* Remove the Close Button from the Tab Bar */
.tabs-closebutton-box {
display: none !important;
/* Change Cursor for Links that Open in New Window */
:link[target="_blank"], :visited[target="_blank"],
:link[target="_new"],   :visited[target="_new"] {
cursor:  crosshair; }
/* Remove Web Search from Tools Menu */
menuitem[label="Web Search"] { display: none; }
menuitem[label="Web Search"] + menuseparator { display: none; }
/* Remove the Add New Tab button on the tab bar that looks like a + */
.tabs-newtab-button {
display: none !important;
}

The last item is particularly helpful because it means getting rid of individual menu items that you may never use, such as "page info". I hate that menu item. This will get rid of it.

And I want to make it clear, by "get rid of it", it's not gone.. it's simply hidden. display: none informs the browser to just not display it to the world, but have it there just in case it's needed later.

Most of these are self explanatory, especially after you try out the first few, so give it a whirl and check it out. You can also experiment with your own colours and things to make it your own.

As a bonus, Mozilla has been gracious enough to offer some extra suggestions as well here:  http://www.mozilla.org/unix/customizing.html

 

Make Firefox your own personal browser. That's the way it was intended to be used!

Last Updated on Friday, 19 June 2009 08:22
 

Add comment


Security code
Refresh

Like it? Share it!

Login to TyCamTech.com

Donate

Must have Pepsi, feed my addiction here:


Tutorials

CSS
PHP

Recommended Books

Learn PHP in 17 hours!
If you can copy and paste into HTML and you can follow simple instructions...

How To Flip Websites Home Study Course.
Complete Video Instruction On How To Quickly Set And And Flip (i.e. Sell) Websites For Profit. 6 X Video Lessons Plus Bonuses -- Great Value For Buyer And Maximum 75% Payout For Affiliate!

Setting up a Web Server
Teaches All The Steps To Hosting A Website From Home.

Follow us on



Follow tycamtech on Twitter