L'utente può modificare font, colori, posizione dei link sui lati e molte altre caratteristiche! Questo è possibile mediante la modifica dei Cascading Style Sheets memorizzati nelle sottopagine della pagina utente.
Per esempio, per creare la propria versione modificata dello skin di default monobook, occorre creare una pagina in w:Speciale:Mypage/monobook.css contenente il CSS che si vuole utilizzare.
Nota: nella configurazione predefinita, gli stili dell'utente sono ignorati. Per abilitare questa possibilità occorre aggiungere due parametri al LocalSettings.php:
$wgAllowUserJs = true; $wgAllowUserCss = true;
Per ogni stile definibile dall'utente, dev'essere prima di tutto selezionata una skin e il corrispondente Cascading Style Sheet (CSS). Per ogni skin, l'utente può effettuare varie scelte riguardo ai font, colori, posizione dei link ai lati, ecc. Il CSS è specificato mediante i riferimenti ai selettori : w:elementi HTML, classi e id specificati nel codice HTML. In base a questo, le possibilità per ogni skin possono essere esplorate guardando il codice sorgente HTML di una pagina, in particolare alle classi ed agli id, più ce ne sono, maggiore è la versatilità.
I valori predefiniti per tutte le skin sono contenuti in MediaWiki:Common.css. Le altre pagine CSS sono suddivise per skin:
I file nella directory style sono, per una data skin, gli stessi in ogni progetto. Il nome della directory style è configurato nell'installazione, vedi LocalSettings.php#Stylesheet_Location]].
Nello skin monobook, è possibile cambiare ogni aspetto dell'interfaccia utente specificato in http://it.wikipedia.org/style/monobook/main.css e MediaWiki:Monobook.css o simili utilizzando il proprio w:Javascript o CSS. Le modifiche sono effettuate nelle sottopagine della propria pagina utente chiamate monobook.css e monobook.js..
È possibile modificare il classic skin, la pagina dovrebbe essere chiamata Utente:nomeutente/ standard.css e Utente:nomeutente/ standard.js (e in modo analogo per le altre skin).
Si può provare con qualche esempio di css/js in questa pagina. L'anteprima funziona in modo particolare: permette di vedere quanto c'è attorno alla pagina (senza contenuto) in base alle informazioni di stile, assumendo che lo skin utilizzato sia quello al quale vengono applicate le modifiche. Il sistema ha qualche limitazione, per esempio, si può vedere l'anteprima dei link delle barre laterali ma potrebbe non essere completo. Dopo aver salvato, quando si è ancora nella pagina o in un'altra, occorre forzare un aggiornamento (shift-reload/ctrl-F5) per utilizzare i nuovi file.
Il sorgente HTML contiene line come le seguenti:
<script type="text/javascript" src="/w/wiki.phtml?title=User:username/standard.js&action=raw&ctype=text/javascript"> </script> @import "/style/wikistandard.css"; @import "/w/wiki.phtml?title=User:username/standard.css&action=raw&ctype=text/css";
per il CSS valido sull'intero progetto di una skin in particolare (raggiungibile in //it.wiktionary.org/style/wikistandard.css) ed i JS e CSS personalizzati per una skin in particolare.
Per "MySkin" non esiste un main.css applicabile. Il css personale applicabile è Utente:nomeutente/ myskin.css (tutto minuscolo!).
Oltre a quanto detto precedentemente, è possibile configurare un CSS locale sul browser. Se si utilizzano browser differenti, è possibile avere un CSS diverso per ognuno di essi. Queste modifiche si applicano all'intero world wide web, non solo al progetto MediaWiki (inoltre non dipende se si è effettuato il login). Le impostazioni agiscono solamente sulle pagine web che usano la stessa classe, per esempio, effettuando modifiche sul selettore a.extiw, si hanno conseguenze su poche pagine rispetto a modifiche sul selettore h2.
Per avere delle linee di CSS differenti fra i vari progetti MediaWiki, per esempio per distinguerli con un colore diverso dello sfondo, evidentemente non può essere usato un CSS locale e quindi queste linee dovrebbero essere inserite nelle sottopagine utente.
In alcuni casi, per esempio negli internet caffè, non è possibile modificare le preferenze del browser. In questo caso le sottopagine utente permettono di modificare comunque lo stile.
Se il browser è configurato in modo da ignorare la dimensione dei caratteri dettata nella pagina web o nel CSS esterno, le modifiche relative alla dimensione dei font vanno poste nel CSS locale.
I selettori CSS rilevanti per lo stile della pagina, espressi in termini di elementi, classi ed identificativi, includono i seguenti. Quando possibile, sono presenti degli esempi che mostrano il risultato dello stile corrente:
uso di "a" e di ":link" -
È un errore comune utilizzare "a" invece di ":link" per assegnare uno stile ai link. Mentre ":link"
si applica solamente ai link, "a" si applica sia ai link che agli ancho con nome (p.e. <a name="bookmark">).
I normali link interni non sono contenuti nella classe internal (precedentemente era così ed è ancora così nei siti che utilizzano vecchie versioni del software, p.e. ); ne può essere modificato lo stile mediante :link e :link:visited, in generale, mediante modifiche a :link.extiw ecc. è possibile applicare eccezioni allo stile generale dei link.
Per i link interlingua:
È possibile avere stili dipendenti da un attributo, per esempio con i selettori:
per codificare con un colore od enfatizzare particolari utenti (inclusi se stessti) e/o link a pagine particolari (come il grassetto delle pagine seguite nella pagina delle Ultime modifiche). Funziona con Opera ma non con IE.
Gli osservati speciali e le Ultime modifiche utilizzano due classi:
La pagina della cronologia ha la classe autocomment e:
Quindi il font specificato per user si applica alla cronologia ma non negli osservati speciali o Ultime modifiche.
La classe portlet è usata da tutti i blocchi div attorno al contgenuto principale. I blocchi identificati dalla classe sono:
La parte in basso della pagina include i seguenti blocchi:
Uno stile estremo è quello che non visualizza il testo con
.classname {display: none}
#id {display: none}
ecc.
I link non visualizzati non funzionano (diversamente dai link con font molto piccoli).
Non può essere usato per rimuovere il testo nei nomi dei template, parametri, valori dei parametri, nomi di pagina nei link, ecc.
Su Meta e su Wikipedia in inglese MediaWiki:Common.css contiene
".hiddenStructure {display: none}".
Il nome di un attributo HTML può diventare variabile. HTML Tidy rimuove gli attributi con nome non valido lato server, in modo che il risultato non dipenda dalla capacità del browser di ignorare attributi non validi e la quantità di dati inviata è minore. Per una variabile con un possibile valore "class", vedere w:en:Wikipedia:HiddenStructure e w:en:Template:Infobox.
/* make the background behind the content area and the tabs a light grey */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }
/* stop background image from scrolling with content area */
body { background-attachment: fixed; }
/* replace the book in the background with something else */
body { background: Purple; }
/* changes the background of pre areas */
pre { background: White }
/* change the logo */
#p-logo a { background: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg) 35% 50% no-repeat !important; }
/* don't use any logo, move the boxes onto that area instead */
#p-logo { display: none }
#column-one { padding-top: 0; }
/* suppress the person icon by your username */
li#pt-userpage { background: none }
/* use browser prefs for text size and font */
body, #globalWrapper { font: inherit !important; }
/* always underline links */
:link { text-decoration: underline; }
/*Display body content in a narrower column for easier reading*/
/*adjust percentages as desired*/
div#bodyContent {
width: 50%;
line-height: 105%;
}
/* change background of unselected tabs */
#p-cactions ul li a { background: #C7FDC7; }
/* change background of selected tabs */
#p-cactions ul li.selected a { background: white; }
/* change border background of selected tabs */
#p-cactions li.selected { border-color: #aaaaaa; }
/* tab bottom not removed on hover */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }
/* style the search box and the buttons below it */
input.searchButton {
background-color: #efefef !important;
border: 1px outset !important;
}
#searchInput { border: 1px inset !important; }
/* standard link colors */
:link { color: #0000FF; }
:link:visited { color: #7F007F; }
:link:active, :link.new { color: #FF0000; }
:link.interwiki, :link.external { color: #3366BB; }
:link.stub { color: #772233; }
/* put scrollbar on pre sections instead of ugly cutoff/overlap in firefox */
pre { overflow: auto; }
/* strikeout Upload File link as a reminder to upload to Commons instead */
li#t-upload { text-decoration: line-through; }
-->
/* non usare un carattere più piccolo */
td.diff-addedline, td.diff-deletedline, td.diff-context { font-size: 100% };
/* sottolineare solo il testo con differenze */
span.diffchange { text-decoration:underline; }