Way to make tabs smaller without getting a theme?

nirvana · Post by **nirvana** » December 22nd, 2003, 6:14 am

is there any way to make the tabs shorter, height-wise? i know i could go looking for a theme that does it, but i dont like themes. i like the default, 'cept for this one aspect.

sboulema · Post by **sboulema** » December 22nd, 2003, 6:18 am

put this in your userchrome.css
change the numbers to desired values

Code: Select all

/* Change the tab-bar height */
tab {height: 23px !important;}
.tabbrowser-strip {height: 25px !important;}

Antrex · Post by **Antrex** » December 22nd, 2003, 6:28 pm

I know you said you didn't want to change theme, but.... =)
Right now i use breeze, which i like very much, and the tab bar is as small as can be without messing up the favicons. Too lazy to change over to default theme, but couldn't there be some problems with that involved in doing so?
Anyway, good luck and please report back if you find out something interesting

Lost User 15937 · Post by **Lost User 15937** » December 23rd, 2003, 4:03 am

Odd, everytime I close a tab and when I open a new tab, the tab bar flickers a little bit, like the whole bar goes blank...

/* Change the tab-bar height */
tab {height: 23px !important;}
.tabbrowser-strip {height: 25px !important;}

amdi8 · Post by **amdi8** » December 23rd, 2003, 4:45 am

sboulema wrote:put this in your userchrome.css
change the numbers to desired values
Code: Select all
/* Change the tab-bar height */
tab {height: 23px !important;}
.tabbrowser-strip {height: 25px !important;}

Excellent! Thanks for the tip. It works great. The close button is squished now, but who cares.

Now I have to do the same thing with the menubar, toolbar and the links bar and then I'll be in heaven ;-)

amdi8 · Post by **amdi8** » December 23rd, 2003, 5:00 am

Antrex wrote:I know you said you didn't want to change theme, but.... =)
Right now i use breeze, which i like very much, and the tab bar is as small as can be without messing up the favicons.

Thanks for the recommendation. I just tried Breeze and it's indeed small (the way I wished Firebird was by default). Unfortunately I really didn't like the colorless look. Not like I want garish colors everywhere, but I really like the colors of the default theme.

Isn't there a version of the default theme that uses the same icons but gets rid of all the wasted space?

Lost User 15937 · Post by **Lost User 15937** » December 23rd, 2003, 8:21 am

Is there a way to know the right proportion of icons?

It looks squished ^_~

-EDIT- And what's the default size?

Post by **shadytrees** » December 23rd, 2003, 5:04 pm

16x16 I think.

Post by **old jasonb** » December 23rd, 2003, 5:25 pm

Along with this, I also specified "tab {padding-top: 5px !important}" in order to get the title of the tab to appear to be centered vertically. Why this doesn't happen by default, as it does with Mozilla, as opposed to having it at aligned to the top, is beyond me.

realgeorge · Post by **realgeorge** » December 23rd, 2003, 11:14 pm

/* Shrink tab titles by 35% */
.tabbrowser-tabs .tab-text {
font-size: 90%;
}

/* Change all tab properties */
tab {
height: 20px !important;
max-height: 23px !important;
-moz-appearance: none !important;
}

/* cosmetic effects to line everything up*/
.tabs-closebutton {
padding: 2px !important;
}

mai9 · Post by **mai9** » December 24th, 2003, 4:45 am

realgeorge, Icons look squished with that one. Anybody knows how to remove those extra pixels without squeezing favicons?

peaveyman · Post by **peaveyman** » December 27th, 2003, 6:21 pm

sboulema wrote:put this in your userchrome.css
change the numbers to desired values
Code: Select all
/* Change the tab-bar height */
tab {height: 23px !important;}
.tabbrowser-strip {height: 25px !important;}

I have changed the numbers all the way down to 5px and can't tell any difference. I put it in the userchrome.css file in my profile. I know this is the right place, but it didn't change it for me.

frease · Post by **frease** » December 27th, 2003, 8:43 pm

Would this help? I'll just dump whatever I have and maybe you can modify it to suit your needs:

Code: Select all

/* General Tab Appearances */

