Need help with Tab style

TRTTRT
edited January 2008 in Stylish
I have included the code from 'Tabs made in buttons' plus a few additional edits to the Firefox default theme I am using.

Examples of their appearance is here:

http://img406.imageshack.us/my.php?image=tabmarginshx8.png

The code I am using is shown below. I would like to be able to control the color of the margins when I hover a tab to match the background color of the tab being hovered or, alternatively, eliminate the margins completely and have just a black border around the tabs.

Also, is it possible to eliminate the background color of the tab BAR so it matches the background of whatever page is
being viewed? This would give the tabs the appearance of floating, as shown in the mock-up of the bottom example I
have shown.
_________________________________________________________________________________________________

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* disable tab bar background */
.tabbrowser-tabs {
background-image: none !important;
background-color: transparent !important}

/* Tab Bar background color */
#content {background-color: #d6d9dc !important}

/* Hide tab throbbers */
tab[busy] .tab-icon {visibility: hidden !important}

/* Background colors for tabs - Orange = #FF9933 */
tab[selected="true"] > hbox{
background-color: #8facc9 !important;
font-weight:bold !important}

tab[selected="false"] > hbox{background-color: #d6d9dc !important}

/* disable tabs background */
.tab-image-right, .tab-image-left, .tab-image-middle {background: none !important}
.tab-image-right, .tab-image-left, .tab-image-middle {-moz-appearance: none !important}

/* transform tabs to buttons and fix spaces */
tab {-moz-appearance: button !important}

/* disable the bottom border */
.tabs-bottom {display: none !important}

Comments

  • I don't think you can do that with CSS. The tabs aren't in the same document as the web page, so they don't really know about each other.
  • I've asked the author of PageStyle2Tab about this.
  • Thank's for everyone's input. I waited for a few days hoping for a solution, but I don't think it's going to happen.

    I did some more research and found a reference page for all the '-moz-appearance' options, but none offered a better
    solution than the button style I am using. So, short of modifying the default button design in the (I assume) default
    Firefox theme or someone writing an extension to do this, I'm willing to accept things the way they are.

    As for dynamically changing the background of the tab BAR to match the background of the web page associated with that tab, after checking out the PageStyle2Tab extension, this may be doable by someone with the coding skills. This would be a good addition to the PageStyle2Tab extension or a separate extension when using button style tabs.
  • Agreed, TRT.

    The BG color/image have to be pulled from DOM after page load. Then, they're applied to whatever else. That's a JavaScript job.

    PageStyle2Tab has all but one function, the one that effects <tabs class="tabbrowser-tabs"> instead of <tab class="tabbrowser-tab">
  • Posted By: whatrevolutionI've asked the author ofPageStyle2Tababout this.
    Clearly, he is indisposed or uninterested.

    His code, modified, is the way to accomplish this:
    Posted By: TRT
    [...] eliminate the background color of the tab BAR so it matches the background of whatever page is
    being viewed? [...]
  • Thanks for your efforts whatrevolution.

    I downloaded the PageStyle2Tab extension and unzipped it to look at the code. I'm not a programmer, so I don't know
    how much effort it would be to edit references to tabs and apply them to the tab BAR. There appeared to be quite a bit
    of code involved.

    Maybe someone else reading this forum will undertake this as a challenge.
  • Well, being a designer, I can tell you the process, mostly.

    PageStyle2Tab is hooked into an event that apparently fires onLoad. The DOM background attributes of <body> are applied as CSS DOM attributes of <tab class="tabbrowser-tab" linkedpanel="panel12013782744061">.

    So, the code changes include a new event to toggle tabs.tabbrowser background when active tab changes, some value determined conditional switches that say, "in this mode, style the tabbrowser, in this other mode, style the tabs as normal". Etc.
Sign In or Register to comment.