MozillaZine

Way to make tabs smaller without getting a theme?

Discussion of general topics about Mozilla Firefox
nirvana
 
Posts: 162
Joined: August 21st, 2003, 12:34 am

Post Posted 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
 
Posts: 6615
Joined: May 20th, 2003, 12:34 am
Location: Amstelveen, The Netherlands

Post Posted 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
 
Posts: 69
Joined: September 13th, 2003, 3:30 pm
Location: Sweden

Post Posted 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
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted 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

User avatar
 
Posts: 46
Joined: October 29th, 2003, 6:50 pm

Post Posted 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

User avatar
 
Posts: 46
Joined: October 29th, 2003, 6:50 pm

Post Posted 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
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted 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?

shadytrees
Moderator

User avatar
 
Posts: 11743
Joined: November 30th, 2002, 6:41 am

Post Posted December 23rd, 2003, 5:04 pm

16x16 I think.

old jasonb
Moderator
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted 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

User avatar
 
Posts: 459
Joined: May 17th, 2003, 7:56 pm

Post Posted 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

User avatar
 
Posts: 1619
Joined: January 15th, 2003, 3:41 pm
Location: Barcelona

Post Posted 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

User avatar
 
Posts: 341
Joined: June 1st, 2003, 6:24 pm

Post Posted 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

User avatar
 
Posts: 3981
Joined: September 16th, 2003, 1:17 pm

Post Posted 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

User avatar
 
Posts: 195
Joined: November 2nd, 2003, 12:40 pm
Location: Location! Location! Location!

Post Posted 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

User avatar
 
Posts: 341
Joined: June 1st, 2003, 6:24 pm

Post Posted 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.

Return to Firefox General


Who is online

Users browsing this forum: Bing [Bot] and 2 guests