tab {
height: 20px !important;
max-height: 20px !important;
-moz-appearance: none !important;
}
.tabbrowser-tabs tab {
background-color: #D7D7D7 !important;
margin-top: 4px !important;
margin-left: 1px !important;
margin-right: 1px !important;
margin-bottom: -2px !important;
border-top: 1px solid !important;
border-right: 1px solid !important;
border-left: 1px solid !important;
border-bottom: 1px #CCCCCC!important;
-moz-border-top-colors: #CCCCCC !important;
-moz-border-right-colors: #CCCCCC !important;
-moz-border-left-colors: #CCCCCC !important;
}

tab[selected="true"] {
background: #FFFFFF !important;
padding-bottom: 1px !important;
margin-top: 0px !important;
margin-bottom: -1px !important;
border-top: 1px solid !important;
border-right: 1px solid !important;
border-left: 1px solid !important;
border-bottom: none !important;
}

#content tab:hover {
background: #FFFFFF !important;
padding-bottom: 1px !important;
margin-top: 0px !important;
margin-bottom: -1px !important;
border-top: 1px solid !important;
border-bottom: none !important;
}

/* icons on tab on regular, hover, and selected */
.tabbrowser-tabs *|tab .tab-icon {
display: none;
}

.tabbrowser-tabs *|tab:hover .tab-icon {
display: -moz-box;
}

/* Show icons on selected tab */
.tabbrowser-tabs tab[selected="true"] .tab-icon {
display: -moz-box;
}

/* cosmetic effects to line everything up--unconfirmed */
.tabbrowser-strip {
border-bottom: 0px #CCCCCC !important;
}

/* End Tab Customization */

Krueger_Industrial · December 28th, 2003, 11:45 am

sboulema wrote:put this in your userchrome.css
change the numbers to desired values
Code: Select all
/* Change the tab-bar height */
tab {height: 23px !important;}
.tabbrowser-strip {height: 25px !important;}

Whoa Cool! I changed mine to 34 and 37. I like the bigger tabs (monitor is running at 1280x1024 resolution)

peaveyman · Post by **peaveyman** » December 28th, 2003, 12:11 pm

frease wrote:Would this help? I'll just dump whatever I have and maybe you can modify it to suit your needs:

Code: Select all

/* General Tab Appearances */

tab {
height: 20px !important;
max-height: 20px !important;
-moz-appearance: none !important;
}
.tabbrowser-tabs tab {
background-color: #D7D7D7 !important;
margin-top: 4px !important;
margin-left: 1px !important;
margin-right: 1px !important;
margin-bottom: -2px !important;
border-top: 1px solid !important;
border-right: 1px solid !important;
border-left: 1px solid !important;
border-bottom: 1px #CCCCCC!important;
-moz-border-top-colors: #CCCCCC !important;
-moz-border-right-colors: #CCCCCC !important;
-moz-border-left-colors: #CCCCCC !important;
}

tab[selected="true"] {
background: #FFFFFF !important;
padding-bottom: 1px !important;
margin-top: 0px !important;
margin-bottom: -1px !important;
border-top: 1px solid !important;
border-right: 1px solid !important;
border-left: 1px solid !important;
border-bottom: none !important;
}

#content tab:hover {
background: #FFFFFF !important;
padding-bottom: 1px !important;
margin-top: 0px !important;
margin-bottom: -1px !important;
border-top: 1px solid !important;
border-bottom: none !important;
}

/* icons on tab on regular, hover, and selected */
.tabbrowser-tabs *|tab .tab-icon {
display: none;
}

.tabbrowser-tabs *|tab:hover .tab-icon {
display: -moz-box;
}

/* Show icons on selected tab */
.tabbrowser-tabs tab[selected="true"] .tab-icon {
display: -moz-box;
}

/* cosmetic effects to line everything up--unconfirmed */
.tabbrowser-strip {
border-bottom: 0px #CCCCCC !important;
}

/* End Tab Customization */

I tried this, but it still didn't seem to make any difference on the default theme that comes with Firebird. I can't seem to find another theme that I like nearly as much.

Way to make tabs smaller without getting a theme?

Way to make tabs smaller without getting a theme?

TRY THESE FOR A GOOD APPEARANCE