L'utente registrato può modificare font, colori, posizione dei link sui lati e molte altre caratteristiche! Questo è possibile mediante la modifica dei Cascading Style Sheets (CSS) memorizzati nelle sottopagine della pagina utente.

Per esempio, per creare la propria versione modificata della skin di default vector, occorre creare una pagina in Speciale:MiaPagina/vector.css contenente il CSS che si vuole utilizzare.

La personalizzazione può richiedere un po' di conoscenza del linguaggio CSS e non è banale. Più semplicemente, nelle proprie preferenze è possibile scegliere tra alcuni stili preconfezionati (skin). Oppure puoi chiedere aiuto allo sportello informazioni.

Generale

Dove si definisce lo stile

I valori predefiniti per tutte le skin e per tutti gli utenti di it.wikipedia sono contenuti in MediaWiki:Common.css. Per ogni skin è presente un'ulteriore pagina che aggiunge ulteriori specificazioni:

Poi ci sono, opzionali, le corrispondenti pagine personali dell'utente registrato, che possono modificare quanto sopra (notare però le iniziali minuscole):

Inoltre in meta:Special:MyPage/global.css si possono impostare per l'utente tutti i siti Wikimedia in un colpo solo. I link a tutti i CSS personali si trovano comodamente anche nelle proprie preferenze.

Esistono anche MediaWiki:Mobile.css (che definisce la versione mobile) e MediaWiki:Print.css (che definisce la versione stampata), ma queste per ora non sono personalizzabili.

Le pagine più specifiche non sostituiscono completamente quelle più generali, ma le integrano. Vengono sovrascritte e sostituite soltanto le definizioni degli stessi oggetti, mentre ciò che non viene esplicitamente ridefinito rimane quello standard. La gerarchia dei CSS è quindi:

  1. default di Wikimedia
  2. MediaWiki:Common.css
  3. MediaWiki:xxx.css della skin attualmente in uso
  4. global.css personale su meta
  5. common.css personale
  6. xxx.css personale della skin attualmente in uso

Come si definisce lo stile

Il CSS è specificato mediante i riferimenti ai selettori: elementi HTML, classi e id specificati nel codice HTML. I selettori principali sono descritti nei successivi capitoli. Osservando le pagine predefinite si possono scoprire altre impostazioni che possiamo andare a cambiare nelle pagine personali (non tutte, altre fanno parte dei default). Ulteriori possibilità per ogni skin possono essere esplorate guardando il codice sorgente HTML di una pagina, in particolare alle classi e agli id; l'aspetto di tutti questi può essere ridefinito.

Un semplice esempio: in MediaWiki:Common.css è presente la seguente definizione, che come si può capire dai commenti lì presenti, imposta la dimensione delle note (più piccole del testo normale): 

ol.references {
   font-size: 90%;
}

Per personalizzare la dimensione, basta inserire una definizione equivalente nel proprio common.css (ad esempio rendendole come testo normale): 

ol.references {
   font-size: 100%;
}

L'anteprima delle pagine CSS 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.

CSS

Meglio il CSS nelle sottopagine utente o in un file locale?

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.

Selettori CSS

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:

  • :link – collegamenti - esempio: Aiuto:index (vedi un vs :link)
  • :link:link
  • :link:visited
  • :link#contentTop
  • :link.external - http://example
  • :link.extiw – interwiki link nel corpo della pagina
  • :link.image – link dall'immagine completa alla pagina di descrizione della pagina
  • :link.internal – collegamento al file stesso (Media:) e collegamenti dal thumbnail ed icona della lente d'ingrandimento verso la pagina di descrizione dell'immagine (notare che il colore e la dimensione del carattere specificata per a.internal sono applicabili solo al primo caso)
  • :link.new link rosso
  • body.ns-0, ..., body.ns-15 (namespace)
  • div#bodyContent
  • div#column-content
  • div#editsection
  • div#globalWrapper
  • div#tocindent
  • div.tocline
  • h1.firstHeading
  • h2
  • h3
  • img.tex TeX image
  • small – esempio
  • table.toc

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. [1]); 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:

  • #p-lang a

È possibile avere stili dipendenti da un attributo, per esempio con i selettori:

  • link[title ="User:username"]
    link[title ="pagename"]
    link[href ="full url "]

per codificare con un colore od enfatizzare particolari utenti (inclusi se stessi) e/o link a pagine particolari (come il grassetto delle pagine seguite nella pagina delle Ultime modifiche). Funziona con Opera ma non con IE. Vedi anche mw:Help:Watching pages#CSS.

Gli osservati speciali e le Ultime modifiche utilizzano due classi:

  • autocomment
    esempio
  • new (vedi sotto)

La pagina della cronologia ha la classe autocomment e:

  • user
  • minor

Quindi il font specificato per user si applica alla cronologia ma non negli osservati speciali o Ultime modifiche.

Pagina di modifica

  • Casella di modifica: textarea#wpTextbox1
example1
  • Oggetto della casella di modifica: input#wpSummary
example2

Principali blocchi di stili

  • column-content - spazio totale tra i margini dove si trova il testo.
  • content - lo sfondo bianco, il riquadro dal bordo sottile contenente la pagina principale.
  • firstHeading - la classe dell'head in cima ad ogni pagina
  • bodyContent - il contenuto della pagina principale all'interno del riquadro content
  • contentSub - il nome del wiki immediatamente sottostante il titolo principale ma sopra il corpo della pagina

La classe portlet è usata da tutti i blocchi div attorno al contenuto principale. I blocchi identificati dalla classe sono:

  • p-cactions - id della lista dei tab sopra il contenuto principale
  • p-personal - id per la lista dei link che include la pagina di login o logout in alto nella pagina.
  • p-logo - id per il blocco che contiene il logo (in alto a sinistra)
  • p-navigation - id per il blocco che contiene i link di navigazione sul lato sinistro della pagina
  • p-search - il blocco che contiene i bottoni di ricerca
  • p-tb - il blocco che contiene i link della toolbox

La parte in basso della pagina include i seguenti blocchi:

  • footer - l'intera barra in basso
  • f-poweredbyico - l'immagine powered che normalmente è nella parte destra della pagina
  • f-list - id della lista che contiene tutto il testo in basso nella pagina

Come eliminare la visualizzazione

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. Non sempre è supportato da screen reader e dispositivi mobili.

Stile che dipende da un parametro o da una variabile

Nomi degli attributi HTML variabili

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.

Esempi

/* 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(http://en.wikipedia.org/upload/wiki.png) 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; }

Stile del diff (differenze fra le versioni)

/* 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; }

Javascript

Il JavaScript è un linguaggio che determina alcuni comportamenti dinamici delle pagine Web. Il JavaScript di Wikipedia viene definito, ed è personalizzabile dall'utente registrato, attraverso pagine che sono generalmente corrispondenti a quelle dei CSS, ma hanno l'estensione .js, ad esempio MediaWiki:Common.js personalizzabile in Speciale:MiaPagina/common.js.


Pagine correlate

Collegamenti esterni

Dettagli sui CSS
source: https://it.wikipedia.org/wiki/Aiuto:Stile_utente