TabberDesign/es

This page, or parts of it, are still untranslated. Please translate it to the appropriate language (español).

TabberDesign
Information
Type	CSS
Description	Cambia el diseño de Tabber
Author(s)	2Actimv KurwaAntics HumansCanWinElves
Scope	Personal Site-wide
Updated	August 12, 2021

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;
}

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;
}

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);
}

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;
}

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;
}

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.