Recenter tab text

[kltpzyxmrm]

Firefox 60.02, Windows 10 Pro

I'm in the process of trying to make Quantum as cozy as possible, like pre-57.

I'm using Aris' CustomCSSforFx.

I added

Code: Select all

/* TAB BAR: ADJUST HEIGHT */
#TabsToolbar .tabbrowser-tab[selected] {
  height: 19px !important; /* 29px compact, 33px normal, YMMV */
  min-height: 19px !important;
  max-height: 19px !important;
}

to userchrome.css, which did it's job, but the text is sitting on the bottom margin. I need to lift it up to the center.

None of the fixes I came across had an effect.

thanks

[Frank Lion]

...to userchrome.css, which did it's job, but the text is sitting on the bottom margin. I need to lift it up to the center.

I'd do something like this -

Code: Select all

/*Franks raise selected tab text...*/
#TabsToolbar .tabbrowser-tab[selected] .tab-label {
margin-top: -5px !important;
margin-bottom: 5px !important;}

3 tricks I've used there. Firstly, always exaggerate the margin/padding/colours you want, until you're sure you're hitting the correct ID/class and then adjust to the right level - it saves peering at 1px changes, etc. Secondly, see how I used the neg margin for the top? You'd think that just the bottom one would do the trick and mostly it does, but not always. Experience tells me that negs fixes this and drives the point home across various troublesome OSs and conditions.

Finally, forget that Browser Toolbox rubbish - only use it to find the relevant .css (browser.css here) and figure what you want and the IDs to use by reading the .css. It's easy and will not drive you insane trying to make sense of that 'dev tool' made by someone who has obviously never made a theme in their life.

[kltpzyxmrm]

Hi Frank,

I'm embarrassed to say it seems that I inadvertently misrepresented my knowledge/expertise.

When I said "I added", I should have said more specifically, I found that tweak and added it. I did not create it myself.

That doesn't mean I'm not willing to learn. On the contrary. I've played a little with .css before and been able to pick up a few small things thru trial and error. I do appreciate your comments.

It also looks I was dealing with an optical illusion. This is what my tab bar looks like with no height adjustment.


Here it is with what I thought was the added height adjustment. I thought I was looking at a narrower tab bar, but that wasn't the case. As you can see, it doesn't really adjust the height, but replaces a potion of it with a wide white border, cutting off the text


With your tweak, the text in the active tab is raised, but everything else remain the same


So I need a bit more help than I thought

[Frank Lion]

Here it is with what I thought was the added height adjustment. I thought I was looking at a narrower tab bar, but that wasn't the case. As you can see, it doesn't really adjust the height, but replaces a potion of it with a wide white border, cutting off the text

I cover tab height in this thread. - viewtopic.php?p=14777480&sid=59121dc41590b230d63daca0c2592a8f#p14777480

With your tweak, the text in the active tab is raised, but everything else remain the same


So I need a bit more help than I thought

Well, yeah, if you supply a code snippet that only affects the active tab by using [selected], then my code above is going to do the same. If you want to hit all the tabs, remove [selected] in my original code above and change the comment (the /*....*/ bit) accordingly.

[kltpzyxmrm]

I made this change

Code: Select all

/*Franks raise tab text...*/
#TabsToolbar .tabbrowser-tab .tab-label {
margin-top: -5px !important;
margin-bottom: 5px !important;}


The bar has narrowed properly, and the text is centered.

However, the text is now faded, and removed altogether in the active tab


Among the tweaks I've used from CustomCSSforFx is creating tab backgorund colors as you see in the images. Perhaps it's causing a conflict?

[Frank Lion]

Among the tweaks I've used from CustomCSSforFx is creating tab backgorund colors as you see in the images. Perhaps it's causing a conflict?

Hi,

Glad the tab centering stuff worked OK for you. But, unless it's intentional, I see a good few conflicts showing in your images. Certainly, Aris wouldn't put out background-color definitions without also adding contrasting color defines as well (which define the font colour) just because, er, we don't do that.

Sounds like it would be a good idea to advise Aris of what you are trying to achieve here and then take his advice on how to do it - viewtopic.php?p=14802780#p14802780

[kltpzyxmrm]

I will. Thanks for everything.