Highlight active tab with latest version please?

User Help for Mozilla Firefox
User avatar
madmudmob
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Highlight active tab with latest version please?

Post by madmudmob »

Well, I took the plunge from my ESR version up to the newest version ..... to my surprise after so much of what I read in some threads here - I really like it.

I've found replacements for the add-ons I consider necessary and customised the appearance until I have got it just right = happy me :)

But, there is one thing I cannot seem to adjust ....
is there an way please to either alter the colour of the active tab, put a shadow either side as I had previously with a Stylish script or dim/change the non-active ones?
With my dim eyesight I have a real problem telling which one I have in front/open.

I have searched through the add-ons and had no success. I did find one (Color Tabs I think) but it changed each tab's page into a hideous bright colour individually as was most certainly not for me lol.

As always any hints or help most appreciated :)
Last edited by madmudmob on January 21st, 2018, 8:22 am, edited 2 times in total.
Mud is good!
User avatar
madmudmob
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Re: How to highlight active tab with latest version please?

Post by madmudmob »

Have discovered I really dislike the way that the text in the tabs fades when I have more than a few tabs open too.
Mud is good!
User avatar
LIMPET235
Moderator
Posts: 39936
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Re: How to highlight active tab with latest version please?

Post by LIMPET235 »

Hi MMM,
There are quite a few, yeah well, lots of Styles that may suit.
Grab a cuppa & take a stroll through the site...
> https://userstyles.org/styles/browse?se ... lor%20tabs

I found a couple that you might like but....poisonal (that's personal, but with a US accent), taste 'n' all that?
1/. > https://userstyles.org/styles/66974/fir ... dated-tabs
2/. > https://userstyles.org/styles/5677/unre ... s-colorful
3/. > https://userstyles.org/styles/66974/fir ... dated-tabs

You do have the latest version of Stylish, don't you?
> https://addons.mozilla.org/en-US/firefox/addon/stylish/

&, "They" decided that the fading "looked good."
Yeah....right on. "Idiots" :)
[Ancient Amateur Astronomer.]
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.

(Always choose the "Custom" Install.)
User avatar
madmudmob
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Re: How to highlight active tab with latest version please?

Post by madmudmob »

Thanks you .... I do have the new Stylish but haven't yet figured it out. Off to play I go :)
Mud is good!
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: How to highlight active tab with latest version please?

Post by Frank Lion »

LIMPET235 wrote:&, "They" decided that the fading "looked good."
Yeah....right on. "Idiots" :)
That's sort of fixable, but...

The addressbar fading can be fixed and turned back to the ....ellipsis effect. However, as I recall, the tab underlying code is different and the entire tab text is shown (under the hood) thrown at the tab and the last part then faded out. The fading can be got rid of, but it results in a pretty abrupt chopped off look, which cannot be ... as before. The fade could be changed, but what to?

At the heart of all this and 'to blame' are the new CSS3 commands. My themes are stuffed with them, but you'd never know it, which is as it should be. But, Mozilla have this 'kids in a sweetshop' approach and just get carried away with them. Few years back they were letting rip with transitions (animation and fade-out/in) everywhere. Now, it is this stuff. - the one doing the tabs is mask-image, but they use many others.

Odd fact with geeks (bet they are all right-handed) - they know how to code, but seem incapable of styling a GUI that looks good. Not just Mozilla, all of them are just as bad.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
8-bit
Posts: 908
Joined: October 19th, 2007, 5:19 pm

Re: How to highlight active tab with latest version please?

Post by 8-bit »

Put these in your userChrome.css file, if you do not have a userChrome.css file, create one in any plain text editor and save the file in your profile in the folder named chrome.

Code: Select all

/* Firefox userChrome.css */

/* This will remove the current "line" above the active tab */
.tab-line {
  visibility: hidden !important;
}
/* Color of ACTIVE tab - #2f35ff is just a sample */
.tab-background[selected="true"] {
  background-color: #2f35ff !important;
  background-image: none !important;
}
/* Color of ACTIVE tab TEXT & bold or not bold. You can use a color code instead of "white" here if you wish. */
.tabbrowser-tab[selected] .tab-label {
  color: white !important;
  font-weight: bold !important;
/* font-weight: normal !important; (for regular text) */
}
You can generate and get colors here:

https://www.hexcolortool.com

https://developer.mozilla.org/en-US/doc ... icker_tool

* I am ambidextrous :)
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: How to highlight active tab with latest version please?

Post by Frank Lion »

madmudmob wrote:Thanks you .... I do have the new Stylish but haven't yet figured it out. Off to play I go :)
That would be the new Stylish for 57 that only allows website code changes now, would it? Simply put, Stylish is now no good for coding UI stuff, like tab styling.

