FANDOM


Infoboxes portáteis podem ser facilmente personalizadas por administradores usando o CSS da comunidade.

Sem customizações, a infobox portátil usa as configurações padrões do Designer de Temas, particularmente a cor do plano de fundo e a cor do link.

Temas de infobox

O tema padrão pode ser sobreposto usando o CSS da comunidade, e usando os atributos theme ou theme-source na tag infobox vai possibilitar você de usar classes no tema da infobox.

  • O atributo tema é usado para especificar uma classe CSS personalizada para a infobox.
  • O atributo theme-source permite que você varie a classe CSS via parâmetro da predefinição.

Usando "theme"

Por exemplo, theme="delta" vai adicionar uma classe chamada pi-theme-delta para a infobox, o qual pode ser customizado com CSS:

Código da predefinição
<infobox theme="delta">
  ...
</infobox>
CSS para ser usado
.portable-infobox.pi-theme-delta {
   ...
}

Como exemplo, o código a seguir então pode usado para mudar a cor de fundo secundário para vermelho:

.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #CF3D0C;
}
 

Usando "theme-source"

Por exemplo, theme-source="location" quer dizer que, quando location é especificado na infobox de um artigo, ele usará o valor do mesmo como classe.

Por exemplo:

Código da predefinição
<infobox theme-source="location">
   ...
</infobox>
Código no artigo
{{Example infobox
 |location = africa
}}
CSS para ser usado
.portable-infobox.pi-theme-africa {
   //...
}

Se você deseja direcionar elementos específicos, você faria em seguida, algo como isso:

.portable-infobox.pi-theme-africa .pi-secondary-background {
   //...
}

Notas avançadas

  • Se ambos theme e theme-source são usados, o atributo theme é tratado como o padrão (quando theme-source não é definido).
  • Espaços nos parâmetros theme e theme-source são convertidos para hífens (-).
  • Se nenhum tema é especificado, .pi-theme-wikia será usado em seu lugar.

Classes de ajuda

As infoboxes portáteis contêm uma grande variedade de classes específicas para ajudar você a facilmente estilizar sua infobox:

.pi-background
fundo da infobox
.pi-secondary-background
fundos do cabeçalho e da navegação
.pi-font
estilo de fonte
.pi-secondary-font
estilo de fonte de cabeçalho, legenda e navegação
.pi-item-spacing
padding em torno da infobox
.pi-border-color
cor da borda

Nota: Essa não é uma lista com todas as classes existentes - mais são listadas em Ajuda:Infoboxes/Tags.

Exemplos de trecho de código

Muda o width da infobox:

.portable-infobox {
   width: 300px;
}

Muda o background da infobox:

.portable-infobox.pi-background {
   background-color: #ff0000;
}

Mudar o header da infobox e o fundo da navigation:

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

Mudar cor do border:

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

Muda o padding da infobox:

.portable-infobox .pi-item-spacing {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}

Muda a font da infobox:

.portable-infobox .pi-font {
   font-size: 16px;
}
 
// Headers, labels e navegação
.portable-infobox .pi-secondary-font {
   font-size: 18px;
}
 
// Título da infobox
.portable-infobox .pi-title {
   font-size: 24px;
}
 

Avançado

Normalmente, se você precisa mudar o estilo de um tema específico, você escreveria algo como:

.portable-infobox.pi-theme-name .pi-secondary-background {
   background-color:#334;
}

Contudo, se uma classe CSS está no mesmo elemento como outro e você precisa escolher ambos, não deixe nenhum espaço entre as duas classes. Por exemplo, .pi-background está no mesmo elemento <aside> com o tema (.pi-theme-name) junto com a classe geral (.portable-infobox), então esse CSS seria:

.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}