Windows 7 - Firefox - Customize Orange Bar

FredeGail

How to Customize the Orange Bar in Mozilla Firefox

Information

This tutorial will show you how to customize and adjust the orange bar in the left hand corner of Mozilla Firefox.

Note

Requirements:

Mozilla Firefox v. *at least 4*
Notepad

Tip

You cannot only follow the pictures below as a tutorial, read carefully the text.

1) Press the Orange Bar, go to Troubleshooting Information

Firefox - Customize Orange Bar-orange-bar-ff.png

2) Under Application Basics, press Open Containing Folder

Firefox - Customize Orange Bar-application.png

3) Look for a folder called "chrome", and make sure there's a "userChrome.css" inside it - If you can find all this go to step 6), if you cannot find the folder, continue to step 4)

4) Create a new folder called "chrome"

Firefox - Customize Orange Bar-rename.png

5) Get into Notepad, and copy the code below, Save it as "userChrome.css, and paste it into the chrome folder

Firefox - Customize Orange Bar-cssedit.png

Code:

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

6) The code:

Code:

background: #orange !important;

.. would be the colour for our bar. Use the hex-code, or just write down the colour you'd like.

The code:

Code:

content: "Firefox" !important;

.. would be the text in the bar.

The code:

Code:

color: #FFFFFF !important;

.. would be the colour-text!

Chance it for anything you like, Save it.

Warning

Remember to restart Firefox during chances

Hex Codes

Black: #000000
Red: #FF0000
Green: #00FF00
Blue: #0000FF
Yellow: #FFFF00
Cyan: #00FFFF
Pink: #FF00FF
Gray: #C0C0C0
White: #FFFFFF

Hope you liked it,
FredeGail

FredeGail · 07-13-2011

Any adds, typos, failures etc. - Please let me know!

Best Regards,
FredeGail

Britton30 · 07-13-2011

Here's a site with hex color codes and much more on CSS coding.
CSS Colors

Good job on your tut, I may have to use FF just to use it.

+1

FredeGail · 07-14-2011

Quote: Originally Posted by Britton30

Here's a site with hex color codes and much more on CSS coding.
CSS Colors

Good job on your tut, I may have to use FF just to use it.

+1

Thanks Britton, hoping to do more of those in the future

Best Regards,
FredeGail

JaidynM · 07-16-2011

Great tutorial FredeGail!

Some pictures/screenshots would be a great addition. Also, I'm pretty sure the orange bar is on the left hand side, not the right.

FredeGail · 07-16-2011

Quote: Originally Posted by JaidynM

Great tutorial FredeGail!

Some pictures/screenshots would be a great addition. Also, I'm pretty sure the orange bar is on the left hand side, not the right.

Oh! Sorry about that.
Thanks for the headsup. I'm throwing some pictures in soon, I was considering it too

Best Regards,
FredeGail

FredeGail · 07-16-2011

Tutorial updated!

Please also upload or copy/paste your .css so people will be able to use them too!

Tip

You cannot only follow the pictures below as a tutorial, read carefully the text.

Best Regards,
FredeGail

Arc · 07-16-2011

Brilliant work Frederik

FredeGail · 07-16-2011

Quote: Originally Posted by Arc

Brilliant work Frederik

Thanks Arc!!
Doing more in the future I hope so, it's great learning!
Also, I can't thank you enough for my signature

Best Regards,
FredeGail

StalkeR · 07-16-2011

Nice one !

Windows 7 - Firefox - Customize Orange Bar

Firefox - Customize Orange Bar

Firefox - Customize Orange Bar problems?