Fandom Developers Wiki
Advertisement

Esta página, o partes de ella, siguen sin traducir. Por favor traduzcala al lenguaje apropriado (español).

La pestaña (Tabber) es una forma de mostrar diferentes textos o imágenes haciendo clic en un botón en la parte superior de la pestaña. Puede personalizar los botones, bordes, etc. con los códigos de esta página.

Para usar un tabber, use el siguiente código.

<tabber>
Título1 = 
Texto1
|-|
Título2 = 
Texto2
|-|
Título3 = 
Texto3
</tabber>

The code snippets on this page allow a wiki to customize the appearance of their tabs. It can be added to any CSS page used on a wiki (typically MediaWiki:Common.css), or even to personal CSS if desired.

Note: Placing infoboxes that have tabs inside tabbers is not compatible with the code given on this page, and may give weird look to the infobox tabs. It is possible to adjust the code to use more precise selectors in order to avoid this effect, but the code will be significantly longer.

Full custom themes[]

Tema 1 - Diseño Semi-Tabview[]

Código
.tabber .wds-tabs__wrapper .wds-tabs {
    padding: 3px 0 0;
}

.tabber .wds-tabs > .wds-tabs__tab {
    box-shadow: none;
}

.tabber .wds-tabs > .wds-tabs__tab:not(:last-child) {
    margin-right: 2px;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
    line-height: 1.2;
}

.tabber .wds-tabs__tab a {
    background: #014604;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 2px solid black;
    color: white !important;
    font-size: 16px;
    font-weight: normal;
    padding: 3px 0.5em;
}

.tabber .wds-tabs__tab.wds-is-current a {
    cursor: default;
    font-weight: bold;
}

.tabber .wds-tab__content {
    border: 2px solid grey;
}

Tabber Customized

Tema 2 - Estilo Tabber de MacOS[]

Código
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    background-color: transparent;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 -10px 0;
    padding: 3px 0;
    text-align: center;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
}

.tabber .wds-tabs__tab a {
    background-color: #ffffff;
    border: none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    color: #444444 !important;
    cursor: default;
    font-family: Helvetica, Sans-serif;
    font-size: 13px;
    font-weight: 300;
    margin: 0;
    padding:2px 12px;
}

.tabber .wds-tabs__tab:first-child a {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.tabber .wds-tabs__tab:last-child a {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

.tabber .wds-tabs__tab a:active {
    background-color: #f0f0f0 !important;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background-color: linear-gradient(#6FB3F4, #2687F7);
    color: white !important;
}

.tabber .wds-tabs__tab.wds-is-current a:active {
    background-color: linear-gradient(#5198F6, #1D6EDD);
}

.tabber .wds-tab__content {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    padding: 10px 10px 5px 10px;
}

Theme 2 - OS X Yosemite Tabber Style result

Tema 3 - Estilo "minimizado"[]

Código
.tabber .wds-tabs__wrapper {
    border-bottom: 0;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    border-bottom: 3px solid #2aa198;
    font-size: 13px;
    padding: 0.3em 0 0;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
}

.tabber .wds-tabs__tab a {
    color: #3a3a3a !important;
    font-weight: normal;
    font-size: 13px;
    padding: 0.3em 0.5em;
}

.tabber .wds-tabs__tab.wds-is-current {
    box-shadow: none;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background-color: #2aa198;
    color: white !important;
}

.tabber .wds-tabs__tab:not(.wds-is-current) a:hover {
    background-color: rgba(42,161,152, 0.2);
}

Theme 3 Minified style result

Tema 4 - Caja flexible[]

Código
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 4px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    justify-content: space-between;
}

.tabber .wds-tabs .wds-tabs__tab {
    box-shadow: none;
    flex-shrink: 1;
    text-align: center;
    transition-duration: 0.15s;
    width: 100%;
}

.tabber .wds-tabs__tab a {
    color: #999 !important;
    cursor: default;
    font-size: 15px;
    font-weight: normal;
    padding: 10px 0;
    transition-duration: 0.15s;
}

.tabber .wds-tabs__tab.wds-is-current, .tabber .wds-tabs__tab:hover {
    background-color: #eee;
}

.tabber .wds-tabs__tab.wds-is-current a, .tabber .wds-tabs__tab:hover a {
    color: black !important;
}

Theme 4 style result.png

Tema 5 - Vertical[]

Código
.tabber {
    display: table;
    margin-top: 0.5em;
    width: 100%;
}

.tabber .wds-tabs__wrapper {
    border: none;
    display: table-cell;
    width: 200px;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    align-items: flex-start;
    flex-direction: column;
}

.tabber .wds-tabs .wds-tabs__tab {
    box-shadow: none;
    font-size: 14px;
    padding-top: 1em;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
}

.tabber .wds-tabs a {
    color: black !important;
    display: block;
    padding: 10px;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background-color: #2aa198;
    border-radius: 3px;
    color: white !important;
}

.tabber .wds-tab__content.wds-is-current {
    display: table-cell;
    padding: 0em 1em;
}

Theme 5 style

Tema 6 - Oasis[]

Código
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    border-bottom: 1px solid #ccc;
    display: block;
    font: bold 12px Verdana, sans-serif;
    padding: 3px 0;
}

.tabber .wds-tabs .wds-tabs__tab {
    box-shadow: none;
    display: inline-block;
    font: inherit;
    list-style: none;
    padding-top: 1em;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    display: inline-block;
    font: inherit;
    height: auto;
    margin: 0;
}

.tabber .wds-tabs__tab a {
    background-color: #f2f7ff;
    border: 1px solid #ccc;
    border-bottom: none;
    display: inline;
    font: inherit;
    margin-left: 3px;
    padding: 3px 0.5em;
    text-decoration: none;
    white-space: pre;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background-color: #fff;
}

.tabber .wds-tabs__tab a:link, .tabber .wds-tabs__tab a:visited {
    color: #448;
}

.tabber .wds-tabs__tab a:hover {
    background-color: #fff9f2;
    border-color: #ccc;
    color: #000;
    text-decoration: underline;
}

.tabber .wds-tabs__tab.wds-is-current a:hover {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}

.tabber .wds-tab__content {
    border: 1px solid #ccc;
    border-top: 0;
    padding: 5px;
}

Customizing individual aspects[]

Multiline Tabber - extra labels go to a new row instead of the horizontal scroll[]

Código
.tabber .wds-tabs {
    flex-wrap: wrap;
}

Removing the underline below the active tab label[]

Código
.tabber .wds-tabs .wds-tabs__tab {
    box-shadow: none;
}

Reduced label size and spacing, similar to the old design[]

Código
.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0 1.5px;
}

.tabber .wds-tabs .wds-tabs__tab a {
    font-size: 12px;
    padding: 3px 0.5em;
}

Known issues[]

If you find problems please report them on the associated talk page.

Advertisement