MozillaZine

Recenter tab text

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

Post Posted June 24th, 2018, 4:51 pm

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

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

Post Posted June 24th, 2018, 6:28 pm

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

kltpzyxmrm
 
Posts: 98
Joined: June 16th, 2015, 10:59 am

Post Posted June 25th, 2018, 4:46 pm

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:

Frank Lion

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

Post Posted June 25th, 2018, 5:06 pm

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. - viewtopic.php?p=14777480&sid=59121dc41590b230d63daca0c2592a8f#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.
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.)

kltpzyxmrm
 
Posts: 98
Joined: June 16th, 2015, 10:59 am

Post Posted June 26th, 2018, 1:36 pm

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?

Frank Lion

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

Post Posted June 26th, 2018, 2:13 pm

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 - viewtopic.php?p=14802780#p14802780
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.)

kltpzyxmrm
 
Posts: 98
Joined: June 16th, 2015, 10:59 am

Post Posted June 26th, 2018, 5:12 pm

I will. Thanks for everything.

Return to Firefox General


Who is online

Users browsing this forum: No registered users and 1 guest