Infoboxes Portáteis/Dicas e truques

Esta página inclui dicas, truques, trechos, CSS e hacks para as Infoboxes Portáteis. Confira as páginas de ajuda Infoboxes Portáteis/CSS e PortableInfoboxes/Tags para entender quais elementos podem ser usados e personalizados.

Como converter infoboxes[]

Funções Parser[]

Funções Parser, assim como Lua, podem ser usadas dentro do <default> ou etiquetas de <formatação>, assim como todas as etiquetas que aceitam wikitexto. Entretanto, elas não pode ser usadas fora dessas etiquetas, porque elas não permitirão que a infobox apareça.

Navegação opcional[]

Embora etiquetas de <navigation> não tem sub-etiquetas <default> ou <format>, você pode usar parâmetros variáveis para que eles sejam mostrados somente quando o parâmetro é especificado ou quando ele tem um valor específico. O primeiro exemplo abaixo mostra o uso da função parser #ifeq para checar se o parâmetro "showgallery" está configurado para "sim". Se sim, isso mostrará um link; se não, nada é mostrado, e nenhuma linha de navegação será criada. O segundo exemplo somente verifica que "showgallery" não está vazia.

<navigation>
{{#ifeq: {{{showgallery}}} | yes | [[Main Page|Gallery]] |}}
</navigation>

<navigation>
{{#if: {{{showgallery|}}} | [[Main Page|Gallery]] |}}
</navigation>

Redução[]

<infobox>
<group collapse="closed"> <header>Reduzir é fácil</header>
<data> <default> Coisas reduzidas</default></data>
</group>
</infobox>

Comentários[]

Infoboxes Portáteis usam xml então as regras normais para comentários não se aplicam a elas. Um truque para esconder porções ou adicionar comentários é usar algo como:

<infobox> 
<group >
<header>Tony stark </header>
<data><default>War machine</default></data>
<data><default>Iron Man</default></data>
 <!--comment>
Esta parte fica escondida
<header>Hope</header>
<data><default>Dark Goddess </default></data>
<data><default>Lady death</default></data>
</comment-->
</group>
</infobox>

Formatação[]

Há alguns código que os administradores podem inserir no css de suas wikis. Para mais informações, veja Ajuda:Infoboxes/CSS.

Formatação de texto[]

Uma necessidade comum é centralizar o texto ou formatá-lo verticalmente, e isso pode ser feito via CSS.

.portable-infobox .pi-data {
  height: 10em;  /*configura a altura*/
  display: flex; 
  align-items: center; /*alinha itens ou texto verticalmente*/
  justify-content: center ; /*alinha itens ou texto horizontalmente*/
}

Evitando quebra de palavra[]

Às vezes não se deseja que o texto seja quebrado. Uma maneira de prevenir que isso aconteça é usando CSS:

.portable-infobox .pi-data-label { 
   flex-basis: 120px;
}

Isso configura a largura mínima para que a etiqueta não quebre a não ser que seja necessário.

Formatação de Imagem[]

Redimensionamento automático[]

Uma abordagem que adaptará a todas as imagens é:

.pi-theme-name .pi-image-thumbnail {
    width: 100%;
    height:auto;
}

Em infoboxes redimensionadas[]

Se você usa uma largura que não é a padrão para a sua infobox (via .pi-theme-name { width: 123px; }), você precisará redimensionar as imagens no CSS também. Isso é feito através da classe .pi-image-thumbnail class, como:

.pi-theme-name .pi-image-thumbnail {
    max-width: 123px; // Tipicamente, use a mesma largura da sua infobox, menos as bordas
    height: auto; // Preserva a proporção da imagem
}

Entretanto, isso pode fazer com que as imagens se tornem maior do que desejado. Se você não precisa preencher a largura inteira da infobox, você também pode limitar a altura da mesma maneira para garantir que a proporção seja mantida:

.pi-theme-name .pi-image-thumbnail {
    max-width: 123px;
    max-height: 123px;
    width: auto;
    height: auto;
}

Formatação do título[]

Personalizar o título é como personalizar qualquer outro tipo de texto, basta usar a classe apropriada. Por exemplo:

.pi-theme-name .pi-title {
    font-family:formalscrp421 bt;
    font-weight:bold;
    color:blue;
}

fará com que todos os título de todas as infoboxes na wiki fiquem desse jeito.

Grupos[]

Grupos são particularmente versáteis

Groups are particularly versatile in portable infoboxes. They can be collapsed, or change the layout of the information. If an infobox contains a lot of information, it may be better to add them to groups and collapse them:

<infobox> 
<group layout="horizontal">
<data source="maçãs"/>
<data source="pêras"/>
<data source="mangas"/>
</group>
<group layout="horizontal">
<data source="abacates"/>
<data source="uvas"/>
<data source="tomates"/>
</group>
<group collapse="closed">
<header>Comida</header>
<data source="batatas"/>
<data source="maracujá"/>
<data source="abacaxi"/>
</group>

Parâmetros múltiplos[]

Para o mesmo campo[]

<infobox>
<data source="mulheres">
    <default>{{{senhoras|Janedoe}}}</default>
</data>
</infobox>

CSS[]

Personalizando uma linha inteira[]

Embora você possa aplicar uma personalização a alguns elementos, não será suficiente para afetar uma linha completa de <format>, se existir) dentro de um <div> dentro de um <div> . Portanto, para que a formatação seja aplicada a tudo, você precisa visar o "div" mais genérico com a sua cor de pano-de-fundo. Para isso, você precisa determinar quais divs da infobox você precisa formatar.

Começando de cima para baixo, olhe o código da sua infobox e conte todas as etiquetas <data> até que você chegue na etiqueta que você quer personalizar. Não conte <title>, <image>, ou <navigation>, já que essas etiquetas não estão dentro de elementos div. Para este exemplo, suponha que você tenha um título, uma imagem, e três etiquetas "data" nessa ordem: Idade, Sexo e Cidade.

Importante: Se a sua infobox inclui etiquetas de informação que não incluem um valor padrão (default), elas não serão mostradas se estiverem vazias, e portanto, a numeração das suas fileiras será diferente. Veja algumas soluções abaixo.

Quando você souber o número de div relativo ao topo da infobox, você pode usar o código seguinte, substituindo 1 em div:nth-of-type(1) com o valor apropriado (no nosso exemplo, 1 para idade, 2 para sexo ou 3 para cidade).

.pi-theme-name div:nth-of-type(1) {
    background-color: #000000;
}

O código acima selecionará toda a primeira fileira (idade), inclusive o cabeçalho. Para que as mudanças só se apliquem ao div que contém o valor, use:

.pi-theme-name div:nth-of-type(1) div:first-of-type {
    background-color: #000000;
}

O div:first-of-type extra no final seleciona o container entre a fileira e o conteúdo, então o título não é afetado. Note que first-of-type (ou nth-of-type(1)) é sempre usado nesta seleção, sem que faça diferença qual fileira você pretende alterar.

E claro, esse truque pode ser usado para adicionar quaisquer outras propriedades para elementos difíceis de ser personalizados inline, como listas. Você pode usar seletores de CSS para afetar somente alguns itens da lista (só o primeiro; primeiro, terceiro, quinto, etc) (li:nth-child(2n+2)), com somente uma declaração.

Como lidar com campos opcionais[]

Se a sua infobox contém campos opcionais sem um valor padrão (default), verificar a posição de uma fileira/div pode se tornar impossível e fazer com que essa truque personalize fileiras que não devem ser mudadas. Dependendo da ordem do conteúdo, entretanto, você pode solucionar de alguns jeitos:

Coloque sua fileira perto do ou no final da sua infobox. Se você não sabe quantas fileiras existem antes, mas sabe quantas vem depois, você pode contar de baixo para cima. Para fazer isso, use div:nth-last-of-type(1) ao invés de div:nth-of-type(1). No nosso exemplo, isso selecionaria cidade primeiro.
Dependendo do seu conteúdo, você deve considerar usar tags de <navigation> para entradas que são difíceis de diferenciar. Já que elas usam elementos de HTML <nav> ao invés de divs, você pode contar separadamente e potencialmente identificar a posição ao invés do conteúdo opcional, a não ser que você use várias navs que talvez não sejam mostradas. Simplesmente selecione-as usando nav:nth-of-type(1) or nav:nth-last-of-type(1) quando for apropriado.

Predefinição inicial para personalizar uma infobox portátil[]

Esta é uma configuração simples de seletores de CSS que podem ser usados para personalizar uma infobox portátil.

Coloque o código seguinte no arquivo MediaWiki:Wikia.css e estilos onde desejado:

/* Você invoca um novo estilo adicionando theme="seutema" na etiqueta <infobox> */

.pi-theme-yourtheme.pi-background { }   /* pano-de-fundo geral */

.pi-theme-yourtheme .pi-image { } /* alinhamento da caixa da imagem */

.pi-theme-yourtheme .pi-image-thumbnail { /* para ajudar a imagem */
/*    max-width:          123px; Tamanho da imagem, tipicamente  a mesma largura das infoboxes, menos as bordas*/
/*    max-height:         123px; (se necessário) */
/*    width:              auto;  (se necessário) */
/*    height:             auto;  Preserva a proporção da imagem*/
}

.pi-theme-yourtheme { }  /* borda geral, cor, fonte, etc*/

.pi-theme-yourtheme .pi-item-spacing { } /* espaço entre cada elemento*/

.pi-theme-yourtheme .pi-title { } /* espaçamento do título, margem, fonte... */

.pi-theme-yourtheme .pi-caption { } /* fonte da legenda, color, etc */

.pi-theme-yourtheme .pi-group { } /* borda dos grupos*/

.pi-theme-yourtheme .pi-border-color { } /* cor das bordas dos grupos e das informações */

.pi-theme-yourtheme .pi-header { } /* alinhamento do cabeçalho, bordas, etc */

.pi-theme-yourtheme .pi-secondary-font { } /* cabeçalho, fonte das etiquetas*/

.pi-theme-yourtheme .pi-secondary-background { } /* fundo do cabeçalho */

.pi-theme-yourtheme .pi-data { } /* divisão ao redor das etiquetas e valor*/

.pi-theme-yourtheme .pi-data-label { } /* alinhamento das etiquetas */
{
/*    flex-basis:    50%; */ /* Muda a proporção da largura das colunas da esquerda e da direita*/
}

.pi-theme-yourtheme .pi-data .pi-secondary-font { } /* torna a fonte de informações diferente da do cabeçalho*/

.pi-theme-yourtheme .pi-data-value { } /* campo de valor (coluna da direita) */

.pi-theme-yourtheme .pi-data-value:not(:first-child) { } /* espaço/margem entre as informações nas colunas */
{
/*    padding-left:       0;   */  /* Como você desejar */
/*    margin-left:        4px; */
}
.pi-theme-yourtheme .pi-font { } /* valores da fonte */

.pi-theme-yourtheme .pi-horizontal-group { } /* estilos de tabelas para o grupo horizontal */

.pi-theme-yourtheme .pi-horizontal-group-item { } /* espaço/margem nas células */

.pi-theme-yourtheme .pi-horizontal-group .pi-data-label { } /* etiqueta em um grupo horizontal*/

.pi-theme-yourtheme .pi-horizontal-group-item { } /* células de tabela em um grupo horizontal*/

.pi-theme-yourtheme .pi-navigation { } /* etiqueta de navegação */

.pi-theme-yourtheme .pi-item /* quase tudo é afetado por esse item, tenha cuidado */ { }