Wiki della Community
Advertisement
Wiki della Community

Gli infobox ("portable infoboxes", infobox compatibili) possono essere personalizzati dagli amministratori locali usando il CSS della community.

Senza personalizzazione, il tema degli infobox si rifà alle impostazioni del Theme Designer, in particolare il colore di sfondo delle pagine e il colore dei link.

Temi degli infobox[]

Il tema di default degli infobox può essere sostituito usando il CSS; gli attributi theme o theme-source del tag infobox permettono di selezionare infobox specifici usando le classi:

  • L'attributo theme si usa per specificare una classe CSS personalizzata per il template infobox.
  • L'attributo theme-source ti permette di variare la classe CSS tramite un parametro del template.

Uso di "theme"[]

Se si usa, per esempio, theme="delta" viene aggiunta una classe chiamata pi-theme-delta all'HTML dell'infobox, che potrà poi essere personalizzata usando il CSS:

Codice del template
<infobox theme="delta">
  ...
</infobox>
CSS da usare
.portable-infobox.pi-theme-delta {
   ...
}

Poi, per esempio, per cambiare in rosso il colore secondario dello sfondo si può usare il seguente codice:

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

Uso di "theme-source"[]

Se si usa, per esempio, theme-source="luogo" significa che quando viene specificato luogo nell'infobox di una pagina, il suo valore sarà utilizzato come classe.

Per esempio:

Codice del template
<infobox theme-source="luogo">
   ...
</infobox>
Codice nella pagina
{{Esempio di infobox
 |luogo = africa
}}
CSS da usare
.portable-infobox.pi-theme-africa {
   ...
}

Se si vogliono specificare solo alcuni elementi di quell'infobox, allora si può fare qualcosa come:

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

Note sull'uso dei temi[]

  • Se vengono usati sia theme sia theme-source, l'attributo theme viene considerato quello di default (quando theme-source non è definito).
  • Gli spazi nei valori di theme e theme-source sono convertiti in trattini (-), e ciò significa che può essere aggiunta solo una singola classe.
  • Se non è specificato alcun tema, viene usato .pi-theme-wikia.

Classi helper[]

Gli infobox contengono una serie di classi helper specifiche per design che possono aiutarti ad aggiornare facilmente lo stile generale:

.pi-background
sfondo generale dell'infobox
.pi-secondary-background
sfondo del titolo e del menù di navigazione
.pi-font
stile del font dei dati
.pi-secondary-font
stile dei font del titolo, dell'etichetta e del menù di navigazione
.pi-item-spacing
padding intorno a ciascun elemento dell'infobox
.pi-border-color
colore dei bordi dell'elemento dell'infobox

Nota: questa non è la lista completa delle classi disponibili; ne trovi altre elencate in Aiuto:Infobox/Tag.

Frammenti di codice utili[]

Cambiare la larghezza dell'infobox:

.portable-infobox {
   width: 300px;
}

Cambiare il colore di sfondo dell'infobox:

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

Cambiare il colore di sfondo dei titoli e del menù di navigazione dell'infobox:

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

Cambiare il colore dei bordi degli elementi dell'infobox:

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

Cambiare il padding degli elementi dell'infobox:

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

Cambiare le dimensioni del font dei dati dell'infobox:

.portable-infobox .pi-font {
   font-size: 16px;
}

Cambiare le dimensioni del font dei titoli, delle etichette e del menù di naviazione dell'infobox:

.portable-infobox .pi-secondary-font {
   font-size: 18px;
}

Cambiare le dimensioni del font del titolo dell'infobox:

.portable-infobox .pi-title {
   font-size: 24px;
}

Cambiare la larghezza della colonna delle etichette:

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

Selezionare il tema personalizzato "oblivion", poi aggiustare le dimensioni del font delle didascalie:

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}
 

Nozioni per esperti[]

Normalmente se si vuole cambiare lo stile di un tema specifico, si utilizza qualcosa come:

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

Tuttavia, quando una classe CSS si trova nello stesso elemento di un'altra classe e si devono selezionare entrambe, non lasciare spazio tra le classi. Esempio: .pi-background è nello stesso elemento <aside> della classe theme (.pi-theme-name) e della classe generale dell'infobox (.portable-infobox), perciò il codice CSS per cambiare il tema sarà:

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