X
Tap here to go to the mobile version of the site.

Support Forum

How can I change the background of the Bookmarks and History sidebars in Firefox 24?

Posted

The default baby blue background of the Bookmarks and History sidebars is too close in color to the gray used for a selected item once I click in the website itself. How can I change it so that there's more contrast?

The default baby blue background of the Bookmarks and History sidebars is too close in color to the gray used for a selected item once I click in the website itself. How can I change it so that there's more contrast?

Chosen solution

You're missing a colon after background-color. This works for me, but I think that gold-ish color is burned into my vision now. My tastes aim toward soft colors - I use #DDDDDD for the color background of the Sidebar.

 #bookmarks-view, #historyTree {
  background-color: #CFB53B !important;
} 
Read this answer in context 1

Additional System Details

Installed Plug-ins

  • Shockwave Flash 11.8 r800
  • Adobe PDF Plug-In For Firefox and Netscape 10.1.8
  • Google Update
  • DIRECTV Player Plugin
  • 5.1.20513.0
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0

More Information

Ed 82 solutions 595 answers

Hello,

Please see the answers in the support question here:

https://support.mozilla.org/en-US/questions/948373

I hope that helps. Let me know if not.

Hello, Please see the answers in the support question here: https://support.mozilla.org/en-US/questions/948373 I hope that helps. Let me know if not.

Question owner

I placed a folder called chrome in %APPDATA%\Mozilla\Firefox\Profiles, added a text file called userChrome.css, and inserted the following code in that file:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#bookmarks-view, #historyTree {
  background-color #CFB53B !important;

}

It didn't work. What else am I missing?

I placed a folder called chrome in %APPDATA%\Mozilla\Firefox\Profiles, added a text file called userChrome.css, and inserted the following code in that file: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #bookmarks-view, #historyTree { background-color #CFB53B !important; } It didn't work. What else am I missing?
Ed 82 solutions 595 answers

I'm following the information found here:

http://kb.mozillazine.org/UserChrome.css

That page links to this one which gives more information on the Profile Folder:

http://kb.mozillazine.org/Profile_folder_-_Firefox

For Windows 7 the profile folder should be in the following location:

C:\Users\<Windows login/user name>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile folder>

I think you missed out the 'Roaming' folder.

Please let me know if that doesn't work.

I'm following the information found here: http://kb.mozillazine.org/UserChrome.css That page links to this one which gives more information on the Profile Folder: http://kb.mozillazine.org/Profile_folder_-_Firefox For Windows 7 the profile folder should be in the following location: C:\Users\<Windows login/user name>\AppData'''\Roaming\'''Mozilla\Firefox\Profiles\<profile folder> I think you missed out the 'Roaming' folder. Please let me know if that doesn't work.

Modified by Ed

the-edmeister
  • Top 10 Contributor
  • Moderator
4142 solutions 31201 answers

Helpful Reply

You can open the correct folder via Help > Troubleshooting Information -- Profile Folder -->> Show folder .

Once that folder is open, close Firefox, create the \chrome\ folder, and place the userChrome.css file in that folder.

Then you can open Firefox.

Or you can use the ChromEdit Plus extension to automatically create that folder and that file, and allowing you to edit userChrome.css from within Firefox. No need to route thru the bowels of Windows for the proper location, and then manually creating the \chrome\ folder and userChrome.css file.
http://webdesigns.ms11.net/chromeditp.html

You can open the correct folder via Help > Troubleshooting Information -- Profile Folder -->> Show folder . Once that folder is open, close Firefox, create the \chrome\ folder, and place the userChrome.css file in that folder. Then you can open Firefox. Or you can use the ChromEdit Plus extension to automatically create that folder and that file, and allowing you to edit userChrome.css from within Firefox. No need to route thru the bowels of Windows for the proper location, and then manually creating the \chrome\ folder and userChrome.css file. <br /> http://webdesigns.ms11.net/chromeditp.html

Question owner

After checking Troubleshooting Information, I moved the \chrome\ folder to its new location: C:\Users\<my username>\AppData\Roaming\Mozilla\Firefox\Profiles\v9m6tk59.default\chrome

I was missing the \v9m6tk59.default\ directory in the path before.

I've installed ChromEdit Plus which seems to confirm that I now have it in the right place.

The Bookmarks and History sidebars background remain the same baby blue color as when I started trying to change them. What else are we missing?

After checking Troubleshooting Information, I moved the \chrome\ folder to its new location: C:\Users\<my username>\AppData\Roaming\Mozilla\Firefox\Profiles\v9m6tk59.default\chrome I was missing the \v9m6tk59.default\ directory in the path before. I've installed ChromEdit Plus which seems to confirm that I now have it in the right place. The Bookmarks and History sidebars background remain the same baby blue color as when I started trying to change them. What else are we missing?
Ed 82 solutions 595 answers

Helpful Reply

Sorry if this is a silly question - have you restarted Firefox?

Sorry if this is a silly question - have you restarted Firefox?
the-edmeister
  • Top 10 Contributor
  • Moderator
4142 solutions 31201 answers

Chosen Solution

You're missing a colon after background-color. This works for me, but I think that gold-ish color is burned into my vision now. My tastes aim toward soft colors - I use #DDDDDD for the color background of the Sidebar.

 #bookmarks-view, #historyTree {
  background-color: #CFB53B !important;
} 
You're missing a '''colon''' after background-color. This works for me, but I think that gold-ish color is burned into my vision now. My tastes aim toward soft colors - I use #DDDDDD for the color background of the Sidebar. <pre><nowiki> #bookmarks-view, #historyTree { background-color: #CFB53B !important; } </nowiki></pre>

Question owner

@EddyC: Not a silly question at all, but I did restart Firefox each time.

@Edmeister: That got it! I may adjust the color to something else, but I wanted to use a color that I knew was distinctive initially.

Thanks to both of you for your help!

@EddyC: Not a silly question at all, but I did restart Firefox each time. @Edmeister: That got it! I may adjust the color to something else, but I wanted to use a color that I knew was distinctive initially. Thanks to both of you for your help!
the-edmeister
  • Top 10 Contributor
  • Moderator
4142 solutions 31201 answers

Here's a page that I have used to select colors and see the RGB & Hex codes.

http://www.colorschemer.com/online.html

Here's a page that I have used to select colors and see the RGB & Hex codes. http://www.colorschemer.com/online.html