How can I change the background tab colors to be the same color as Quantum?

Users and developers helping users with generic and technical Pale Moon issues on all operating systems.

Moderator: trava90

Forum rules
This board is for technical/general usage questions and troubleshooting for the Pale Moon browser only.
Technical issues and questions not related to the Pale Moon browser should be posted in other boards!
Please keep off-topic and general discussion out of this board, thank you!
Lolithetrolli

How can I change the background tab colors to be the same color as Quantum?

Unread post by Lolithetrolli » 2018-01-16, 02:32

Is there any way to manually edit the background tab's (and task bar's? I think that's what it's called?) colors? Maybe somewhere in the about:config? I know that it's possible because themes exist but I've looked all over the place on here, and on Firefox forums, but I can't find anything on it. Now, before you mention it, color my tabs doesn't work properly for me. And even if it did, it does not cover the entire bar with color. Just the tabs. If anyone can point me in the right direction I'd be very happy. Also, not to brown nose but I really really like Pale moon. I think you guys did a good job on it.
Attachments
The top is what it currently looks like.<br />And the bottom is how I'd like it to look. (This was a cheap gimp edit so it's not a pretty representation)
The top is what it currently looks like.
And the bottom is how I'd like it to look. (This was a cheap gimp edit so it's not a pretty representation)

User avatar
SpockFan02
Astronaut
Astronaut
Posts: 535
Joined: 2017-09-24, 16:35
Location: Mak pupulusšum, California

Re: How can I change the background tab colors to be the same color as Quantum?

Unread post by SpockFan02 » 2018-01-16, 22:33

Try adding this code to your userChrome.css:

Code: Select all

#TabsToolbar { background-color: #1e2541; }
.tabbrowser-tab:not([selected="true"]) { background-color: #1e2541; }
If you're not sure where to do that, it should go in your profile, in a folder called chrome (which you should create if it isn't already there), in the file userChrome.css (again, create it if it isn't already there). Additionally, userChrome.css should start with

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
. Note that I got the color from your gimp edit, so it may or may not be the exact color that Firefox Quantum uses.

Lolithetrolli

Re: How can I change the background tab colors to be the same color as Quantum?

Unread post by Lolithetrolli » 2018-01-17, 15:27

Ah, thank you for pointing me in the right direction, but this isn't working.
I copy and pasted everything that you gave me, but the color is not changing. :crazy:
Attachments
I have everything in the right place. Maybe something is wrong with the code layout?
I have everything in the right place. Maybe something is wrong with the code layout?

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1568
Joined: 2012-02-09, 23:35
Location: United Kingdom

Re: How can I change the background tab colors to be the same color as Quantum?

Unread post by Lootyhoof » 2018-01-17, 16:39

Is this Australium?

If people want it like this, I can certainly make it so. It depends how many want it versus how many don't, though.

Lolithetrolli

Re: How can I change the background tab colors to be the same color as Quantum?

Unread post by Lolithetrolli » 2018-01-17, 22:53

Yes, my original attachment is Australium, but I've since settled on Stratum as it's basically a sleeker version of the stock theme and I like it better. Anyways, Now that I know where I'm supposed to be looking at, I'll just figure this one out myself. There's no need to go making a new theme for just one guy. Thank's for your info though. :D

User avatar
SpockFan02
Astronaut
Astronaut
Posts: 535
Joined: 2017-09-24, 16:35
Location: Mak pupulusšum, California

Re: How can I change the background tab colors to be the same color as Quantum?

Unread post by SpockFan02 » 2018-01-18, 05:58

Adding an !important to the #TabsToolbar rule, making it

Code: Select all

#TabsToolbar { background-color: #1e2541 !important; }
, did it for the background behind the tabs, but for some reason I can't seem to be able to change the color of the tabs themselves on Windows.

Is this at least somewhat close to what you're looking for?
PhotonIsh.png

Lolithetrolli

Re: How can I change the background tab colors to be the same color as Quantum?

Unread post by Lolithetrolli » 2018-01-18, 14:35

PERFECT! Thank you.
I did a little more research based on what you shared, and I found out how to do it thoroughly.
Use this code in userChrome to make pale moon resemble Quantum:

Code: Select all

#TabsToolbar .tabbrowser-tab {
    color: rgba(255, 255, 255, 100) !important;
}
#TabsToolbar { background-color: rgba(32, 35, 64, 100) !important; }
#TabsToolbar .tabbrowser-tab {
    background: rgba(32, 35, 64, 100) !important;
}
#TabsToolbar .tabbrowser-tab[selected] {
    color: rgba(0, 0, 0, 100) !important;
}
#TabsToolbar .tabbrowser-tab[selected] {
    background: rgba(244, 244, 244, 100) !important;
}
I still have to tweak some minor things, but it's done. :D
Attachments
Yay.PNG
Last edited by Lolithetrolli on 2018-01-18, 15:38, edited 2 times in total.

User avatar
SpockFan02
Astronaut
Astronaut
Posts: 535
Joined: 2017-09-24, 16:35
Location: Mak pupulusšum, California

Re: How can I change the background tab colors to be the same color as Quantum?

Unread post by SpockFan02 » 2018-01-18, 23:31

Great! I'm glad you've got it how you like. :D

Locked