MozillaZine

Highlight active tab with latest version please?

User Help for Mozilla Firefox
madmudmob

User avatar
 
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Post Posted January 14th, 2018, 12:11 pm

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!

madmudmob

User avatar
 
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Post Posted January 14th, 2018, 4:31 pm

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

User avatar
 
Posts: 38423
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Post Posted January 14th, 2018, 7:09 pm

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-7-HP/Intel® DualCore-2.0GHz/500G HDD/4 Gig Ram/550Watt PSU/350WattUPS/Firefox-20.0-57.0-61.0-62.0/T-bird-2.0.0.24/SnagIt-v10.0.1/MWP-7.11.0.
RadioYachting. (Always choose the "Custom" Install.)

madmudmob

User avatar
 
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Post Posted January 14th, 2018, 7:52 pm

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

User avatar
 
Posts: 20063
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 14th, 2018, 8:22 pm

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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

8-bit

User avatar
 
Posts: 908
Joined: October 19th, 2007, 5:19 pm

Post Posted January 14th, 2018, 10:47 pm

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 :)

Frank Lion

User avatar
 
Posts: 20063
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 15th, 2018, 8:39 am

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 - viewtopic.php?p=14005643#p14005643

...and then back here - viewtopic.php?p=14787766#p14787766

* same here. :)
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

madmudmob

User avatar
 
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Post Posted January 15th, 2018, 8:48 am

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!

Frank Lion

User avatar
 
Posts: 20063
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 15th, 2018, 9:02 am

madmudmob wrote:Thanks folks .... userChrome.css and I are old enemies.

I know, that's why I gave you this link - viewtopic.php?p=14005643#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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

BuddhaNature

User avatar
 
Posts: 217
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Post Posted January 15th, 2018, 9:08 am

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 7 Pro. x64

RobertJ
Moderator

User avatar
 
Posts: 10664
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted January 16th, 2018, 9:02 am

.
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 63.0 - FF 63b14 - FF 64a - TB 60.2.1 - Mac OSX 10.13.6
Computers I've used: IBM 7094/UNIVAC 1108/IBM 360/DEC PDP11/DEC VAX-11 780/DEC VAXstation 8000/Sun SPARCstation 2/Mac from 1984 to 2018

dickvl

User avatar
 
Posts: 52415
Joined: July 18th, 2005, 3:25 am

Post Posted January 16th, 2018, 8:06 pm

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

User avatar
 
Posts: 810
Joined: August 30th, 2006, 7:34 am
Location: Somerset, UK

Post Posted January 16th, 2018, 8:12 pm

Thanks folks .... will have a go Image
Mud is good!

RobertJ
Moderator

User avatar
 
Posts: 10664
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted January 17th, 2018, 7:20 am

.
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 63.0 - FF 63b14 - FF 64a - TB 60.2.1 - Mac OSX 10.13.6
Computers I've used: IBM 7094/UNIVAC 1108/IBM 360/DEC PDP11/DEC VAX-11 780/DEC VAXstation 8000/Sun SPARCstation 2/Mac from 1984 to 2018

costark
 
Posts: 300
Joined: July 14th, 2004, 5:03 am

Post Posted January 17th, 2018, 10:26 am

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!
Firefox 62.0.3 (64) - Win 7-64 Hm Prem - Hm-Stdnt '10 Ofce - ESET EIS - MBAM Prem 3 - SuperAS Pro - Macrium Reflect 7 - Diskeeper Pro 15- EPIM Mail - NO Java or Flash - i5 8G Quad Sandy Bridge G2

Return to Firefox Support


Who is online

Users browsing this forum: Google [Bot] and 7 guests