Differenze tra le versioni di "MediaWiki/Hacking interfaccia"

sistemato
(+ tl sommario)
(sistemato)
{{WIP|Il duo delle meraviglie :-D}}
{{MediaWiki}}
{{
MediaWiki}}Mediante i fogli di stile ([[w:Fogli di stile|CSS]]), è possibile personalizzare totalmente l'aspetto dell'interfaccia di MediaWiki. Di seguito, vedremosaranno alcuneesaminati dichiarazionialcuni pertrucchetti riuscireo aesempi già pronti di dichiarazioni per modificare la grafica della nostra wiki.
 
 
'''Attenzione''': per la lettura di questo modulo è ''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+uU''' per aprire una paginafinsestra 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 dimomento templatecaricata.<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.
{{Vedi anche|CSS/Selettori}}
È molto comodo, inoltre, l'uso dell'estensione di Firefox [https://addons.mozilla.org/it/firefox/addon/60 Web Developer Toolbar], la quale fornisce un'interessante funzionalità che permette di evidenziare l'elemento corrente indicandone anche la posizione nel DOM.
 
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 "'''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 ''ctrlCtrl+uU'' e cercando con lo strumento apposito di FireFox (''Ctrl+fF'') 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:
<small><source lang=html4strict>
<li id="ca-nstab-template" class="selected">
<li id="ca-nstab-template" class="selected"> <a href="/wiki/Template:MediaWiki" title="Vedi il template [c]" accesskey="c">Template</a></li>
</li>
</source></small>
 
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>: '''ID''' :iddell'elemento, delnel tag,CSS quelloservirà checome ciprimo serveselettore per la personalizzazione.
* class="selected": dichiara al software che il tab è '''selezionato'''; è un'informazione utile se ad esempio vogliamo lavorare solo sulla tab selezionata.
* '''<code>a href="/wiki/Template:MediaWiki"</code>: '''link''' :Indirizzo dellaalla pagina.
* '''<code>title="Vedi il template [c]"''' </code>:Questo è ciò che appare lasciando il puntatore del mouse fermo sul tab.
* '''<code>accesskey="c"</code>: '''scorciatoia''' :Scorciatoia da tastiera (alt+shift+c, che però si limita a ricaricare la pagina).
* <code>Template</code>: '''Templatetesto''' :Scritta che appare dentro al tab, utile per farci rendere conto se siamo nella porzione di codice giusta.
* '''<code><nowiki></a></li></nowiki></code>: '''chiusura''' :Tagdei di chiusuratag.
 
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.
 
Quindi nel caso in cui volessimo aggiungere delle piccole icone al tab "template", dovremo usare il seguente codice CSS:
;Vediamo un esempio<br/>
<small><source lang=css>
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#ca-nstab-template a{
<small><source lang=html4strict>
* '''{ padding-left: 18px;'''
<li id="ca-nstab-template" class="selected"><a href="/wiki/Template:MediaWiki" title="Vedi il template [c]" accesskey="c">Template</a></li>
li#ca-nstab-template a{padding-left: 18px; background:url( http://Indirizzo_completo/immagine.estensione) top left no-repeat !important; }
</source></small>
}
<!-----------------------------------------------------------------------------------------------------------------------------
</source></small>
INTANTO METTO SMALL, POI ANDREBBE RIMPICCIOLITO IL TESTO AD UNA MISURA PIÙ IDONEA
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 ('''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".
;Spieghiamolo:
* <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.
* '''li <nowiki>id="ca-nstab-template"</nowiki>''' :id del tag, quello che ci serve per la personalizzazione
* '''<code>background: url(http://Indirizzo_completo/immagine.estensione)'''</code>: :Indirizzoindirizzo da cui prelevare l''''immagine'''. Attenzione: Ll'immagine, nel caso specifico dei tab, deve essere 16x16pxdi 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 illa suosua link fisso[[w:URL|URL]], perche saperlopuò poteteessere andarereperita nella pagina [[Speciale:Filepath|apposita]] e scriverescrivendo 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, scegliere proprietà e copiarviscegliere l''Copia indirizzo che appareimmagine''.
* '''class="selected"''' :Dichiara al software che il tab è selezionato
* <code>top left</code>: questa parte della dichiarazione CSS specifica di inserire l'immagine nell'angolo in alto a sinistra della tab
* '''a href="/wiki/Template:MediaWiki"''' :Indirizzo della pagina
* <code>no-repeat</code>: questa parola chiave indica che l'immagine non deve essere ripetuta nella tab
* '''title="Vedi il template [c]"''' :Questo è ciò che appare lasciando il puntatore del mouse fermo sul tab
* <code>!important</code>: questo modificatore serve per attribuire più '''peso''' alla dichiarazione CSS. Se non inserita, potrebbe essere superata dal codice CSS proveniente da altri file.
* '''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
* '''<nowiki></a></li></nowiki>''' :Tag di chiusura.
 
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
Quindi nel caso in cui volessimo aggiungere delle piccole icone al tab "template", dovremo usare il seguente codice:
<small><source lang=css>
li#ca-nstab-template a{padding-left: 18px;background:url(http://Indirizzo_completo/immagine.estensione) top left no-repeat !important; }
</source></small>
<!-----------------------------------------------------------------------------------------------------------------------------
INTANTO METTO SMALL ANCHE QUI, POI ANDREBBE RIMPICCIOLITO COME IL PRECEDENTE
------------------------------------------------------------------------------------------------------------------------------->
* '''<nowiki>li</nowiki>''' : Il tag di apertura che abbiamo trovato prima ( <li id= )
* '''<nowiki>#ca-nstab-template a</nowiki>''' : 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 [[Speciale:Filepath|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;''' :
* '''<nowiki>}</nowiki>''' :
 
{{avanzamento|25%}}
8 469

contributi