Recenter tab text

Discussion of general topics about Mozilla Firefox
Post Reply
kltpzyxmrm
Posts: 129
Joined: June 16th, 2015, 10:59 am

Recenter tab text

Post by 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
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Recenter tab text

Post by Frank Lion »

kltpzyxmrm wrote:...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.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
kltpzyxmrm
Posts: 129
Joined: June 16th, 2015, 10:59 am

Re: Recenter tab text

Post by 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.
Image

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
Image

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

So I need a bit more help than I thought :oops:
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Recenter tab text

Post by Frank Lion »

kltpzyxmrm wrote: 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
Image
I cover tab height in this thread. - http://forums.mozillazine.org/viewtopic ... #p14777480
With your tweak, the text in the active tab is raised, but everything else remain the same
Image

So I need a bit more help than I thought :oops:
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.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
kltpzyxmrm
Posts: 129
Joined: June 16th, 2015, 10:59 am

Re: Recenter tab text

Post by 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
Image

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?
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Recenter tab text

Post by Frank Lion »

kltpzyxmrm wrote: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 - http://forums.mozillazine.org/viewtopic ... #p14802780
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
kltpzyxmrm
Posts: 129
Joined: June 16th, 2015, 10:59 am

Re: Recenter tab text

Post by kltpzyxmrm »

I will. Thanks for everything.
Post Reply