Changing the Background Color of FF Menu Bar
-
- Posts: 339
- Joined: September 8th, 2012, 9:46 am
Changing the Background Color of FF Menu Bar
Is there a way to change the background color of the FF version 94 menu bar (it's white now) without changing the color of anything else in the FF window?
* HP Pavilion Desktop 510-p114
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
-
- Posts: 6421
- Joined: February 3rd, 2009, 6:29 pm
Re: Changing the Background Color of FF Menu Bar
Try the following entry in the userChrome.css file.
http://kb.mozillazine.org/UserChrome.css
Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.
Code: Select all
#toolbar-menubar {
background-color: orange !important;
}
Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.
-
- Posts: 339
- Joined: September 8th, 2012, 9:46 am
Re: Changing the Background Color of FF Menu Bar
Thank you for your help.
I'm just starting with userChrome, and I don't know where the toolkit.legacyUserProfileCustomizations.stylesheets preference is, or how to set it to true, so I guess I'll have to pass on this.
I have my computer set to change the display to a warmer color after 6 PM, and when it changes, not only does the Title background change but also several other things (the vertical scrollbar for example) also change to the warmer color. Not sure I want that.
I'm just starting with userChrome, and I don't know where the toolkit.legacyUserProfileCustomizations.stylesheets preference is, or how to set it to true, so I guess I'll have to pass on this.
I have my computer set to change the display to a warmer color after 6 PM, and when it changes, not only does the Title background change but also several other things (the vertical scrollbar for example) also change to the warmer color. Not sure I want that.
* HP Pavilion Desktop 510-p114
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
-
- Posts: 6421
- Joined: February 3rd, 2009, 6:29 pm
Re: Changing the Background Color of FF Menu Bar
Here are detailed instructions. (see section 6 for preference info)
How to Create a userChrome.css File
http://www.userchrome.org/how-create-us ... e-css.html
P.S.
You could also try installing a theme.
Firefox addons - Themes
http://addons.mozilla.org/firefox/themes/
How to Create a userChrome.css File
http://www.userchrome.org/how-create-us ... e-css.html
P.S.
You could also try installing a theme.
Firefox addons - Themes
http://addons.mozilla.org/firefox/themes/
-
- Posts: 215
- Joined: September 3rd, 2008, 4:26 pm
Re: Changing the Background Color of FF Menu Bar
OPEN CONFIGURATION PREFERENCES
In the Firefox URL bar type “about:config”
Enter
“Proceed with Caution” appears
Unselect “Warn me when I attempt to access the
preferences”
Select “Accept the Risk and Continue”
Configuration Preferences file opens in a tab
LOAD CUSTOMIZATION FILES AT STARTUP
In the Search Bar type “userprof”
The preference
“toolkit.legacyUserProfileCustomizations.stylesheets”
appears set to the value “false”
Click the double arrow at the right of the preference
to toggle the value to “true”
Close Configuration Preferences
CREATE A CHROME FOLDER
Hamburger menu > Help > More Troubleshooting
Information
Troubleshooting Information page pens
Scroll down to “Profile Folder”
Click the “Open Folder” button
Profile folder opens
Right-click in the folder
Select “New > Folder”
Type the new folder name: “chrome”
Enter
CREATE A CSS FILE
Open Notepad
File > Save As
In the Save As window
To the right of "Save as type" select "All Files"
To the right of "File name" type "userChrome.css"
In the navigation pane select "Desktop"
Save
Close Notepad
MOVE THE CSS FILE INTO THE CHROME FOLDER
WinKey+D
Desktop appears
Click the Profile folder icon in the Taskbar
Profile folder maximizes
WinKey+right arrow
Profile folder is pinned to the right
Drag the userChrome.css file from the Desktop into the chrome folder
Maximize the Profile folder
Close the Profile folder
In the Firefox URL bar type “about:config”
Enter
“Proceed with Caution” appears
Unselect “Warn me when I attempt to access the
preferences”
Select “Accept the Risk and Continue”
Configuration Preferences file opens in a tab
LOAD CUSTOMIZATION FILES AT STARTUP
In the Search Bar type “userprof”
The preference
“toolkit.legacyUserProfileCustomizations.stylesheets”
appears set to the value “false”
Click the double arrow at the right of the preference
to toggle the value to “true”
Close Configuration Preferences
CREATE A CHROME FOLDER
Hamburger menu > Help > More Troubleshooting
Information
Troubleshooting Information page pens
Scroll down to “Profile Folder”
Click the “Open Folder” button
Profile folder opens
Right-click in the folder
Select “New > Folder”
Type the new folder name: “chrome”
Enter
CREATE A CSS FILE
Open Notepad
File > Save As
In the Save As window
To the right of "Save as type" select "All Files"
To the right of "File name" type "userChrome.css"
In the navigation pane select "Desktop"
Save
Close Notepad
MOVE THE CSS FILE INTO THE CHROME FOLDER
WinKey+D
Desktop appears
Click the Profile folder icon in the Taskbar
Profile folder maximizes
WinKey+right arrow
Profile folder is pinned to the right
Drag the userChrome.css file from the Desktop into the chrome folder
Maximize the Profile folder
Close the Profile folder
-
- Posts: 339
- Joined: September 8th, 2012, 9:46 am
Re: Changing the Background Color of FF Menu Bar
I read the replies from morat and limp. Thank you. Here's what I did:
1. I set "toolkit.legacyUserProfileCustomizations.stylesheets" to True (it was set to False). Then I read restarted Firefox and verified that it remained set to True.
2. Next I went through the procedure written by limp. I saw that "userprof" also appeared and that it was set to False. I left it that way because there were no instructions telling me what to do.
3. When I got to CREATE A CHROME FOLDER, I saw that I had already done everything from that point to the end. The Chrome folder lives in Profiles/nyrqxxxx.default. The Chrome folder contains a userChrome.css file, a userChrome.css.bak file, and a userContent.css file.
Inside userChrome.css is some code that I pasted in earlier. The code starts with "/*** Photon-like Menu Colors (23 November 2021) ***/" and ends with a }.
4. I copied and pasted the following text (from Morate earlier in this thread) into userChrome.css:
#toolbar-menubar {
background-color: orange !important;
}
The I saved the the userChrome.css file and restarted Firefox but I can't see any difference in the Firefox colors, so I'm not sure what's happening.
1. I set "toolkit.legacyUserProfileCustomizations.stylesheets" to True (it was set to False). Then I read restarted Firefox and verified that it remained set to True.
2. Next I went through the procedure written by limp. I saw that "userprof" also appeared and that it was set to False. I left it that way because there were no instructions telling me what to do.
3. When I got to CREATE A CHROME FOLDER, I saw that I had already done everything from that point to the end. The Chrome folder lives in Profiles/nyrqxxxx.default. The Chrome folder contains a userChrome.css file, a userChrome.css.bak file, and a userContent.css file.
Inside userChrome.css is some code that I pasted in earlier. The code starts with "/*** Photon-like Menu Colors (23 November 2021) ***/" and ends with a }.
4. I copied and pasted the following text (from Morate earlier in this thread) into userChrome.css:
#toolbar-menubar {
background-color: orange !important;
}
The I saved the the userChrome.css file and restarted Firefox but I can't see any difference in the Firefox colors, so I'm not sure what's happening.
* HP Pavilion Desktop 510-p114
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
-
- Posts: 215
- Joined: September 3rd, 2008, 4:26 pm
Re: Changing the Background Color of FF Menu Bar
When you type “userprof” into the about:config search field, the
preference “toolkit.legacyUserProfileCustomizations.stylesheets”
will appear. Make sure the preference is set to "true."
Also, I noticed in your posting that you refer to your Chrome folder.
Make sure the folder is spelled with a lower-case "c" and not with a
capital "C."
If you're still having problems, delete all of the code in the userChrome.css file except morat's code and restart. If that doesn't work, you may have accidentally named your userChrome.css file as userChrome.css.txt. This is a very easy mistake to make when working with Notepad. In the View tab of File Explorer Options, unselect "Hide extensions for known file types," and take a look. Control Panel > Appearance and Personalization > File Explorer Options.
preference “toolkit.legacyUserProfileCustomizations.stylesheets”
will appear. Make sure the preference is set to "true."
Also, I noticed in your posting that you refer to your Chrome folder.
Make sure the folder is spelled with a lower-case "c" and not with a
capital "C."
If you're still having problems, delete all of the code in the userChrome.css file except morat's code and restart. If that doesn't work, you may have accidentally named your userChrome.css file as userChrome.css.txt. This is a very easy mistake to make when working with Notepad. In the View tab of File Explorer Options, unselect "Hide extensions for known file types," and take a look. Control Panel > Appearance and Personalization > File Explorer Options.
Last edited by limp on November 24th, 2021, 3:12 pm, edited 2 times in total.
-
- Posts: 6421
- Joined: February 3rd, 2009, 6:29 pm
Re: Changing the Background Color of FF Menu Bar
The entry works for me.
Troubleshoot userChrome.css: http://forums.mozillazine.org/viewtopic ... #p14887480
Troubleshoot userChrome.css: http://forums.mozillazine.org/viewtopic ... #p14887480
-
- Posts: 339
- Joined: September 8th, 2012, 9:46 am
Re: Changing the Background Color of FF Menu Bar
This morning I typed "userprof" into the about:config search field and verified that "toolkit.legacyUserProfileCustomizations.stylesheets" and "userprof" were set to True.
I also verified that my Chrome folder is spelled with a lower-case "c:" and that my userChrome.css file is named "userChrome.css".
Then I deleted everything in my userChrome file and saved it. (I will restart Firefox when I finish this post.)
I read that the first line in userChrome.css should be to put a "Namespace" line as the very first item in it but the description of what to do wasn't clear to me. Further reading about "namespace" led me down a rabbit hole...
Now to restart Firefox and see what happens.
I also verified that my Chrome folder is spelled with a lower-case "c:" and that my userChrome.css file is named "userChrome.css".
Then I deleted everything in my userChrome file and saved it. (I will restart Firefox when I finish this post.)
I read that the first line in userChrome.css should be to put a "Namespace" line as the very first item in it but the description of what to do wasn't clear to me. Further reading about "namespace" led me down a rabbit hole...
Now to restart Firefox and see what happens.
* HP Pavilion Desktop 510-p114
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
-
- Posts: 339
- Joined: September 8th, 2012, 9:46 am
Re: Changing the Background Color of FF Menu Bar
Okay. I restarted Firefox. Then I added:
#toolbar-menubar {
background-color: orange !important;
}
to my userChrome.css file, saved it, closed and reopened Firefox and now my Title bar is orange, just like Morat said it would. Unfortunately, the color of the Title bar does not change or dim when I click on another Firefox window. Only the text in the Menu bar changes.
Next, I'm going to reinsert the code that tightens up the text in the hamburger menu and see what happens. If it doesn't work (it did yesterday) I'll remove it again.
Thank you Morat and Limp for helping out.
#toolbar-menubar {
background-color: orange !important;
}
to my userChrome.css file, saved it, closed and reopened Firefox and now my Title bar is orange, just like Morat said it would. Unfortunately, the color of the Title bar does not change or dim when I click on another Firefox window. Only the text in the Menu bar changes.
Next, I'm going to reinsert the code that tightens up the text in the hamburger menu and see what happens. If it doesn't work (it did yesterday) I'll remove it again.
Thank you Morat and Limp for helping out.
* HP Pavilion Desktop 510-p114
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
-
- Posts: 339
- Joined: September 8th, 2012, 9:46 am
Re: Changing the Background Color of FF Menu Bar
I FOUND THE ANSWER!!
While mucking around in the "Hamburger" menu>More tools>Customize toolbar I noticed a box in the lower left-hand corner of the screen. The box was labeled "Title" and had an unfilled square at its left. I put a checkmark in the square and voila - a Title bar appeared in my browser.
So this problem is resolved and I am happy-happy!
While mucking around in the "Hamburger" menu>More tools>Customize toolbar I noticed a box in the lower left-hand corner of the screen. The box was labeled "Title" and had an unfilled square at its left. I put a checkmark in the square and voila - a Title bar appeared in my browser.
So this problem is resolved and I am happy-happy!
* HP Pavilion Desktop 510-p114
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8
* Windows 10 Home 22H2 19045.4291
* Firefox 124; Thunderbird 115.8