MediaWiki/Hacking interfaccia: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m - grassetto onnipresente |
|||
Riga 1:
{{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
== Con i fogli di stile ==
Riga 8:
=== Reperire i giusti selettori ===
Per chi usa [[w:Mozilla Firefox|Mozilla Firefox]] è sufficiente premere contemporaneamente
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.
{{Vedi anche|CSS/Selettori}}
Riga 14:
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 ''[[Aiuto:Namespaces|namespace]]''.<br/>
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 "
=== Un semplice esempio: inserire delle iconcine alle tab ===
Riga 25:
Sono tre righe di semplice HTML, ma in alcune possiamo trovare alcuni elementi a noi molto utili:
* <code>li <nowiki>id="ca-nstab-template"</nowiki></code>:
* class="selected": dichiara al software che il tab è
* <code>a href="/wiki/Template:MediaWiki"</code>:
* <code>title="Vedi il template [c]"</code>: ciò che appare lasciando il puntatore del mouse fermo sul tab.
* <code>accesskey="c"</code>:
* <code>Template</code>:
* <code><nowiki></a></li></nowiki></code>:
Utilizzando Web Developer, invece, è possibile fare click su "''Outline''" nella toolbar apposita e poi "''Outline Current Element''" e "''Show element Names When Outlining''. I questo modo, passando sulla tab, potremo esaminare la sua posizione all'interno della gerarchia del DOM e individuarne l'ID e l'eventuale classe.
Riga 43:
</source>
Questa dichiarazione CSS serve per inserire un'iconcina accanto al testo della tab "template". In particolare:
* <code>li#ca-nstab-template a</code>: questa parte del codice (
* <code>padding-left: 18px;</code>: questa dichiarazione CSS indica di inserire all'interno della tab un ''padding'' sinistro di 18px. In pratica, aggiunge una
* <code>background: url(<nowiki>http://Indirizzo_completo/immagine.estensione</nowiki>)</code>: indirizzo da cui prelevare l
* <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
* <code>!important</code>: questo modificatore serve per attribuire più
Questo codice va inserito nel proprio
=== 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
* <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.
Riga 62:
=== Notifica nuova messaggi ===
Quando un utente riceve
<source lang=css>
.usermessage { /* imposta uno sfondo blu */
Riga 72:
=== Table of Content ===
La
<source lang=css>
#toc .tocnumber {
Riga 82:
== 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.
▲'''Attenzione''': per la lettura di questa sezione è ''fortemente'' consigliato conoscere il linguaggio [[w:JavaScript|JavaScript]].
Una funzione JavaScript molto interessante che mette a disposizione il software è <code>addOnloadHook()</code>, che permette di eseguire una funzione al caricamento della pagina.
<br/>Infatti, senza far ricorso a questa funzione, le istruzioni verrebbero eseguite ''prima'' del caricamento della pagina, senza poter accedere agli
In generale, per far eseguire un JavaScript in ogni pagina di MediaWiki, utilizziamo questo codice:
Line 98 ⟶ 96:
Questa istruzione va inserita nel proprio Monobook.js (per creare un JavaScript personale) oppure nel suo omologo nel namespace MediaWiki (per far eseguire lo script in ogni pagina della wiki).
<br/>Ovviamente è possibile inserire nel monobook delle funzioni, ma queste devono essere comunque eseguite tramite
=== Creare un porlet personalizzato ===
Muovendosi tra gli oggetti del DOM, è possibile creare, modificare o eliminare gli oggetti nella pagina; per esempio è possibile creare un
<source lang=javascript>
//tratto da [[User:Ramac/monobook.js]]
Line 130 ⟶ 128:
</source>
In questo modo è stato creato un nuovo box nella barra laterale (come "navigazione" o "ricerca" pronto a contenere i nostri link o i nostri oggetto [[w:HTML|HTML]]. Sarà sufficiente infatti creare un nuovo oggetto DOM e poi "appenderlo" all'elemento <ul> memorizzato nella variabile <code>ul</code>. Il codice seguente inserisce nel porlet appena creato un
<source lang=javascript>
var l = document.createElement('LI'); //crea un punto elenco
|