Go here - http://forums.mozillazine.org/viewtopic ... #p14005643

...and then back here - http://forums.mozillazine.org/viewtopic ... #p14787766

* same here. :)
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
madmudmob
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Re: How to highlight active tab with latest version please?

Post by madmudmob »

Thanks folks .... userChrome.css and I are old enemies. I have never successfully managed to get it up and running but I will try again.

The file I make in Chrome is a text one? Then I just copy and paste within it? I think I am doing so but never get a result.
Mud is good!
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: How to highlight active tab with latest version please?

Post by Frank Lion »

madmudmob wrote:Thanks folks .... userChrome.css and I are old enemies.
I know, that's why I gave you this link - http://forums.mozillazine.org/viewtopic ... #p14005643 the folder and files have already been made for you.

When someone then gives you a userChrome.css snippet, as above, you then simply copy the code and paste it into your userChrome.css file (below the namespace line, unless instructed otherwise) , save, restart and you're done.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: How to highlight active tab with latest version please?

Post by BuddhaNature »

Thanks very much 8-bit. Was waiting for something like that. Now implemented, and happy. :D

Only two things I would add are:

1) No line at the top of your code that says:

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
2) For folks that don't like hex-codes much a table of colour-names (including the hex-codes anyway) that should work is here: CSS Colors


@madmudmob

There is a step-by-step guide to getting a usable userChrome.css file here: A Beginner's Guide to Creating and Using a userChrome.css File

If you go step-by-step through the guide you will see how to get userChrome.css to work. Everything you do in that file is reversible, delete-able, comment-out-able, so no worries about irretrievably breaking anything. Just try the tweak described in the guide and you will have some actual understanding of how userChrome.css works. Once done that, then go for what you really want after you've crossed the hump of getting userChrome.css to work. It's simple if you do it step-by-step.
OS: Windows 10 Pro. x64
User avatar
RobertJ
Moderator
Posts: 10880
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Re: How to highlight active tab with latest version please?

Post by RobertJ »

.
Once you have a text file in Chrome it should be named userChrome.css. Note it is a text file not a Word file.

Then it should contain the following

Code: Select all

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

/* ACTIVE TAB BACKGROUND COLOR */

.tab-content[selected="true"] {
  background: rgba(65, 85, 145, 0.4) !important;
}

With this code the active tab will be a medium blue; you can change it if you don't like the color.

NOTE: for the change to take effect after saving the text file you need to restart Firefox.

.
FF 92.0 - TB 78.13 - Mac OSX 10.13.6
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: How to highlight active tab with latest version please?

Post by dickvl »

Code: Select all

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

/* unset faded text */
.tab-label-container[textoverflow]:not([pinned]) {
  mask-image: unset !important;
} 
User avatar
madmudmob
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Re: How to highlight active tab with latest version please?

Post by madmudmob »

Thanks folks .... will have a go Image
Mud is good!
User avatar
RobertJ
Moderator
Posts: 10880
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Re: How to highlight active tab with latest version please?

Post by RobertJ »

.
NOTE: This should only appear ONCE at the top of the userChrome.css file

Code: Select all

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

.
FF 92.0 - TB 78.13 - Mac OSX 10.13.6
User avatar
costark
Posts: 548
Joined: July 14th, 2004, 5:03 am

Re: How to highlight active tab with latest version please?

Post by costark »

RobertJ wrote:.
Once you have a text file in Chrome it should be named userChrome.css. Note it is a text file not a Word file.

Then it should contain the following

Code: Select all

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

/* ACTIVE TAB BACKGROUND COLOR */

.tab-content[selected="true"] {
  background: rgba(65, 85, 145, 0.4) !important;
}

With this code the active tab will be a --medium blue--; you can change it if you don't like the color. That's Not clear HOW for amateurs UNTIL you play with the several Color Chart Links provided and notice -- the rgba Values -- they provide. Substituting into YOUR Code is then easy.

NOTE: for the change to take effect after saving the text file you need to restart Firefox.

.
https://i.imgur.com/3U2P8PQ.jpg

Really enjoy the education - Thanks to all!
My "Mild Yellow" Active Tab in Imgur Link above used RobertJ's Code (Thanx) and my "substituted" rgba for his BLUE was ( 247, 247, 171, 1).
The Beginner's Guide to userChrome.css by BuddhaNature was Spot On (Thanx again) for us CSS Amateurs and a key for me way back was Saving the css File WITHIN Chrome as "All Files", NOT as .txt File. Deleting the extra .txt extension worked too, although I didn't know it at the time.

madmudmob, Persevere!
W10 22H2 - SSD-HDD i5 12G -
Locked