Infoboxes portáteis podem ser tematizadas facilmente pelos administradores da wiki ao fazer uso do CSS da comunidade.
Sem customização, o tema das infobox portáteis deriva das configurações do Designer de temas da comunidade, com destaque para a cor de fundo do artigo, a cor de destaque e a cor do link.
Temas de Infobox e tipos[]
O tema padrão da infobox pode ser sobreescrito usando o CSS local da comunidade, e usando os atributos type, theme, ou theme-source na tag infobox para facilitar a específicação de uma predefinição infobox específica usando as classes.
- O atributo type é usado para específicar um tipo lógico (o que uma infobox está descrevendo), mas também pode ser usado como uma classe CSS.
- O atributo theme é usaod para específicar uma classe CSS para a predefinição infobox.
- O atributo theme-source permite que você varie a classe CSS através de um parâmetro na predefinição.
Usando o "type"[]
Por exemplo, type="character" vai adicionar uma classe chamada type-character para o HTML da Infobox, que pode ser customizada usando o CSS:
| Código predefinição | <infobox type="character">
...
</infobox>
|
|---|---|
| CSS a ser usado | .portable-infobox.type-character {
...
}
|
como um exemplo, o código abaixo pode ser usado para mudar a cor de fundo secundaria (a cor de fundo do título e cabeçalho da infobox) de todos as infoboxes de personagens para maroon:
.portable-infobox.type-character .pi-secondary-background {
background-color: maroon;
}
Usando o "theme"[]
Por exemplo, theme="delta" irá adicionar a classe chamada pi-theme-delta para o HTML da infobox, que pode ser modificada usando o CSS:
| Código da predefinição | <infobox theme="delta">
...
</infobox>
|
|---|---|
| CSS a seu usado | .portable-infobox.pi-theme-delta {
...
}
|
Como um exemplo, o código abaixo poderia ser usado para mudar a cor de fundo secundária de todas as infoboxes de temática delta para azul marinho:
.portable-infobox.pi-theme-delta .pi-secondary-background {
background-color: #000080;
}
Se theme= for deixado sem específicação, o seu padrão será theme="wikia" e a classe pi-theme-wikia será adicionada a infobox.
Usando "theme-source"[]
Por exemplo, theme-source="localizacao" significa que, quando localizacao é específicado em uma infobox de artigo, ele irá usar o valor dela para formar um nome de classe.
Por exemplo:
| Código predefinição | <infobox theme-source="localizacao">
...
</infobox>
|
|---|---|
| Código no artigo | {{Example infobox
|localizacao = Africa
}}
|
| CSS a ser usado | .portable-infobox.pi-theme-Africa {
...
}
|
Se você quiser mudar a cor de fundo secundária das infoboxes de todas as localizações dentro da África, você deverá fazer algo como isso:
.portable-infobox.pi-theme-Africa .pi-secondary-background {
//estilos custom
}
Observe que nomes de classes são case-sensitive, ntão tenha cuidado sobre o que você permite os seus usuários usarem como valor para o parâmetro theme-source. Nesse caso mostrado acima, o valor "africa" pode não ativar as mudanças de estilo desejadas.
Observações de temas avançadas[]
- Se ambos theme e theme-source são usados, ambos vão fornecer propriedades CSS
- Espaços em valores do theme e theme-source são convertidos em hyphens (
-), significando que apenas uma classe pode ser adicionada. - Se nenhum tema é específicado, pi-theme-wikia será adicionado.
Classes principais[]
Essas classes ajudarãoo você a atualizar o estilo de tags específicas:
- Título
.pi-title- Cabeçalho
.pi-header- Navegação
.pi-navigation- Grupo
.pi-group- Tag dados
.pi-data- Valor dados
.pi-data-value- Rótulo de dados
.pi-data-label- Imagem
.pi-image- Legenda de Imagem
.pi-caption- Galeria de Imagens
.pi-image-collection- Elemento de guias do painel
wds-tabs__wrapper- Grupo de guias do painel
wds-tabs- Guias do painelPanel Tab
wds-tabs__tab- Conteúdo de guias do painelPanel Tab Content
wds-tab__content
Classes de ajuda[]
Infoboxes portáteis contém uma variedade de classes de ajuda específicas para design para ajudar você a facilmente atualizar o estilo geral:
- Cor de fundo geral da infobox
.pi-background- Cor de fundo do título e cabeçalho
.pi-secondary-background- Estilo da fonte dos valores de dados
.pi-font- Estilos de fonte do Cabeçalho, tabela de dados e navegação
.pi-secondary-font- Borda ao redor de cada elemento da infobox (título, cabeçalhos e cada tabela de dados)
.pi-item-spacing- Cor de borda dos elementos da Infobox (infobox inteira, legenda, grupos, tabela de dados e grupos de tabela de conteúdos)
.pi-border-color
Observe: essa não é uma lista exaustiva de classes disponíveis - mais estão listadas em Ajuda:Infoboxes/Tags.
Fragmentos de código de amostra[]
Mudar a largura da infobox:
.portable-infobox {
width: 300px;
}
Mudar a cor de fundo da infobox:
.portable-infobox.pi-background {
background-color: #ff0000;
}
Mudar o fundo dos cabeçalhos e navegação da infobox:
.portable-infobox .pi-secondary-background {
background-color: #00ff00;
}
Mudar a cor da borda dos elementos da infobox:
.portable-infobox .pi-border-color {
border-color: #00ff00;
}
Mudar o padding dos elementos da infobox:
.portable-infobox .pi-item-spacing {
padding: 10px 20px;
}
Mudar os valores do tamanho da fonte da infobox:
.portable-infobox .pi-font {
font-size: 16px;
}
Mudar os valores de fonte do cabeçalho, tabelas e navegação da infobox:
.portable-infobox .pi-secondary-font {
font-size: 18px;
}
Mudar o tamanho da fonte do título da infobox:
.portable-infobox .pi-title {
font-size: 24px;
}
Mudar a largura da coluna da tabela:
.portable-infobox .pi-data-label {
flex-basis: 165px;
}
Selecionar o tema customizado "oblivion", então mudar o taanho da fonte da legenda:
.portable-infobox.pi-theme-oblivion .pi-caption {
font-size: 16px;
}
Mudar a cor de fundo das tabelas para imagens
.portable-infobox .wds-tabs__tab {
background-color: green;
}
Avançado[]
Normalmente, se precisar mudar o estilo para um tema específico, você escreveria algo assim:
.portable-infobox.pi-theme-name .pi-secondary-background {
background-color:#334;
}
No entanto, quando uma classe CSS está no mesmo elemento que outra e você precisa selecionar para ambas, não deixe espaço entre as classes. Por exemplo, .pi-background está no mesmo <aside> elemento que o tema da classe (.pi-theme-name) e a classe geral da infobox portátil (.portable-infobox), então o CSS que muda o fundo para esse tema seria:
.portable-infobox.pi-theme-name.pi-background {
background-color:#334;
}
Elementos individuais podem ser estilizados independemente usando atributos de dados como seletores. Por exemplo, todos os elementos das infoboxes portáteis que tem uma entrada em source agora serão renderizados em HTML com esse nome de parâmetro em um atributo de dados, como data-source="ATK". Isso permitirá que você escreva seletores CSS ou jQuery como .pi-item[data-source=ATK] para estilizar e identificar itens individuais. Usado em combinação com type, isso deve eliminar a necessidade de seleção de estilo nth-of-type e abre outras possibilidades de design e interatividade.
O nome de atributo de um item permite a seleção de elementos, não importando se eles aceitam a fonte de entrada ou não, incluindo identificação de <title>, <group>, <data>, <header>, <image>, e <navigation>. Parecido com o data-source data-attribute, <data name="bar"> pode ser selecionado como .pi-item[data-item-name=bar].