Pinterest Stumbleupon Whatsapp
Ads by Google

firefox orange menuFirefox’s interface is completely customizable, including its orange Firefox menu button. You can change its name or color to anything you want – you can even set a custom background image or add your own logo. After you’ve tweaked the look of the button itself, you can easily customize the options that appear when you click the Firefox menu button.

To make most of these changes, we’ll be editing Firefox’s userChrome.css file – by modifying this file, we can change the appearance and functionality of Firefox’s interface 3 Firefox Add-Ons That Provide The Chrome Features You Love & Miss 3 Firefox Add-Ons That Provide The Chrome Features You Love & Miss As you’ve probably experienced yourself, when you get used to a browser, no matter the annoyances, there are certain features that really grow on you. Features you feel you cannot do without, and are keeping... Read More . The userChrome.css file is located in your Firefox profile folder How To Use Firefox Profiles & Run Multiple Firefox Profiles At Once How To Use Firefox Profiles & Run Multiple Firefox Profiles At Once Firefox stores your browser data – bookmarks, history, preferences, extensions, and everything else – in a directory known as a profile. Each user account has a single profile by default, but you don’t have to... Read More – if this file doesn’t exist, you’ll have to create it.

Creating Your userChrome.css File

To open your Firefox profile folder, click the Firefox orange menu button, point to Help, and select Troubleshooting Information. Scroll down and click the Show Folder button on the page that opens.

firefox orange menu

Inside the Firefox profile folder that appears, double-click the chrome folder, and then double-click the userChrome.css file inside it to edit it with Notepad. You can also edit it with any other text editor AkelPad vs Notepad Plus - Can It Even Compete As A Notepad Alternative? AkelPad vs Notepad Plus - Can It Even Compete As A Notepad Alternative? There are lots of Notepad replacements out there, and it seems like everyone has their own favorite. Notepad++ is one of the most popular, but AkelPad is a more minimal option. AkelPad is a fast,... Read More you prefer, like Notepad++ Soup Up The Notepad++ Text Editor With Plugins From The Notepad Plus Repository [Windows] Soup Up The Notepad++ Text Editor With Plugins From The Notepad Plus Repository [Windows] Notepad++ is a worthy replacement for Windows’ in-built and much loved text editor, and comes highly recommended if you’re a programmer, web designer or simply someone who finds themselves in need of a powerful plain... Read More .

If you don’t see the chrome folder or the userChrome.css file, you’ll need to create them. Right-click in the Firefox profile folder that appeared after you clicked the button, point to New, select Folder, and name it chrome. Open the chrome folder and create a new text file in the same way, naming it userChrome.css (replace the .txt file extension with .css). If you don’t see the .txt file extension, you’ll have to tell Windows to not hide file extensions 4 Common Windows 7 Problems And Fixes 4 Common Windows 7 Problems And Fixes Read More .

Ads by Google

firefox orange button

Customizing the Button’s Appearance

Copy and paste the following code into your userChrome.css file to get started:

@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
#appmenu-button {
background: #orange !important;
}
#appmenu-button dropmarker:before {
content: “Firefox” !important;
color: #FFFFFF !important;
}
#appmenu-button .button-text {
display: none !important;
}

If you already have some text in your userChrome.css file, omit the first line (the one that begins with @namespace) and copy the other lines of text to the bottom of the file.

Each line here is pre-filled with the default settings, but you can change each setting.

  • To change the button’s background color: Change the #orange after background: to another color. For example, to use a dark blue, replace #orange with #0404B4.
  • To change the button’s text: Replace “Firefox” with your desired name. For example, you could enter “MakeUseOf”.
  • To change the button’s text color: Replace the #FFFFFF after color: with your desired color. The default #FFFFFF represents white – to use a light gray, use #F2F2F2 instead.

To choose your custom colors, you’ll need the hex color code (also known as HTML color code) for the color you want. You can get this information from a variety of websites or programs, including RaphaelColorPicker, which we’ve covered in the directory.

After making the example tweaks above, we’d end up with the following code:

@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
#appmenu-button {
background: #0404B4 !important;
}
#appmenu-button dropmarker:before {
content: “MakeUseOf” !important;
color: #F2F2F2 !important;
}
#appmenu-button .button-text {
display: none !important;
}

firefox orange button

Save the userChrome.css file and restart Firefox after making your changes.

