How To Customize The Orange Bar Menu In The Firefox Browser

firefox orange menu button customization logo   How To Customize The Orange Bar Menu In The Firefox BrowserFirefox’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. The userChrome.css file is located in your Firefox profile folder – 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 open profile folder button   How To Customize The Orange Bar Menu In The Firefox Browser

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 you prefer, like Notepad++.

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.

userchrome css file location   How To Customize The Orange Bar Menu In The Firefox Browser

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

customized firefox button in userchrome css   How To Customize The Orange Bar Menu In The Firefox Browser

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

customized firefox menu button   How To Customize The Orange Bar Menu In The Firefox Browser

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, 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;
}

makeuseof logo firefox button   How To Customize The Orange Bar Menu In The Firefox Browser

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 edit this menu   How To Customize The Orange Bar Menu In The Firefox Browser

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.

personal menu option for firefox   How To Customize The Orange Bar Menu In The Firefox Browser

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!

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

39 Comments -

Tug Ricks

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

Chris Hoffman

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.

step-2

Sebastian Hadinata

Thanks for pointing this out..

Chris Hoffman

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

Ma Kuru

How do you do that on mac?

Rob de Koter

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

Rob de Koter

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

Danny Roy Jenuil

It didn’t work for me either.

Harshil

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

Alan

@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

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

Scutterman

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

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.

RJ

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

Alan Wade

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

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

Kaashif Haja

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

Chris Hoffman

Ah, that’s also a really cool hack!

Thambaru Wijesekara

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

Ganesh Kumar

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

Chris Hoffman

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)

VS Vishnu

i use chrome.. :-)

Nguyen Tran

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

Chris Hoffman

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

NaraNarusha

coool :) im gonna try it

Shehan Nirmal

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

josemon maliakal

I have done it on ma fox

Shawn Adam

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

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

Sebastian Hadinata

Nice Guide! Time for customization now

GayashanNA

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

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

Rigoberto Garcia

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

Michael McKenzie

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

Chris Hoffman

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!

daniel

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

Jim

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!.)