Wikia

Community Central

Tabber extension css modification

86,650pages on
this wiki

Forum page

This Forum has been archived

Visit the new Forums
Forums: Index Support Requests Tabber extension css modification
Wikia'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 581 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)

Advertisement | Your ad here

Around Wikia's network

Random Wiki