firefox orange button

Adding a Background Image Or Logo

You may want to customize the button further by adding a custom background image. This can be used to add an organization’s logo (or any other image you likes) to your Firefox menu button.

To do so, replace the “background: #orange !important;” line with the following line:

background-image: url(“image.png”) !important;

Replace image.png above with the full path to your image file. This can be a local path beginning with file:// or a remote path (URL) beginning with http://.

You can also include both the background: and background-image: lines. If your background image is partially transparent, it will be overlaid over the background color. For example, if I had a PNG image file named makeuseof.png stored in my user account’s Pictures folder Windows 7 Libraries Explained - And Why You Want Them Windows 7 Libraries Explained - And Why You Want Them Read More , I could use the following code for the appmenu-button section:

#appmenu-button {
background: #0404B4 !important;
background-image: url(“file:///C:/Users/Chris/Pictures/makeuseof.png”) !important;
}

firefox orange menu button

Customizing The Menu’s Contents

Use the Personal Menu addon for Firefox to customize the options that appear when you click your Firefox menu button. This addon gives you an Edit This Menu option when you click your Firefox menu button.

firefox orange menu button

Click the option and you’ll see an easy-to-use graphical window for editing the contents of your Firefox orange menu. You can add new options, remove existing ones, or rearrange them.

firefox orange menu

If you’re a Firefox user, be sure to check out our regularly updated list of the best Firefox addons.

