Changing the Background Color of FF Menu Bar

[skuddle]

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?

[morat]

Try the following entry in the userChrome.css file.

Code: Select all

#toolbar-menubar {
  background-color: orange !important;
}

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

Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.

[skuddle]

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.

[morat]

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/

[limp]

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

[skuddle]

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.

[limp]

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.

[morat]

The entry works for me.

Troubleshoot userChrome.css: http://forums.mozillazine.org/viewtopic ... #p14887480

[skuddle]

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.

[skuddle]

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.

[skuddle]

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!