MediaWiki/Hacking interfaccia

Mediante i fogli di stile (CSS), è possibile personalizzare totalmente l'aspetto dell'interfaccia. Di seguito, vedremo alcune dichiarazioni per riuscire a modificare la grafica della nostra wiki.

Reperire i giusti selettori

Per chi usa Firefox è sufficiente premere contemporaneamente Ctrl+u per aprire una pagina in cui è visualizzato tutto il codice sorgente della pagina. Alcuni selettori sono presenti in alcune pagine ed assenti in altre, quindi in caso di personalizzazioni "estreme" sarà necessario visualizzare il codice sorgente di una pagina per ogni NamesSpaces, esempio i tab delle pagine (modifica, cronologia, sposta, ecc): Il tab con scritto "Template" è presente solo nelle pagine di template, quindi nel caso in cui volessimo modificare questo tab, esempio per metterci una piccola immagine al suo interno, dovremmo guardare il sorgente di una pagina casuale di template.

Vediamo un esempio

Premendo ctrl+u e cercando con lo strumento apposito di FireFox (Ctrl+f) il titolo della pagina, veniamo rimandati ad una porzione di codice, per riconoscere i tab, basta cercare delle parole chiave, ad esempio "template", dopo varie ricerche, vedremo del codice come quello nell'esempio qui sotto:

<li id="ca-nstab-template" class="selected"><a href="/wiki/Template:MediaWiki" title="Vedi il template [c]" accesskey="c">Template</a></li>

Spieghiamolo

• li id="ca-nstab-template" :id del tag, quello che ci serve per la personalizzazione
• class="selected" :Dichiara al software che il tab è selezionato
• a href="/wiki/Template:MediaWiki" :Indirizzo della pagina
• title="Vedi il template [c]" :Questo è ciò che appare lasciando il puntatore del mouse fermo sul tab
• accesskey="c" :Scorciatoia da tastiera (alt+shift+c, che però si limita a ricaricare la pagina)
• Template :Scritta che appare dentro al tab, utile per farci rendere conto se siamo nella porzione di codice giusta
• </a></li> :Tag di chiusura.

Quindi nel caso in cui volessimo aggiungere delle piccole icone al tab "template", dovremo usare il seguente codice:

li#ca-nstab-template a{padding-left: 18px;background:url(http://Indirizzo_completo/immagine.estensione) top left no-repeat !important; }

• li : Il tag di apertura che abbiamo trovato prima ( <li id= )
• #ca-nstab-template a : Il codice con cui il software contraddistingue il tab "template"
• {padding-left: 18px;
• background:url(http://Indirizzo_completo/immagine.estensione) :Indirizzo da cui prelevare l'immagine. Attenzione: L'immagine nel caso specifico dei tab, deve essere 16x16px, altrimenti potrebbe non vedersi o vedersi in parte. L'indirizzo, nel caso in cui fosse un'immagine caricata in una wiki, non è l'indirizzo che appare nella wiki, ma il suo link fisso, per saperlo potete andare nella pagina apposita e scrivere il nome dell'immagine. Se invece fosse caricata in un sito esterno, ad esempio il vostro, potete cliccare con il tasto destro del mouse sull'immagine, scegliere proprietà e copiarvi l'indirizzo che appare.
• top left :
• no-repeat :
• !important; :
• } :