Highlight active tab with latest version please?
- madmudmob
- Posts: 810
- Joined: August 30th, 2006, 7:34 am
- Location: Somerset, UK
Highlight active tab with latest version please?
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
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!
- madmudmob
- Posts: 810
- Joined: August 30th, 2006, 7:34 am
- Location: Somerset, UK
Re: How to highlight active tab with latest version please?
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!
- LIMPET235
- Moderator
- Posts: 39961
- 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?
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"
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.)
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.)
- madmudmob
- Posts: 810
- Joined: August 30th, 2006, 7:34 am
- Location: Somerset, UK
Re: How to highlight active tab with latest version please?
Thanks you .... I do have the new Stylish but haven't yet figured it out. Off to play I go
Mud is good!
- Frank Lion
- Posts: 21178
- Joined: April 23rd, 2004, 6:59 pm
- Location: ... The Exorcist....United Kingdom
- Contact:
Re: How to highlight active tab with latest version please?
That's sort of fixable, but...LIMPET235 wrote:&, "They" decided that the fading "looked good."
Yeah....right on. "Idiots"
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.)
.
.
- 8-bit
- Posts: 908
- Joined: October 19th, 2007, 5:19 pm
Re: How to highlight active tab with latest version please?
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.
You can generate and get colors here:
https://www.hexcolortool.com
https://developer.mozilla.org/en-US/doc ... icker_tool
* I am ambidextrous
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) */
}
https://www.hexcolortool.com
https://developer.mozilla.org/en-US/doc ... icker_tool
* I am ambidextrous
- Frank Lion
- Posts: 21178
- Joined: April 23rd, 2004, 6:59 pm
- Location: ... The Exorcist....United Kingdom
- Contact:
Re: How to highlight active tab with latest version please?
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.madmudmob wrote:Thanks you .... I do have the new Stylish but haven't yet figured it out. Off to play I go
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.)
.
.
- madmudmob
- Posts: 810
- Joined: August 30th, 2006, 7:34 am
- Location: Somerset, UK
Re: How to highlight active tab with latest version please?
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.
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!
- Frank Lion
- Posts: 21178
- Joined: April 23rd, 2004, 6:59 pm
- Location: ... The Exorcist....United Kingdom
- Contact:
Re: How to highlight active tab with latest version please?
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.madmudmob wrote:Thanks folks .... userChrome.css and I are old enemies.
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.)
.
.
- BuddhaNature
- Posts: 537
- Joined: January 3rd, 2008, 9:44 am
- Location: Scotland
Re: How to highlight active tab with latest version please?
Thanks very much 8-bit. Was waiting for something like that. Now implemented, and happy.
Only two things I would add are:
1) No line at the top of your code that says:
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.
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");
@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
- 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?
.
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
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.
.
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;
}
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
- dickvl
- Posts: 54163
- Joined: July 18th, 2005, 3:25 am
Re: How to highlight active tab with latest version please?
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;
}
- madmudmob
- Posts: 810
- Joined: August 30th, 2006, 7:34 am
- Location: Somerset, UK
- 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?
.
NOTE: This should only appear ONCE at the top of the userChrome.css file
.
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
- costark
- Posts: 548
- Joined: July 14th, 2004, 5:03 am
Re: How to highlight active tab with latest version please?
https://i.imgur.com/3U2P8PQ.jpgRobertJ 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
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.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; }
NOTE: for the change to take effect after saving the text file you need to restart Firefox.
.
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 -