20+ Ways to Tweak Firefox with the Userchrome.css File
Pinterest Stumbleupon Whatsapp
Advertisement

userchrome.css firefoxLast month, I showed you How To Remove The "Open In New Window" Option In Firefox How To Remove The "Open In New Window" Option In Firefox Read More how to remove the “open in new window” option from your Firefox right-click menu by making a simple tweak to your Firefox userchrome.css file. This got me interested in what other tweaks you could make to the Firefox browser via the userchrome.css file so I went hunting.

Just to recap for those of you who don’t know what the userchrome.css file is. It is the file in your Firefox profile which you can use to make tweaks and customisations to the browser. It can be found by going to :

    • [WindowsXP] C:\Documents and Settings\<username>\ Application Data\Mozilla\Firefox\Profiles\Chrome

[Windows Vista] – C:\Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\<some_profile>\chrome

Inside there, you will either find the userchrome.css file or a file called userchrome-example.css.

userchrome.css location

If it is the latter, just rename it to userchrome.css. Then open it using a text editor such as Notepad.

Now when you open it, you may see the following already there. Do NOT delete it :

/* * Do not remove the @namespace line — it’s required for correct functioning */ /* set default namespace to XUL */ @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

If you want to tweak your browser using the userchrome.css file, anything you add goes AFTER what you see above.

All you have to do is copy / paste the one you want into the userchrome.css file, save the file, close and re-start your Firefox browser and that’s it. Easy-peasy. As you will see, some of them can also be easily adapted to do other things too. If you can think of other ways to adapt any of them, let us know in the comments.

Please note that everything is reversible. So if you screw up, just delete what you copy/ pasted into your userchrome.css file. Then re-start your Firefox browser.

Userchrome.css tweaks

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

NOTE! This one can be adapted to remove other menus such as the File menu, the Help menu and so on. Just remove “edit” and insert the appropriate words. Using this, I removed everything except the Bookmarks menu and the Tools menu.

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

NOTE!This one can be adapted to also remove the Forward button.   Again, just remove “Back” and insert the appropriate words.

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

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

userchrome.css - remove home button

/* Remove Go button from address bar */
#go-button-stack, .search-go-button-stack { display: none !important; }

20+ Ways to Tweak Firefox with the Userchrome.css File searchmagnifying

