Differenze tra le versioni di "MediaWiki/Hacking interfaccia"

Jump to navigation Jump to search
sist. gerarchia e tolto wip
(+ notifica usermessage)
(sist. gerarchia e tolto wip)
{{WIP|Il duo delle meraviglie :-D}}
{{MediaWiki}}
Il software MediaWiki mette a disposizione la possibilità agli utenti o agli amministratori del sito di creare script JS e fogli di stile per p'''ersonalizzare l'interfaccia della propria wiki'''.
 
== Con i fogli di stile ==
Mediante i fogli di stile ([[w:Fogli di stile|CSS]]), è possibile personalizzare totalmente l'aspetto dell'interfaccia di MediaWiki. Di seguito, saranno esaminati alcuni trucchetti o esempi già pronti di dichiarazioni per modificare la grafica della nostra wiki.
{{Vedi anche|Wikibooks:Monobook.css}}
'''Attenzione''': per la lettura di questoquesta modulosezione è ''fortemente'' consigliato conoscere il linguaggio [[w:Fogli di stile|CSS]].
{{Vedi anche|CSS}}
=== Reperire i giusti selettori ===
Per chi usa [[w:Mozilla Firefox|Mozilla Firefox]] è sufficiente premere contemporaneamente '''Ctrl+U''' per aprire una finsestra in cui è visualizzato tutto il codice sorgente della pagina al momento caricata.<br/>
Questo serve per individuare la struttura [[w:Document Object Model|DOM]] della pagina e gli attributi ID e <code>class</code> dei diversi elementi [[w:HTML|HTML]]: questo è indispensabile se si vuole personalizzare l'interfaccia tramite i CSS, in quanto questi ragionano in termini di codice sorgente e struttura del documento web.
Per esempio i tab nella parte superiore delle pagine (link modifica, cronologia, sposta, ecc) hanno ID differenti a seconda del namespace della pagina; 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.
 
=== Un semplice esempio: inserire delle iconcine alle tab ===
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:
<source lang=html4strict>
Questo codice va inserito nel proprio '''[[Wikibooks:Monobook.css|monobook]] personale''' in qualsiasi posizione, anche in fondo va bene: in questo modo il codice sarà visibile solo dall'utente che ne ha fatto uso. Per rendere la modifica visibile a tutti, il codice va aggiunto al file [[MediaWiki:Common.css|Common.css]] di sistema, modificabile però solo da amministratori
 
=== Ultime modifiche colorate ===
[[Immagine:RC colorate.png|thumb|left|800px|Le RC colorate in azione]]<br style="clear:both;"/>
Utilizzando i CSS è possibile anche personalizzare la pagina delle '''[[Speciale:UltimeModifiche|Ultime modifiche]]'''. È possibile ad esempio con alcune dichiarazioni CSS differenziare con diversi colori le modifiche positive, negative o nulle. Questo grazie al software, che inserisce questo numero accanto al link alla pagina all'interno di un elemento <code>&lt;span&gt;</code> con una classe particolare:
Conoscendo queste tre classi, è possibile identificare ciascuna modifica di un certo tipo e attribuire a ciascuna di esse un diverso stile utilizzando ad esempio la proprietà <code>color</code>
 
=== Notifica nuova messaggi ===
Quando un utente riceve '''nuovi messaggi''', MediaWiki mostra un messaggio di avviso. La notifica può essere personalizzata in quanto è identificata dalla classe <code>usermessage</code>. Ad esempio:
<source lang=css>
}
</source>
 
=== Table of Content ===
La '''tabella dei contenuti''' (o '''''TOC''''') non è altro che una tabella HTML con id #toc. Possiamo ad esempio lavorare sullo span .tocnumber nascondendolo:
<source lang=css>
#toc .tocnumber {
display: none; /* nasconde l'elemento */
}
</source>
 
== Con i JavaScript ==
Anche tramite il linguaggio JavaScript è possibile modificare l'interfaccia di MediaWiki, anche se in modo diverso. Mentre con i CSS è possibile eseguire solo modifiche alla visualizzazione, lavorando con gli script è possibile anche aggiungere, rimuovere o nascondere elementi della pagina.
{{Vedi anche|Wikibooks:Monobook.js}}
'''Attenzione''': per la lettura di questa sezione è ''fortemente'' consigliato conoscere il linguaggio [[w:JavaScript|JavaScript]].
{{Vedi anche|JavaScript}}
 
{{avanzamento|50%}}
8 469

contributi

Menu di navigazione