How do you customize and tweak your Firefox installation? Leave a comment and share any cool tricks you use!

  1. Jim
    January 2, 2013 at 7:25 am

    Try removing the double quotes " in
    @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
    use
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

    Don't know why but it works for me with v 17.0.1
    (Spent at least a day trying to untangle on this!.)

  2. daniel
    December 9, 2012 at 5:34 pm

    It doesn't work for firefox 17. any suggestion?

  3. Michael McKenzie
    August 25, 2012 at 3:35 pm

    Honestly This is cool and all, but unnecessary. This is like modding my PC case. It is still the same computer

    • Chris Hoffman
      August 28, 2012 at 1:23 am

      Sure, but aren't most things in life "unnecessary?" The nice dinner I'm about to cook is unnecessary when I could just eat inexpensive gruel every day.

      Some people enjoy this sort of thing, and more power to them!

  4. Rigoberto Garcia
    August 23, 2012 at 9:56 pm

    It seems a good idea to do the customization indicated, to customize the browser. I'll try following the steps outlined in the article. Thanks Chris

  5. GayashanNA
    August 22, 2012 at 7:58 am

    Follow this guide and use this code snippet, it worked for me.

    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    #appmenu-button
    {
    background: #383942 !important;
    }
    #appmenu-button dropmarker:before {
    content: "Firefox" !important;
    color: #FFFFFF !important;
    }
    #appmenu-button .button-text {
    display: none !important;
    }

    • Chris Hoffman
      August 28, 2012 at 1:23 am

      Thanks so much; sorry about the issues with the examples in the article.

  6. Sebastian Hadinata
    August 22, 2012 at 3:34 am

    Nice Guide! Time for customization now

  7. Shawn Adam
    August 21, 2012 at 7:13 pm

    Or if you do not want to mess around with the userChrome.css file, you can download the Stylish addon, and use that to make your files. Stylish allows you to manage all the styles from right inside FireFox.

    Then you can go to http://userstyles.org/, and find thousands of more styles that you can use. And unless they are changing something about the FireFox program or menus, most of them should work with Chromium and Google Chrome as well.

    You can hide parts of the page that you do not want to see, add stuff to pages, or move stuff around. You can do a lot fo manipulating using these styles.

    I do not edit my userChrome.css file, so unless there is something different about doing it that way, then yes the closing '}' is missing from the examples.

    • Chris Hoffman
      August 28, 2012 at 1:22 am

      Good suggestion. I suppose I should have mentioned Stylish instead of being so old school.

  8. josemon maliakal
    August 21, 2012 at 5:13 pm

    I have done it on ma fox

  9. Shehan Nirmal
    August 21, 2012 at 3:41 pm

    Wow.. that's coool... I never thought that the interface could be changed by editing an css file... that's really coool....

  10. NaraNarusha
    August 21, 2012 at 2:36 pm

    coool :) im gonna try it

  11. Nguyen Tran
    August 21, 2012 at 2:30 pm

    It didn't work for me. I cannot find out chrome folder and I added new one, is s.t wrong?

    • Chris Hoffman
      August 28, 2012 at 1:21 am

      Sorry, see the information about extra curly brace ( } ) characters in the comments above.

  12. VS Vishnu
    August 21, 2012 at 2:00 pm

    i use chrome.. :-)

  13. Ganesh Kumar
    August 21, 2012 at 11:32 am

    How to do on Ubuntu I tried but not working using beta version

    • Chris Hoffman
      August 28, 2012 at 1:20 am

      Will be similar, but the userchrome.css file is located in a different place. (Your Firefox directory is at /home/USERNAME/.mozilla/firefox on Linux)

  14. Thambaru Wijesekara
    August 21, 2012 at 9:34 am

    Cool..!
    Haven't FF now to try because of Chrome. Good stuff :D

  15. Kaashif Haja
    August 21, 2012 at 8:16 am

    I used resource hacker to change the icon. It was cool!
    Haven't tried this yet. Hope it works!

    • Chris Hoffman
      August 28, 2012 at 1:19 am

      Ah, that's also a really cool hack!

  16. RJ
    August 21, 2012 at 8:04 am

    I have tried, But i did' t get it.Could u please provide the information with images.

    • Alan Wade
      August 21, 2012 at 12:07 pm

      Open your user profile, if you dont see a folder called Chrome create it.
      If you have a folder called Chrome then you will most likely have a file called userChrome.css, if not open Notepad and create it.
      If you have to create the file then paste this in:

      @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
      #appmenu-button
      {
      background: #545454 !important;
      }
      #appmenu-button dropmarker:before {
      content: "Menu" !important;
      color: #F2F2F2 !important;
      }
      #appmenu-button .button-text {
      display: none !important;
      }

      If you dont have to create the file then paste the above in but leave off the first line:

      @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

      as it will already be in there.

      Edit the background and text codes to what colour you want.
      Edit the word Menu to whatever you want the button to say.
      Save and close.
      Restart your browser and check.

      • Chris Hoffman
        August 28, 2012 at 1:19 am

        Thanks or helping out, Alan! I really appreciate it.

  17. Scutterman
    August 21, 2012 at 7:38 am

    A couple of your CSS snippets are missing the final close curly brace.

    I was editing my userChrome.css file a couple of weeks back to get rid of a bug where the tabs-on-top fall below the menu button when the window is restored rather than fullscreen. At the same time I changed my location bar to use a mono-spaced font.

    • Chris Hoffman
      August 27, 2012 at 10:19 pm

      Oh boy, that's correct. I'm not sure if the blog platform erased them or what.

      Apologies to everyone for this -- I'll try to get someone to fix it.

  18. Harshil
    August 21, 2012 at 4:57 am

    I could not find the chrome folder or userChrome.css file.........

    • Alan
      August 21, 2012 at 7:23 am

      @Harshil you need to create them.

      Worked fine for me! I think there should be a "}" at the very end??
      Its a novelty idea but I went immediatly back to the Menubar.

    • Karl Gephart
      August 21, 2012 at 11:05 am

      The article said to create your own folder and file by those names if they weren't already there.

  19. Danny Roy Jenuil
    August 21, 2012 at 4:02 am

    It didn't work for me either.

  20. Rob de Koter
    August 21, 2012 at 3:49 am

    It does not work for me , any help would be appreciated

  21. Rob de Koter
    August 21, 2012 at 3:48 am

    I do not know, it does not work for me and I have no idea why, any help would be appreciated

  22. Ma Kuru
    August 21, 2012 at 3:06 am

    How do you do that on mac?

  23. step-2
    August 21, 2012 at 1:21 am
    • Sebastian Hadinata
      August 22, 2012 at 3:35 am

      Thanks for pointing this out..

    • Chris Hoffman
      August 28, 2012 at 1:18 am

      Ah nice, I had no idea such a thing existed!

  24. Tug Ricks
    August 21, 2012 at 12:36 am

    Not sure why, but it's not working for me. (Changing menu button) HMMM. Are you sure nothing was left out?

    • Chris Hoffman
      August 28, 2012 at 1:18 am

      Sorry everyone, the two code sections in Customizing the Button’s Appearance should end with a } on its own line. I've asked for the article to be updated.

Leave a Reply

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