Fandom

Community Central

Tabber extension css modification

Forum page

18,998pages on
this wiki
Add New Page
Share

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

This Forum has been archived

Visit the new Forums
Forums: Index Support Requests Tabber extension css modification
Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 1536 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.


I recently found dynamic tabs on the wiki and they look verry usefull.

Section one content.

Section two content.

<tabber>
|-|
 Section One=
Section one content.
|-|
 Section Two=
Section two content.
</tabber>

I currently try to change the css to make it fit in mine wiki but there seems to be an problem. The css color tabs don't seem to work. I almost tryed everything. It almost seems I can't change it however it can be removed by removing it in your browser. I tryed the folowing options:

ul.tabbernav li a
{
 background: #FF0000;
}
.tabber lu li a {
    background: #FF0000;
}
a.tabber {
    background: #FF0000;
}
.tabberlive lu li a {
    background-color: rgb(255, 0, 0);
}
a.tabberlive {
    background-color: rgb(255, 0, 0);
}
ul.tabbernav {
    background-color: rgb(255, 0, 0);
}
ul.tabbernav li a 
    background-color: rgb(255, 0, 0);
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}

This is what I currently known:

  • The class of the tabber function is "tabberlive"
  • The css is buildup like this: Lu - li - a

More info about this extension:

My current tests and results

  • class tabbertab: Background of ul tabbernav change
  • class tabber (lu) (li) (a): doesn't exist
  • class tabberlive (lu) (li) (a): Background of ul tabbernav change
  • straight html:
ul.tabbernav li a
{
 background: #FF0000;
}


If you find an fix please tell me.


Selectors:
Tab (Active): .tabberlive > ul.tabbernav > li.tabberactive > a:link
Tab (Inactive): .tabberlive > ul.tabbernav > li > a:link
Tab Panel: .tabberlive > .tabbertab
(I have no idea why the :link pseudoclass is used, seems pointless to me, probably JS-disabled fallback of some type)
Example:

/* The color choice is arbitrary and careless, I don't recommend using as is. */
.tabberlive > ul.tabbernav > li.tabberactive > a:link {
    background-color:#068;
    border-bottom: none;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.66);
}
.tabberlive > ul.tabbernav > li > a:link {
    background-color:#420;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.66);
    color:white;
    border-radius: 5px 5px 0 0;
}
.tabberlive > ul.tabbernav > li > a:hover {
    color: red;
    border-color: red;
}
.tabberlive > .tabbertab {
    background-color: #068;
    color: white;
    border-bottom-left-radius: 10px 5px;
    border-bottom-right-radius: 10px 5px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.66);
    position: relative; /* Tab shadow goes under */
}
.tabberlive > ul.tabbernav {
    border-bottom: 0;
}
.tabberlive > .tabbertab a {
    color: rgb(200,200,200);
    font-weight: bold;
    text-shadow: 2px 2px 1px black;
}
.tabberlive > .tabbertab a:hover {
    color: rgb(200,200,200);
    font-weight: bold;
    text-decoration: underline;
}
Tabber Extension CSS Reskinned Example

Lunarity 10:45, September 12, 2012 (UTC)

Nice and thx, this really helps an lot--Jens Ingels (talk) 19:46, September 12, 2012 (UTC)

Also on Fandom

Random Wiki