Set width of tabs in userchrome.css?

[velcrospud]

Has anyone done this?

no one seemed to be able to figure it out in this old thread (page 2 and 3)
http://www.mozillazine.org/forums/viewt ... highlight=

[johnKFT]

I found this lot from somewhere, which modifies my tabs. I seem to remember setting the width somewhere else, but not to an absolute value. Perhaps setting width in one of these bits might do it.

/* change appearance of all, inactive, and active tabs */
tab {
height: 25px !important;
max-height: 25px !important;
-moz-appearance: none !important;
}
.tabbrowser-tabs tab {
background-color: #9fc8ff !important;
margin-top: 1px !important;
border-top: 2px solid !important;
border-bottom: 2px solid black !important;
-moz-border-top-colors: #8080ff #00f !important;
-moz-border-right-colors: #8080ff #00f !important;
-moz-border-left-colors: #8080ff #00f !important;
-moz-opacity: .7 !important;
}
tab[selected="true"] {
background-color: #ffdfaa !important;
margin-top: 0px !important;
margin-left: 1px !important;
margin-right: 1px !important;
border-top: 2px solid !important;
border-right: 2px solid !important;
border-left: 2px solid !important;
border-bottom: 0px solid transparent !important;
-moz-opacity: 1 !important;
}

/* cosmetic effects to line everything up, i think */
.tabbrowser-strip {
border-right: 1px solid ThreeDShadow !important;
}
.tabs-right {
-moz-border-bottom-colors: #303f4f #8080ff !important;
}

[velcrospud]

Thanks, these seem like they would work but they don't

I have figured out how to manually edit the width but to do that you have to unzip toolkit.jar, go into \toolkit\content\global\widgets\tabbrowser.xml
find the two places it is set to 250 and change them to what I want zip it back up. Too much work to do every time I upgrade to a new nightly (yes I'm lazy) There should be a way to fix this in userchrome.css.

tabbrowser.xml

Code: Select all

<xul:tab validate="never"
onerror="this.parentNode.parentNode.parentNode.parentNode.addToMissedIconCache(this.getAttribute('image'));
  this.removeAttribute('image');"
  maxwidth="250" width="0" minwidth="30" flex="100"
  class="tabbrowser-tab" label="&untitledTab;" crop="end"/>

[WeSaySo]

Has anyone done this?

no one seemed to be able to figure it out in this old thread (page 2 and 3)

Code: Select all

tab { min-width: 9em !important; }

works on Mozilla, but I don't know if it works on Phoenix. It keeps a tab from ever shrinking to smaller than ~ 9 letters (including icon).

[velcrospud]

Hmmm, thats interesting

Code: Select all

tab {min-width:100px !important;}

works
but

Code: Select all

tab {max-width:100px !important;}

doesn't work

[dacovale]

There's no need to figure it out, there's an option in TBE to set the width. It's either "fit to Window", "fit to Title" or "fix".

[OkkE]

There's no need to figure it out, there's an option in TBE to set the width. It's either "fit to Window", "fit to Title" or "fix".

But that's just 3 options. And, as far as I know, the option minimum width isn't there in TBE. so therefor it's nice to know you can define a min-width of tabs.

[WeSaySo]

Hmmm, thats interesting

Code: Select all

tab {min-width:100px !important;}

works
but

Code: Select all

tab {max-width:100px !important;}

doesn't work

That makes sense. Min-width says "never be smaller than this". Max-width says "never grow bigger than this" (eg on page with long title). But if the browser already has a built in max-width that is smaller than your max-width, you'll never see your max-width settings.

[velcrospud]

That makes sense. Min-width says "never be smaller than this". Max-width says "never grow bigger than this" (eg on page with long title). But if the browser already has a built in max-width that is smaller than your max-width, you'll never see your max-width settings.

Nah. The default is 250px, I'm trying to set a shorter max-width.

I did some research. I think that the reason that this doesn't work is that the tab is defined in a binding in tabbrower.xml, and for some reason that makes the max-width setting inaccessible. But then again, that doesn't explain why min-width is accessible. Both are defined in the binding that I quoted above. Maybe it's a bug.

[Refried]

In profiles\*\chrome\userChrome.css

Code: Select all

.tabbrowser-tabs *|tab {
    min-width: 100px !important;
    max-width: 210px !important;
}

Alternatively if you want it to look like the old tabs (like what CTRestorer does) which also works in pale moon:

Code: Select all

.tabbrowser-tabs *|tab {
    min-width: 100px !important;
    max-width: 210px !important;
    height: 27px !important;
    border-radius: 3px 3px 0px 0px !important;
}

Sorry for the late reply, been in prison.

[James]

Holy Old Thread Batman!

Late reply indeed as this thread was from way back in April 2003.