userChrome.css Tweaks for ColorfulTabs in Firefox Quantum and later

[Shivanand Sharma]

As everyone may know, Firefox Quantum is a different Firefox from the one we've known for years now. Many extensions are dead. However there are ways to customize the look and feel of Firefox using userChrome.css file.

This topic intends to provide userChrome.css tweaks for users of ColorfulTabs. Anything that makes life better is welcome.

• This topic was modified 7 years ago by Shivanand Sharma.

[Shivanand Sharma]

To edit userChrome.css do the following:

1. Click on the Firefox Menu on the top right of the Firefox window.
2. Click on Help.
3. Click on Troubleshooting Information.
4. Click on Show in Finder or Open Folder
5. Open the Chrome folder. Create it if it doesn't exist.
6. Edit the file named userChrome.css (create if it doesn't exist).

Attachments:

You must be logged in to view attached files.

[Shivanand Sharma]

Preventing colorfulTabs from changing the ToolBar color:

toolbar {
  background: initial !important;
}

[Thalon]

Tried this fix with my custom CSS (see the other thread below) to obtain a dark grey background (selecting the appropriate option in the CSS), but it doesn't work (i see that color for just a second after FF startup, then it reverts back to its usual light grey color).

[FluxApex]

Thanks for this. Glad I can use Color Tabs and still theme FF. Instead of 'initial' I have just used contrasting colors for 'background' and 'color'. I'm not that big a fan of 'Metro' colors in the newer apps, but contrasting metro colors would work well here.
What I'm using atm:

toolbar {
  background: #263238 !important;
  color: #ECEFF1 !important;
}

[dave phillips]

I want the option to have each tab be a different color like in the past.Is there a way to do it in Firefox Quantum ?

[EchoingWolfcry]

Hi,

At first I have to say how much I appreciate your work on this addons. It should be a must-have for any browser in my opinion. (It is so sad the Mozilla Foundation do not think the same about that.)

But despite of the description and the code written above (that I used) I can not colorize the inactive, white tabs and I couldn't remove the color of the tool-bar background, so I can't observe any change in colors of UI, and it looks like before.

I created the userChrome.css file in my home directory of Firefox 58.0.2 (64 bit) on Linux Mint 18.3 Xfce, and I can not see any change at the colors of the tabs or toolbar background. (If more tabs are open only the active one is colored and the color of the toolbar background is identical with that color, but the other tabs are uncolored (just white).

The code wich I wrote in userChrome.css is:

#  Customization of UI of Firefox Quantum

toolbar {
  background: initial !important;
}

toolbar {
  background: #263238 !important;
  color: #ECEFF1 !important;
}

So if I failed the CSS file, please forgive me, but I'm not versed at all in CSS-coding.
It would be useful the exact list of the code-lines (or the relevant part) of a userChrome.css file which it could be used as a template to make ColorfulTabs work as the good old version of it.
Thank you any help in anticipation.

[FluxApex]

It is not in the home directory, but in a sub directory named "Chrome" so the file would be located @

"%appdata%\Mozilla\Firefox\Profile.*******\Chrome\userChrome.css"

in your appropriate Profile directory. He did state in the OP that if the "Chrome" folder doesn't exist you must create it.

• This reply was modified 6 years, 11 months ago by FluxApex.
• This reply was modified 6 years, 11 months ago by FluxApex.

[FluxApex]

And for your reference the second

background: #<hex color>

will override the first

background: initial

and therefore the first becomes redundant and no longer needed.

[EchoingWolfcry]

@ FluxApex,

Thanks, I had forgotten to make the chrome directory, indeed.
So I made it and took the userChrome.css file there (into the Chrome directory). . . But it doensn't work.
I use Linux not Windows, so the right path for my Chrome directory is:
/home/"user-name"/.mozilla/firefox/"name_of_profile_directory".default/Chrome/userChrome.css

I don't know where is the problem, but I will try to investigate it.
Maybe the name of the "Chrome" directory have to change to "chrome", because Linux is sensitive for letters and makes diference between capitals and non-capitals.

On the other hand, you are right, I make a redundancy in my userChrome.css so I made a correction for this reason.
Thanks again.

------------------------------------------------------------

Update:

I made a directory in my profile directory of Firefox named "chrome", too. I copied the userChrome.css file to that.
So I have to directories with this css file, one named "Chrome" and another named "chrome". Nothing happened after restarting of Firefox (version 58.0.2 , 64bit on Linux Mint 18.3 Xfce) .

What could be the root of this issue ?

• This reply was modified 6 years, 11 months ago by EchoingWolfcry.
• This reply was modified 6 years, 11 months ago by EchoingWolfcry.

[EchoingWolfcry]

I would say before:

"On the other hand, you are right, I had MADE a redundancy in my userChrome.css, so I made a correction after your reply."

Sorry, my English is not too good.
I hope you could understand the essence of my message, even so.

Regards,
E.W.

P.S.
The problem persists, so I would be thankful if you or someone other expert can share with me some tips & tricks to fix it.

[FluxApex]

I use Linux as well (several distros), but I haven't messed with it much lately and have been developing Windows utilities so it's been a while, but you may find good information here:

Ubuntu - Userchrome css tweaks for firefox quantum and later

It seams you might have to add:
@namespace xul url(https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

to the top of your userChrome.css file

• This reply was modified 6 years, 11 months ago by FluxApex.

[Thalon]

Still trying to tweak my custom CSS: trying to use this trick to emulate the addon bar at the bottom: it works, the only drawback is that the new addon bar is influenced by colorfultabs and has the same color of the active tab.
I need to have it the same color of the address bar (light gray in my case): any info about the lines of code I need to add to my CSS to make it so?
Thanks in advance for any help.

[Jay Palmquist]

Does anyone have a code that will automatically open a link into a new tab?

Otherwise, I'm always having to right-click on 'Open in new tab.'

[Raviv L]

how you create userChrome.css file

[Author]

Posts