/*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; }

20+ Ways to Tweak Firefox with the Userchrome.css File firefoxthrobber

/* 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; }

This last one is particularly good because now you can clean up your Firefox menus and get rid of things that you don’t need in your menus. The Tools menu is especially guilty of this. For example, I have never needed the Error Console or Page Info, so using userchrome.css, I can now hide them from view. You also tend to get a lot of unwanted menu add-ons when you install new extensions or install new software.  You can now get rid of them by making a small addition to the userchrome file.

They are still there if you ever want to bring them back in the future. They are just now hidden so you don’t see them anymore. The menus are now nice and tidy, showing only the things you actually need right now.

However, saying that, there ARE some things in the menus that the userchrome.css file didn’t seem to be able to hide. There are a couple of things in the bookmarks menu that I wanted hidden and the userchrome.css file failed. There’s also an “Add To Evernote” option in Tools that I wanted hidden and that defeated userchrome.css too. So userchrome.css doesn’t seem to be 100% guaranteed to work.

Plus remember that the userchrome.css file can be copied and backed up to a portable USB drive. So if you use more than one computer, you can copy your userchrome preferences to another Firefox profile. Also, if you decide to re-install your Firefox browser one day, you can overwrite the new userchrome.css file with your old one containing your preferences and tweaks. It’s only a text file, nothing more.

One thing I haven’t been able to work out yet and maybe the readers can help out – how to change the colour of my Firefox browser by tweaking the userchrome.css file. I haven’t been able to find out how to do that. Does anyone know? If so, please put me out of my suffering by revealing all in the comments!

Picture Credit : Flod

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Marcos
    January 30, 2018 at 8:27 am

    carreleur toulouse tarif portail coulissant pvc
    a prix discount devis maison ossature bois kit adoucisseur
    d'eau culligan family prix prix wc suspendu jacob delafon patio engazonnement prix prix poele a
    bois supra renover sa cuisine ikea cout pose portail automatique devis construction mur de soutenement abri piscine plat motorise prix prix pose
    parquet massif colle volet roulant isolant prix devis traitement
    du bois barre d'appui rabattable prix prix baie vitree 4m devis installation clim reversible
    agrandissement maison prix pied carre prix moyen m2 renovation salle de bain prix
    poele a bois stuv 30 up prix maison en bois
    180 m2 abricot sec prix carrefour porte entree pvc prix discount
    devis piscine coque 8x4 prix demontage toiture amiante prix vmc
    hygroreglable type b comment renover une salle de bain a petit prix prix carrelage salle de bain leroy merlin peinture
    mur exterieur tarif prix terrassement pour fondation devis climatisation reversible ligne prix renovation de facade en brique devis traitement de l'humidite devis
    depannage de sanitaires devis pour carrelage interieur prix clim reversible daikin 5 kw maison madrier bois en kit
    prix climatiseur devis en ligne prix poele bois jotul f373 panneaux osb prix castorama dalle gravillonnee 50x50 leroy merlin prix prix portail coulissant avec portillon integre
    climatiseur mural daikin prix pergola bioclimatique prix renovation d une toiture
    prix refection toiture zinc tarif installation automatisme portail devis bibliotheque piscine
    hors sol prix usine prix porte automatique magasin chauffe eau gaz prix discount prix
    porte entree bois vitree cout ravalement facade en pierre prix vmc hygro b unelvent chauffage sol electrique
    prix consommation devis plombier lyon prix isolation exterieure maison phenix prix porte d'entree bois sur mesure renovation maison avant apres
    travaux prix moteur volet roulant somfy vr50 devis rampes extension maison ossature bois prix prix barre stabilisatrice 206 toit vegetalise prix
    m2 abri piscine mural coulissant prix devis escalier lapeyre alarme
    maison prix moyen devis contrat d'entretien fioul tarif vmc hygro
    b prix parquet stratifie ikea prix maison bois bbc renover sa maison prix
    garde corps verre inox tarif forage puit gironde poele a granules godin prix cheminee
    insert bois prix devis maison bois bbc prix vidange fosse septique
    drome prix escalier bois 2 quart tournant prix clim reversible atlantic fujitsu devis taille olivier prix portail coulissant autoportant prix
    metre lineaire garde corps fer renovation maison en pierre et bois devis ragreage terrasse
    prix insert bois double face marbre blanc de carrare prix
    prix pose linoleum au m2 prix pose parquet flottant m2 leroy merlin prix maison moderne playmobil 3965 prix isolation exterieure maison pierre devis autres appareils electriques
    prix veranda pvc renover son parquet flottant devis toit plat bac acier
    renover maison prix ravalement facade maison 120m2 bac acier prix leroy
    merlin prix isolant toiture leroy merlin adoucisseur d'eau culligan family prix tarif restauration de tableaux prix porte automatique
    magasin tarif piscine coque waterair devis depannage porte
    prix pose meuble cuisine ikea devis depannage de sanitaires tarif isolation exterieur polystyrene bac acier prix leroy merlin prix cloture rigide avec occultant combien coute
    la renovation electrique d'une maison lettre demande de devis pour travaux prix pour refaire
    salle de bain devis piscine coque toiture veranda verre prix devis parquet flottant prix m2 terrasse bois piscine devis miroiterie devis installation tableau electrique maison bois
    en kit roumanie prix tarif maison ossature bois cle en main idee renovation cuisine remaniement toiture ardoise prix isolation toiture interieure prix renovation cuisine bois cout pose parquet
    point de hongrie devis ouverture mur porteur quel prix pour renover une
    salle de bain abattage arbre dangereux prix entreprise renovation parquet lille prix ravalement facade immeuble m2 prix
    abris piscine semi haut baie vitree empilable prix hammam zein tarif
    tarif maison ossature bois haute savoie chariot elevateur electrique occasion prix pose faux plafond placo prix
    habillage escalier pierre reconstituee prix pose insert bois chauffe eau thermodynamique prix discount prix cloison semi
    vitree cuisine devis pose grillage exterieur prix pose
    parquet sur lambourdes toiture terrasse ossature bois prix insert bois jotul prix prix parquet
    point de hongrie prix pose linoleum au m2 prix maison individuelle bbc devis pour installation poele
    a bois prix pose pave carrossable prix bardage bois pose chalet bois habitable 100m2 prix
    renover escalier bois abime prix vitre insert leroy merlin tarif
    porte de placard optimum abris terrasse telescopique
    prix renovation maison annee 80 prix abri piscine devis en ligne renovation salle de bain veranda sur mesure devis en ligne travaux sans
    devis jurisprudence devis en ligne bardage bois diagnostic immobilier
    lyon prix devis volets battants devis wc handicape renovation toiture tuile canal devis toiture en ligne prix extension ossature bois en kit v33 renovation cuisine tarif panneaux solaires
    thermiques prix poele a bois victoria supra renovation toiture tuile plate prix
    desinsectisation cafards prix installation conduit poele a granule
    devis artisan menuisier maison bois kit roumanie prix prix escalier bois quart tournant sur mesure adoucisseur d'eau prix occasion cout dalle
    piscine hors sol porte d'entree prix pose devis de travaux de copropriete prix pour piscine interieure tarif
    porte coupe feux devis revetement sol pvc devis pour deratisation prix toit bac acier isole maison en bois prix construction prix piscine semi enterree terrain en pente prix escalier exterieur metal devis ravalement facade maison devis portails a
    ouverture motorisee prix metre lineaire garde corps fer devis
    extension de maison devis construction mur en parpaing installation motorisation portail nice popkit prix poele
    a granule rika revo devis bardage pvc carrelage antiderapant
    pour cuisine professionnelle prix renover parquet vitrifie maison mini station d'epuration tricel prix poncer et vitrifier parquet
    prix

  2. Ungowa
    October 3, 2016 at 6:15 am

    right hand sidebar in FF49
    #browser {-moz-box-direction:ltr;}

  3. darkocean
    January 10, 2016 at 6:37 pm

    Hi, do you have a tweak for the main Close button of Firefox; not for the tabs the big red one to the right of the Restore down/maximize button?

    Everyone in a while I will close Firefox with out meaning to and would like to be able to move it elsewhere, or at least have a warning box asking me if I realy want to close the browser. Thanks.

  4. Roger
    March 14, 2015 at 3:07 pm

    FF 36, how to change color of foward/back buttons with userChrome?

  5. John L. Galt
    January 26, 2010 at 3:41 pm

    Just thought you might like a couple more that I use in every profile I make for all the different versions of Fx that I use / test.

    ***For those using Console^2, the better Error Console, here are tweaks for custom overlays to make it look better:

    /*Custom js overlays for Error Console 2 by MR Tech
    http://forums.mozillazine.org/viewtopic.php?p=1761436#1761436*/

    .console-row[type="error"],
    .console-row[type="exception"],
    .console-row[type="error"] .console-row-icon,
    .console-row[type="exception"] .console-row-icon {
    background-color: #FFECEC !important;
    }

    .console-row[type="warning"],
    .console-row[type="warning"] .console-row-icon {
    background-color: #FFFFE0 !important;
    }

    .console-row[type="message"],
    .console-row[type="message"] .console-row-icon {
    background-color: #F5F5F5 !important;
    }

    .console-row {
    border-bottom: 1px solid ThreedShadow !important;

    ***Instead of just removing the Stop button, how about showing the Stop button and / or Reload button, as a single button set, based upon if the page is loading or already loaded?

    /* Show Stop and Reload buttons smartly*/
    #stop-button[disabled] {
    display: none !important;
    }
    #stop-button:not([disabled]) + #reload-button {
    display: none !important;
    }

    ***Invisible Menubar - rather than using an extension, use this set of tweaks to make it 'slide' off-screen, and appear when you hover over the area (If you then move all of the icons / buttons and the address bar and search bar to the top level Menu Bar, you in effect get everything on a single menu bar, and can then hide the Address bar {via right click on menu bar area --> Customize} and get more real estate):

    /*::::::::::::::Invisible Menubar::::::::::::

    How to use it: Move all your Navigation Toolbar items
    (back/forward buttons, address bar, search bar etc.
    from the navigation toolbar to the Menu Bar, either
    on the right side or left side of the Menu Items.
    Now past this code in userChrome.css and restart your
    browser. You will no longer see the menu items. Now
    hover at the right/left edge of the menu bar (whichever
    side the menu items were on) and the menu items will
    appear. You can now hide the navigation bar and save
    vertical space

    ::::::::::::::*/

    #menubar-items {
    padding-left: 5px !important;
    }

    #menubar-items > #main-menubar {
    margin-left: -9000px !important;
    }

    #menubar-items:hover > #main-menubar {
    margin-left: 0 !important;
    }

    #menubar-items:hover {
    background-image: none !important; padding-left:0 !important;
    }

    ***Use Spellbound to check your spelling in a dialog box? remvoe the native Spell check contet menu item so you can right click any text area --> Press "S" to easily initiate spell check:

    /* Never show Spell check in Context menu
    /*Useful for users of SpellBound II */

    menuitem[label="Check Spelling"] {
    display: none !important;
    }

    ***Hide the Personal toolbar, and show it only on hovering over the menu area (again, more real estate):

    /*Hide the Personal Toolbar, show on hover*/

    #PersonalToolbar {display: none;}
    #navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}

  6. Ali
    January 19, 2010 at 2:41 am

    Hey I made a youtube video for changing firefox using userchrome CSS:
    http://www.youtube.com/watch?v=qiiFDtFM8Z0

  7. Lee
    September 17, 2009 at 6:43 am

    Great resource. I've used this to customize the hell out of FF3.5.2 and I love the new look/function. It's also made me get into CSS more.

  8. Jerry
    August 19, 2009 at 1:25 pm

    I want to remove the 'subscribe to this page' icon that is in the search bar like the 'bookmarks star' was. I added this line but to no avail:
    /* Remove the subscribe to this page */
    #subscibe to this page-button { display: none !important; }

    I also can't get rid of the Yahoo menu or button on the menu bar.

    Any suggestions?

    • MorningStar
      December 6, 2009 at 11:24 am

      /* Rss Feed icon,*/

      #feed-button { display: none !important; }

      This removes the RSS Button.

  9. dj
    July 4, 2009 at 4:09 pm

    Regarding the Home button, why not right-click the toolbar and drag the Home button off? I do the same with the side-bar, right-click drag on or drag off. I use the All-In-One Sidebar and the Tiny menu adds-on. To supplement buttons I go to http://codefisher.org/. You can either down load his add-on or selective choose which buttons you want on the fly to install. I found your site looking for userchrome mods to hide those FF items that I can't delete, like Bookmarks Toolbar. I haven't found that yet. I think this is a keeper :-)

  10. jed
    May 24, 2009 at 4:54 am

    ok, the star went away, but I still can't seem to get the auto complete or the drop down bookmarks arrow off the tool bar...please, help!!

  11. jed
    May 23, 2009 at 3:29 am

    You know,none of this editing is working. Is there something I am doing wrong? I keep getting the drop down bookmarks (sucks!!) and all the other ridiculous features I never needed but was suckered into upgrading to.

  12. Tad
    January 26, 2009 at 3:58 pm

    I found the correct folder and made the changes now, thanks!

    (it was a hidden file that I had to use the search feature in order to view, since it's not viewable if I follow the path you provided)

  13. Lil_ndn
    January 19, 2009 at 6:18 pm

    Mark O;Neill, Check out these 2 links for the answer you seek,1 or both may prove to be enlightening:

    http://forums.mozillazine.org/viewtopic.php?f=38&t=1039965 http://www.linnhe2.free-online.co.uk/fi ... 20toolbars
    FTW, freedom thru wisdom...ride safe and free!!!

  14. Rohman
    January 19, 2009 at 5:46 am

    Hello Mark O'Neil,

    It's nice info for tweak my firefox. However, except your methods i have easy methods to remove the buttons. This is my steps : Click View --> Toolbar --> Customize --> drop your mouse into the buttons which you want to remove and drag the button into windows of Customize buttons and your buttons will not showing in your bar menu.

    Thanks

  15. Lil_ndn
    January 18, 2009 at 9:05 pm

    Chrome Edit Plus, add-on, will allow you to place an icon on your toolbars to among other things directly open CCS file/folder. Also, there is an article at Mozillazine, "Awesome Bar..." article in Support forum & a script at userstyles.org for changing Fx;s browzer colours...been awhile, but seems both were good reads. FTW, freedom thru wisdom! WinXP SP3.

  16. Mark O'Neill
    January 18, 2009 at 8:08 am

    Do you have more than one Windows user profile? If so, have you put the userchrome file in the correct Firefox profile in the correct Windows profile?

    For example, if you have put the userchome file in the "default" Windows folder but you are using Windows under a "Tad" Windows profile then yes, it won't show.

  17. Tad
    January 17, 2009 at 5:45 pm

    To locate the files, I had to go in this route:
    C:\Program Files\Mozilla Firefox\Defaults\Profile\Chrome

    In the folder I found "userChrome-example.css" and "userContent-example.css"

    I copied+pasted "userChrome-example.css" to C:\Program Files\Mozilla Firefox\chrome, opened the file - added the tweaks - and saved it, then renamed it "userChrome.css"

    After restarting Firefox, nothing has changed.

  18. krishna
    January 17, 2009 at 1:07 am

    Hi,
    I have made the changes to the file and doesn't see any change in look.
    Is there any code to be added to tweak the firefox.

    • kishore
      March 12, 2009 at 11:38 am

      did you have any active firefox browser window open while doing the changes to userChrome.css, then close all the firefox windows and open new one when you are ready with the changes

  19. Michal
    January 16, 2009 at 10:48 am

    Is possible to move link bar + search bar + basic icons (back, home ans so on) to the bottom above status bar? And the same for bookmark bar?
    Thanks

  20. Sara
    January 15, 2009 at 10:31 pm

    Ohhh, thank you so much!

  21. imoDOTcom
    January 15, 2009 at 7:40 pm

    Excellent!
    Tried putting Tabs at Bottom so Tabs and Window-placeholders are all at bottom - it saves a lot of confusion. Thanks!

    imoDOTcom

  22. Christopher
    January 15, 2009 at 4:58 pm

    You can also change you menu bar with the TinyMenu extension, and can add your bookmark to the rest of the menu bar with Smart Bookmarks Bar. Menu Editor also works for editing all of your menus.

    • Mark O'Neill
      January 15, 2009 at 5:10 pm

      I'm not a fan of installing needless extensions as they slow down the browser. Tweaking the userchrome.css file removes the need to install extensions.