Gamepedia Help Wiki

Para conteúdo atualizado sobre o novo tema Fandomdesktop, consulte a Central da Comunidade

LEIA MAIS

Gamepedia Help Wiki
Advertisement

Tabber é uma extensão que permite criar guias dentro de uma página, que podem ser alternadas sem precisar recarregar a página. As guias podem conter quaisquer dados válidos do wiki (links, imagens, modelos, etc.).

Esta extensão normalmente não está ativo, mas pode estar disponível mediante solicitação.

Veja também[]

Css Styling[]

O Styling for Tabber general entra na MediaWiki:Common.css de um wiki da Gamepedia. A seguir estão alguns seletores CSS vazios com comentários indicando qual parte das abas os estilos de seletores.

/* Isso irá estilizar o div que contém todo o objeto tabber. Geralmente isso pode ser deixado sozinho. */
body .tabberlive {
}

/* Isso irá estilizar a área de conteúdo de cada guia. */
body .tabberlive .tabbertab {
}

/* Esta é a caixa que envolve todas as abas. */
body ul.tabbernav {
}

/* Esta é uma caixa que envolve cada uma das guias. */
body ul.tabbernav li {
}

/* Este é o estilo para as abas, partes deste podem ser substituídas para a aba atual com o próximo seletor */
body ul.tabbernav li a,
body ul.tabbernav li a:link,
body ul.tabbernav li a:visited,
body ul.tabbernav li a:hover {
}

/* Este é o estilo da guia atualmente selecionada */
body ul.tabbernav li.tabberactive a,
body ul.tabbernav li.tabberactive a:link,
body ul.tabbernav li.tabberactive a:visited,
body ul.tabbernav li.tabberactive a:hover {
}

Estilizando determinadas tabers de maneira diferente[]

Se você deseja ter abas em determinados lugares que pareçam diferentes de outras abas no wiki, você pode agrupar a barra de ferramentas em um contêiner com uma determinada classe e, em seguida, adicionar CSS adicional a estilos que aparecem dentro de contêineres com essa classe. O exemplo a seguir faria tabbers dentro de contêineres com class="round-tabber" tem cantos arredondados nas abas (não é realmente uma diferença de estilo prático, mas mostra a ideia).

Exemplo de código wiki
<div class="round-tabber">
{{#tabber:
...
}}
</div>
Exemplo de CSS
.round-tabber ul.tabbernav li a,
.round-tabber ul.tabbernav li a:link,
.round-tabber ul.tabbernav li a:visited,
.round-tabber ul.tabbernav li a:hover {
    border-radius: .5em .5em 0 0;
}

Revisão completa do estilo[]


Este artigo é um esboço. Você pode ajudar Gamepedia Help Wiki por espadir isso.

O estilo padrão do Tabber é branco com guias quadradas. Alguns wikis, em particular as wikis de temas escuros, precisam fazer mudanças bastante importantes nessa aparência padrão. Os seletores a seguir fornecem um exemplo de uma tabulação de tema escuro com guias centralizadas que possuem bordas arredondadas na parte superior.

/* Estilo de Tabby */
.tabberlive .tabbertab,
.tabber .tabbertab {
    /* border-color: #505050; */ /* Se você mantiver todas as fronteiras iguais */
    /* border-style: solid; */ /* Se você mantiver todas as fronteiras iguais */
    /* border-width: 1px; */ /* Se você mantiver todas as fronteiras iguais */
    -moz-border-bottom-colors: transparent; /* não precisa ser transparente, pode ser a mesma cor de borda usada em outro lugar */
    -moz-border-left-colors: transparent; /* não precisa ser transparente, pode ser a mesma cor de borda usada em outro lugar */
    -moz-border-right-colors: transparent; /* não precisa ser transparente, pode ser a mesma cor de borda usada em outro lugar */
    -moz-border-top-colors: #505050; /* Isso deve corresponder à sua escolha geral de cor da borda */
    border-bottom-color: transparent; /* não precisa ser transparente, pode ser a mesma cor de borda usada em outro lugar */
    border-left-color: transparent; /* não precisa ser transparente, pode ser a mesma cor de borda usada em outro lugar */
    border-right-color: transparent; /* não precisa ser transparente, pode ser a mesma cor de borda usada em outro lugar */
    border-top-color: #505050; /* Isso deve corresponder à sua escolha geral de cor da borda */
    border-image: none;
    border-style: solid none none;
    border-width: 1px medium medium;
}

ul.tabbernav {
    border-bottom: none;
}

ul.tabbernav li a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #000000; /* Isso deve corresponder à sua escolha geral de cor de fundo */
    border: 1px solid #505050; /* Isso deve corresponder à sua escolha geral de cor da borda */
    border-image: none;
    border-radius: 5px 5px 0 0; /* Isso é somente se você quiser que suas guias tenham cantos arredondados */
    margin-left: 3px;
    padding: 3px 0.5em;
    text-decoration: none;
}

ul.tabbernav li {
    display: inline;
    list-style: none outside none;
    margin: 0 0 0 7px;
}

ul.tabbernav li a:link {
    color: #7AB1CC; /* Isso deve corresponder à sua cor de âncora, mas simplesmente ser diferente dos trabalhos de cor de texto padrão */
}

ul.tabbernav li a:hover {
    background: none repeat scroll 0 0 #000000;
    border-color: #505050; /* Isso deve corresponder à sua escolha geral de cor da borda */
    color: #FFFFFF;
}

ul.tabbernav li.tabberactive a {
    background-color: #000000;
    color: #FFFFFF;
}

ul.tabbernav li.tabberactive a,
ul.tabbernav li.tabberactive a:hover,
ul.tabbernav li.tabberactive a:link {
    background-color: #000000;
    border-bottom: 1px none;
    padding: 2px 0.5em 4px;
}

ul.tabbernav {
    text-align:center; /* se você quiser que as guias sejam centralizadas em vez de justificadas à esquerda em relação ao conteúdo da guia */
}
Advertisement