Wikipedia:Skin - Wikipedia
Vai al contenuto
Da Wikipedia, l'enciclopedia libera.
(Reindirizzamento da
Wikipedia:Monobook.css
Come registrarsi
Aut. a due fattori
Nome utente
Pagina utente
Pagina di discussione
tutorial
Firma
Contributi utente
Osservati speciali
Livelli di accesso
Login unificato
Preferenze
Skin
Accessori
Cambiare il nome utente
Eliminare la registrazione
Una
skin
, nella terminologia informatica e di Wikipedia, è l'aspetto grafico e di impaginazione con cui può apparire il sito web di Wikipedia.
Un utente non registrato può utilizzare solo la skin predefinita, chiamata
Vector 2022
, mentre un utente registrato può cambiarla in
Preferenze/Aspetto
Skin disponibili
Nel corso dello sviluppo del software
MediaWiki
, alla base di Wikipedia, sono state scritte diverse skin e al 2024 ne sono disponibili cinque:
Vector 2022
, creata nel 2022 e predefinita dal 2024
Anteprima
Vector
(o
Vector Legacy
), creata nel 2009 e predefinita dal 2010 al 2023 (MediaWiki 1.17)
Anteprima
Monobook
, creata nel 2003, predefinita fino al 2010
Anteprima
Minerva Neue
, utilizzata nella versione mobile
Anteprima
Timeless
Anteprima
Funzionamento
Una skin è costituita da script
PHP
lato server e da
CSS
JavaScript
e immagini fornite insieme alla pagina web.
Il caricamento di queste risorse da parte del browser non avviene direttamente tramite URL statici ma per mezzo di un servizio detto ResourceLoader, uno script PHP che li fornisce in modo ottimizzato (concatenamento, minificazione, ...).
È possibile provare in anteprima come apparirebbe una certa pagina con una certa skin, anche se non si è registrati, aggiungendo in fondo all'URL della pagina il comando
?useskin=NOME
, dove NOME è il nome della skin senza spazi.
Personalizzazione CSS
Oltre ai
CSS
delle skin, facenti parte di MediaWiki stesso, il software di Wikipedia consente di crearne di nuovi, a livello globale (per tutti gli utenti, anche non registrati), modificabili solo dagli amministratori, o per ciascun utente registrato, modificabili dall'utente stesso:
CSS globali:
MediaWiki:Common.css
comune a tutte le skin
MediaWiki:
nomeskin
.css
per skin, "nomeskin.css" può valere vector.css, monobook.css, ...
Gruppo-X.css
per gruppo di utenti, esempio
MediaWiki:Group-sysop.css
MediaWiki:Noscript.css
per gli utenti con Javascript disabilitato
MediaWiki:Print.css
per la stampa
CSS personali:
Utente:
nome utente
/common.css
comune a tutte le skin
Utente:
nome utente
nomeskin
.css
per skin, "nomeskin.css" può valere vector.css, monobook.css, ...
Anche questi CSS personalizzati sono caricati dal browser grazie al ResourceLoader.
A seconda delle modifiche che si desidera fare, ci vogliono conoscenze più o meno approfondite di CSS. Questa pagina dà una prima introduzione, per approfondimenti si consiglia di visitare il sito del
W3C
, che oltre agli standard ufficiali offre anche una collezione di collegamenti a siti con
tutorial
a vari livelli.
HTML e CSS
Una pagina web moderna normalmente è composta almeno dalle seguenti due componenti:
La pagina in formato
HTML
con i contenuti testuali e la struttura (intestazioni, paragrafi, liste, tabelle, ecc.). Nel caso di Wikipedia, il
software
trasforma il wiki-sorgente in pagine HTML.
Il foglio di stile in formato
CSS
che sostanzialmente definisce tutti gli aspetti visivi della pagina (caratteri, colori, dimensioni, margini, bordi, sfondi, ecc.).
Ogni
elemento
di una pagina HTML viene contrassegnato con dei cosiddetti
"tag"
. Per esempio, un paragrafo di testo inizia con il
tag
e finisce con
/p
. Nel foglio di stile "monobook" di
default
si trovano le righe
p {
margin: 0.4em 0em 0.5em 0em;
line-height: 1.5em;
dove la "p" (qui senza le parentesi angolari) segnala che le seguenti proprietà si riferiscono a tutti i paragrafi della relativa pagina. Tutte le proprietà di questo elemento sono racchiuse da parentesi graffe {}. Il valore (per esempio "1.5em") è separato dalla proprietà (per esempio "line-height", ovvero la distanza fra le righe) da un doppio punto ed è seguito da un punto e virgola.
Per differenziare l'aspetto degli elementi dello stesso tipo, si possono usare
classi
id
per assegnare diversi "nomi" agli elementi. Nel caso di Wikipedia, questi nomi vengono assegnati in automatico dal
software
. Prendiamo un esempio dallo stile di default "monobook":
table.diff { background:white; }
Con questo si ottiene che tutte le tabelle (elemento "table") con la classe "diff" (separata dal nome dell'elemento con un punto) abbiano lo sfondo bianco. (Nella pagina HTML, queste tabelle iniziano con il
tag
table class="diff"
.) L'aspetto delle altre tabelle (senza la classe "diff") non viene influenzato da questo. La differenza fra classe e
id
ci interessa solo in quanto cambia minimamente la sintassi: il nome di una
id
viene separato dal nome dell'elemento da un cancelletto # anziché da un punto.
Se si vogliono assegnare proprietà a
tutti
gli elementi con una certa classe o
id
, si lascia via il nome dell'elemento. Un esempio da "monobook":
.error {
color: red;
font-size: larger;
Qualsiasi elemento con la classe "error", che sia un paragrafo, un'intestazione o altro, appare così in caratteri rossi e un po' più grandi del normale.
Infine ci si può riferire anche solo agli elementi che si trovano all'interno di certi altri elementi:
#toc p { margin: 0 }
In questo esempio vengono azzerati i margini dei paragrafi, ma
solo
di quelli che si trovano
all'interno
di un elemento con l'
id
"toc". Questo non è da confondere con
p#toc { margin: 0 }
che si riferisce ai paragrafi che hanno loro stessi l'
id
"toc".
I namespace
Semplificando un po', si può dire che l'elemento "body" è la pagina stessa. Questo ci consente di capire come personalizzare l'aspetto dei vari
namespace
: Il software di Wikipedia assegna automaticamente all'elemento "body" una classe che dipende dal namespace. Il nome è composto da "ns-", seguito dal numero del namespace. Ecco l'elenco completo:
.ns-0
: Principale
.ns-1
: Discussione
.ns-2
: Utente
.ns-3
: Discussioni utente
.ns-4
: Wikipedia
.ns-5
: Discussioni Wikipedia
.ns-6
: Immagine
.ns-7
: Discussioni immagine
.ns-8
: MediaWiki
.ns-9
: Discussioni MediaWiki
.ns-10
: Template
.ns-11
: Discussioni template
.ns-12
: Aiuto
.ns-13
: Discussioni aiuto
.ns-14
: Categoria
.ns-15
: Discussioni categoria
.ns-102
: Progetto
.ns-103
: Discussioni progetto
.ns-118
: Bozza
Se volessimo impostare dei caratteri più grandi solo per le pagine nel
namespace
principale, potremmo mettere
body.ns-0 { font-size: medium; }
o più semplicemente
.ns-0 { font-size: medium; }
Ricordandoci di quanto detto nell'introduzione possiamo anche modificare l'aspetto dei paragrafi nel
namespace
principale, lasciandolo immutato negli altri:
.ns-0 p { margin:0; text-indent:2em; }
Se invece volessimo applicare questo stile a tutti i
namespace
, basterebbe lasciare via la classe "ns-0":
p { margin:0; text-indent:2em; }
Le parti della pagina (skin Monobook)
Questa voce o sezione deve essere rivista e aggiornata appena possibile
Commento
Aggiungere una sezione anche per la skin Vector, divenuta predefinita
Sembra infatti che questa voce contenga informazioni superate e/o obsolete. Se puoi,
contribuisci
ad aggiornarla.
La seguente lista mostra le principali classi e
id
della struttura delle pagine di Wikipedia con la skin Monobook:
#globalWrapper
: elemento ("div") che racchiude tutta la pagina
#column-content
#content
: elementi ("div") che racchiudono il contenuto della pagina (senza gli elementi di navigazione)
.firstHeading
: l'intestazione della pagina
#bodyContent
: il contenuto senza l'intestazione della pagina
#toc
: contiene l'indice
.editsection
: contiene i link per modificare singole sezioni
#catlinks
: contiene i link alle categorie inserite nella pagina
#column-one
: contiene tutti gli elementi di navigazione
#p-cactions
: contiene i link alle "azioni" ("pagina", "discussione", "modifica", ecc.)
#p-personal
: contiene i link agli strumenti personali (pagina e discussione utente, preferenze, ecc.)
#p-logo
: contiene il logo
#p-nav
: contiene la navigazione ("Pagina principale", "Portale comunità", ecc.)
#p-search
: contiene il blocco "ricerca"
#p-tb
: contiene gli strumenti ("Puntano qui", "Modifiche correlate", ecc.)
#p-lang
: contiene gli "interwiki"
#footer
: contiene la barra in fondo alle pagine
Se quindi si mette
#globalWrapper { font-size: 150% }
si aumenta la dimensione dei caratteri di tutta la pagina del 50%. Invece
#column-content { font-size: 150% }
aumenta la dimensione dei caratteri del contenuto, lasciando immutati i link di navigazione.
Provando l'ultimo esempio si nota una delle varie difficoltà che si incontrano modificando i fogli di stile: le dimensioni di alcune parti della pagina possono dipendere dalle dimensioni dei caratteri, per cui cambiando le dimensioni dei caratteri può succedere di scombinare l'aspetto di tutta la pagina. Un'altra difficoltà sta nel capire la precedenza delle definizioni. Per esempio,
body { color: green }
non
fa apparire il testo della pagina in verde, perché c'è un'altra definizione in
MediaWiki:Monobook.css
che ha la precedenza. Una soluzione (di diverse possibili) per cambiare il colore del testo e delle intestazioni è
p, h1, h2, h3, h4, h5, h6 { color:green; }
Personalizzazione JavaScript
Le varie skin possono essere personalizzate e ampliate nelle funzionalità anche con script
JavaScript
, anch'essi a livello globale (per tutti gli utenti, anche non registrati), modificabili solo dagli amministratori, o per ciascun utente registrato, modificabili dall'utente stesso:
JavaScript globali:
MediaWiki:Common.js
comune a tutte le skin
MediaWiki:
nomeskin
.js
per skin, "nomeskin.js" può valere vector.js, monobook.js, ...
Gruppo-X.js
per gruppo di utenti, esempio
MediaWiki:Group-sysop.js
JavaScript personali:
Utente:
nome utente
/common.js
comune a tutte le skin
Utente:
nome utente
nomeskin
.js
per skin, "nomeskin.js" può valere vector.js, monobook.js, ...
Per la skin Vector 2022
qui
la sezione delle FAQ sulla personalizzazione e
qui
alcuni gadget e script utente.
Skin obsolete
Queste skin sono deprecate e accessibili solo tramite il parametro
?useskin
Modern
Anteprima
Cologne Blue
anteprima
Queste skin non sono più utilizzabili in nessun modo, perché erano poco utilizzate:
La skin
Nostalgia
, la skin originale di wikipedia circa nel 2001, è disponibile solo in
the Nostalgia Wikipedia
Chick
MySkin
Simple
Standard
(alias
Classic
; skin predefinita
ca.
2002)
Galleria
Vector 2022 (
Anteprima
Vector Legacy (predefinita) (
Anteprima
MonoBook (
Anteprima
Cologne Blue (
Anteprima
Modern (
Anteprima
Note
EN
mw:Manual:Skinning
EN
mw:ResourceLoader
EN
mw:Manual:Interface/Stylesheets
EN
mw:Manual:Interface/JavaScript
Documentazione
Su MediaWiki.org
EN
Manuale
EN
Fogli di stile
EN
JavaScript
EN
Skin Vector
EN
Skin Monobook
EN
Skin Cologne Blue
EN
Skin Modern
EN
Tutte le skin
Su Meta-Wiki
EN
CSS personali
Pagine correlate
Aiuto:Preferenze/Aspetto
Aiuto:Namespace
, per ulteriori informazioni sui namespace
Estratto da "
Categoria
Servizi MediaWiki
Categorie nascoste:
Pagine di servizio protette parzialmente
Aggiornare - pagine di servizio
Wikipedia
Skin
Aggiungi argomento