Differenze tra le versioni di "MediaWiki/Hacking interfaccia"

+ rc colorate
(sistemato)
(+ rc colorate)
{{MediaWiki}}
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 questo modulo è ''fortemente'' consigliato conoscere il linguaggio [[w:Fogli di stile|CSS]].
{{Vedi anche|CSS}}
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>
* <code>li#ca-nstab-template a</code>: questa parte del codice ('''selettore''') serve a CSS per '''identificare l'elemento''' o gli elementi della pagina a cui applicare le dichiarazioni inserite tra le parentesi graffe: in questo caso, indichiamo di prendere tutti gli elementi <code>&lt;a&gt;</code> contenuti nell'elemento <code>&lt;li&gt;</code> che presenta l'ID <code>ca-nstab-template</code>, cioè la tab del namespace "template".
* <code>padding-left: 18px;</code>: questa dichiarazione CSS indica di inserire all'interno della tab un ''padding'' sinistro di 18px. In pratica, aggiunge una '''spaziatura''' di 18px a sinistra del testo nella tab per fare spazio all'iconcina.
* <code>background: url(<nowiki>http://Indirizzo_completo/immagine.estensione</nowiki>)</code>: indirizzo da cui prelevare l''''immagine'''. Attenzione: l'immagine, nel caso specifico dei tab, deve essere di dimensioni 16x16 [[w:Pixel|pixel], altrimenti potrebbe non vedersi o vedersi in parte.<br/>L'indirizzo, nel caso in cui fosse un'immagine caricata in una wiki, non è l'indirizzo che appare nella wiki, ma la sua [[w:URL|URL]], che può essere reperita nella pagina [[Speciale:Filepath|pagina apposita]] scrivendo il nome dell'immagine. Se invece fosse caricata in un sito esterno, ad esempio il vostro, se navigate con FF potete cliccare con il tasto destro del mouse sull'immagine, e scegliere ''Copia indirizzo immagine''.
* <code>top left</code>: questa parte della dichiarazione CSS specifica di inserire l'immagine nell'angolo in alto a sinistra della tab
* <code>no-repeat</code>: questa parola chiave indica che l'immagine non deve essere ripetuta nella tab
 
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:
* <code>.mw-plusminus-pos</code>: questa classe identifica le modifiche positive (cioè nelle quali sono stati aggiunti dei caratteri).
* <code>.mw-plusminus-neg</code>: identifica le modifiche negative.
* <code>.mw-plusminus-null</code>: identifica le modifiche nulle.
 
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>
 
{{avanzamento|25%}}
8 469

contributi