Windows 7 Forums

Welcome to Windows 7 Forums. Our forum is dedicated to helping you find support and solutions for any problems regarding your Windows 7 PC be it Dell, HP, Acer, Asus or a custom build. We also provide an extensive Windows 7 tutorial section that covers a wide range of tips and tricks.


Windows 7: Firefox - Customize Orange Bar


Firefox - Customize Orange Bar

How to Customize the Orange Bar in Mozilla Firefox
Published by FredeGail
13 Jul 2011
Published by

How to Customize the Orange Bar in Mozilla Firefox

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

Note   Note
Requirements:
  • Mozilla Firefox v. 4 (and above)
  • Notepad

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


1) Press the Orange Bar, go to Troubleshooting Information
Name:  orange bar ff.PNG
Views: 526
Size:  24.0 KB
2) Under Application Basics, press Open Containing Folder
Name:  application.PNG
Views: 1611
Size:  9.2 KB
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)
-css.png
4) Create a new folder called "chrome"
-rename.png
5) Get into Notepad, and copy the code below, Save it as "userChrome.css", and paste it into the chrome folder
-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   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
13 Jul 2011   #1
FredeGail

Microsoft Windows 7 Ultimate: x64 (SP1)
 
 

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

Best Regards,
FredeGail


My System SpecsSystem Spec
13 Jul 2011   #2
Britton30
Microsoft MVP

Windows 7 Ultimate X64 SP1
 
 

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
My System SpecsSystem Spec
14 Jul 2011   #3
FredeGail

Microsoft Windows 7 Ultimate: x64 (SP1)
 
 

Quote   Quote: Originally Posted by Britton30 View Post
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
My System SpecsSystem Spec
.

16 Jul 2011   #4
JaidynM

Windows 7 Ultimate x64/Windows 8 Consumer Preview x64/Ubuntu 11.04
 
 

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.
My System SpecsSystem Spec
16 Jul 2011   #5
FredeGail

Microsoft Windows 7 Ultimate: x64 (SP1)
 
 

Quote   Quote: Originally Posted by JaidynM View Post
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
My System SpecsSystem Spec
16 Jul 2011   #6
FredeGail

Microsoft Windows 7 Ultimate: x64 (SP1)
 
 

Tutorial updated!

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

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


Best Regards,
FredeGail
My System SpecsSystem Spec
16 Jul 2011   #7
Arc

Microsoft Community Contributor Award Recipient

Microsoft Windows 10 Pro Insider Preview 64-bit
 
 

Brilliant work Frederik
My System SpecsSystem Spec
16 Jul 2011   #8
FredeGail

Microsoft Windows 7 Ultimate: x64 (SP1)
 
 

Quote   Quote: Originally Posted by Arc View Post
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
My System SpecsSystem Spec
16 Jul 2011   #9
StalkeR

Windows 7 Ultimate SP1 / Windows 10 Pro x64
 
 

Nice one !
My System SpecsSystem Spec
Comment

 Firefox - Customize Orange Bar




Tutorial Tools




Similar help and support threads
Windows 7 Tutorial Category
How to customize Firefox Social Icons?
I am currently using Firefox 18. I have enabled the Firefox Social icons as seen in this screenshot: As is evident, they seem to be stretched. Is it possible to resize them back to their original size through userChrome.css or any other method?
Browsers & Mail
Firefox tabs below orange button
I recently changed my explorershell.dll and then this happened: http://i.imgur.com/FcTfe.png The explorershell.dll may be unrelated, but I thought it may be useful to mention. How do I get tabs next to the orange button like they used to be? They are too low.
Browsers & Mail
Customize Firefox 4.0’s UI to Create a Unique, Personalized Browser
Customize Firefox 4.0’s UI to Create a Unique, Personalized Browser for Your System http://www.howtogeek.com/geekers/up/sshot4d8bc6314a887.png The new UI in Firefox 4.0 is sleek looking and easy to use, but what if you want to customize it to a whole new degree? Using the Stratiform ...
Browsers & Mail
Firefox customize question
Does any body know how to change the background for list tab preview? maybe stylish or greasemonkey....
Browsers & Mail
Customize firefox
Hello i'm trying to customize mi firefox to the strata40 theme but there is one thing a cant customize that is this the buttons of the bookmars that appears the icon and the text, like in page below Firefox 4 Mockup Theme For Firefox 3 i have personalize the bar to show icon and texts but...
Browsers & Mail
Customize Bookmarks sidebar in Firefox
Hi all! :) I am currently using Firefox 3.6 as my main browser and was wondering if anyone has any idea if it is possible to customize the background to the bookmarks sidebar? As you can see the background is a plain old blueish colour and I would like to be able to change it or even make...
Customization


Our Sites

Site Links

About Us

Find Us

Windows 7 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 7" and related materials are trademarks of Microsoft Corp.

© Designer Media Ltd

All times are GMT -5. The time now is 07:51.

Twitter Facebook Google+



Windows 7 Forums

Seven Forums Android App Seven Forums IOS App