Wiki della Community
Advertisement

Gli infobox portatili possono essere personalizzati abbastanza facilmente dagli amministratori locali usando il CSS della community.

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

Temi e tipi degli infobox[]

Il tema di default degli infobox può essere sostituito usando il CSS delle community; gli attributi type, theme o theme-source del tag <infobox> permettono di selezionare facilmente template infobox specifici usando classi CSS:

  • L'attributo type si usa per specificare un tipo logico (cosa l'infobox sta descrivendo), ma può anche essere usato come una classe CSS.
  • 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 "type"[]

Per esempio, type="personaggio" aggiunge una classe chiamata type-character all'HTML dell'infobox, che può poi essere personalizzata usando il CSS:

Codice del template
<infobox type="personaggio">
  ...
</infobox>
CSS da usare
.portable-infobox.type-personaggio {
   ...
}

Ad esempio, il codice qui sotto potrebbe poi essere utilizzato per modificare il colore di sfondo secondario (il colore di sfondo del titolo e delle intestazione dell'infobox) di tutti gli infobox personaggio in marrone:

.portable-infobox.type-personaggio .pi-secondary-background {
    background-color: maroon;
}

Uso di "theme"[]

Per esempio, theme="delta" aggiunge una classe chiamata pi-theme-delta all'HTML dell'infobox, che può poi essere personalizzata usando il CSS:

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

Ad esempio, il codice qui sotto può essere poi usato per cambiare il colore di sfondo secondario di tutti gli infobox a tema delta in blu navy:

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

Se l'attributo theme= non viene specificato, il default è theme="wikia" e sarà quindi aggiunta all'infobox la classe pi-theme-wikia.

Uso di "theme-source"[]

Per esempio, theme-source="luogo" significa che quando viene specificato il parametro 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 vuoi modificare il colore di sfondo secondario degli infobox per tutti i luoghi in Africa, puoi fare quindi qualcosa come:

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

Ricorda che i nomi delle classi sono sensibili alle maiuscole, quindi presta attenzione su cosa permetti agli utenti di inserire come valori del parametro settato in theme-source. Nel caso illustrato qui sopra, il valore "africa" non attiverebbe le modifiche di stile desiderate.

Note avanzate sui temi[]

  • Se vengono usati sia theme sia theme-source, entrambi forniscono le loro proprietà CSS.
  • 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 principali[]

Queste classi ti aiutato ad aggiornare lo stile di tag specifici:

Titolo
.pi-title
Intestazione
.pi-header
Navigazione
.pi-navigation
Gruppo
.pi-group
Tag dato
.pi-data
Valore del dato
.pi-data-value
Etichetta del dato
.pi-data-label
Immagine
.pi-image
Didascalia immagine
.pi-caption
Galleria immagine
.pi-image-collection
Elemento scheda pannello
wds-tabs__wrapper
Gruppo scheda pannello
wds-tabs
Scheda pannello
wds-tabs__tab
Contenuto scheda pannello
wds-tab__content

Classi helper[]

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

Sfondo generale infobox
.pi-background
Sfondo titolo e intestazioni
.pi-secondary-background
Stile font dei dati
.pi-font
Stile font del titolo, etichetta e navigazione
.pi-secondary-font
Padding intorno a ciascun elemento dell'infobox
.pi-item-spacing
Colore dei bordi dell'elemento dell'infobox
.pi-border-color

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 della 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: 10px 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 della navigazione 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;
}
Cambiare il colore di sfondo delle schede per immagini
.portable-infobox .wds-tabs__tab {
  background-color: green;
}

Avanzate[]

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 lo sfondo per quel tema sarà:

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

Singolo elementi possono essere personalizzati in modo indipendenti usando data-attribute come selettori. Per esempio, tutti gli elementi di un infobox portatile che hanno un input source saranno renderizzati in HTML con il nome di quel parametro in un data-attribute, come per esempio data-source="ATK". Questo ti permette di scrivere selettori CSS o jQuery come .pi-item[data-source=ATK] per personalizzare e individuare gli elementi. Usato in combinazione con type, questo dovrebbe eliminare lo stile di selezione tramite nth-of-type e aprire ad altre possibilità per il design e l'interattività.

Il name attribute su un elemento permette le loro selezioni esplicite, che accettino un input oppure no, attraverso l'identificazione di <title>, <group>, <data>, <header>, <image>, and <navigation>. In modo simile al data-attriute data-source, <data name="bar"> può essere selezionato come .pi-item[data-item-name=bar].

Advertisement