Wikipedia:Monobook.css

Dae Wikipedia, s'entziclopedia lìbera.

Wikipedia permitet a sos utentes assentados de modificare sa bisura de sas pàzinas a piaghere issoro, sarbende unu fozu de istile in sa pàzina "Utente:nòmene utente/monobook.css" (ue "monobook.css" cheret iscritu totu piticu). A segunda de sas modìficas chi si cheret fagher, bi cherent connoschèntzias prus o mancu fundas de CSS. Custa pàzina dat una prima introdutzione, pro aprofondire si cussizat de bisitare su zassu de su W3C, chi addae a sos istandard ufitziales oferit finasa una regorta de ligàmenes a zassos cun tutorial a paritzos livellos.

Contents

[edit] Introdutzionedda

Una pàzina web moderna de norma la cumponent nessi duas de sas partes chi sighint:

  • Sa pàzina in formadu HTML cun sos ligàmenes testuales e s'istrutura (intestatziones, paràgrafos, listas, tabeddas, etc.). In s'acasu de Wikipedia, su software trasformat su wiki-listadu in pàzinas HTML.
  • Su fozu de istile in formadu CSS chi definit totu sos aspetos visuales de sa pàzina (lìteras, colores, mesuras, màrghines, bordos, fundales, etc.). Su de Wikipedia est http://sc.wikipedia.org/skins/monobook/main.css (istile "monobook"), cun unas cantas azuntas pro sa versione sarda in MediaWiki:Monobook.css.

Onzi elementu de una pàzina HTML lu marcant sos, gai los narant, "tag". Pro esempru, unu paràgrafu de iscritura comintzat cun su tag <p> e acabat cun </p>. In su fozu de istile "monobook" predefinidu s'agatant sas rias

p {
   margin: 0.4em 0em 0.5em 0em;
   line-height: 1.5em;
}

ue sa "p" (inoghe sena parèntesis angulares) sinnalat ca sas propriedades chi sighint si ligant a totu sos paràgrafos de sa pàzina. Totu sas propriedades de custu elementu sunt intra parèntesis grafas {}. Su balore (pro esempru "1.5em") est separadu dae sa propriedade (pro esempru "line-height", est a narrer s'istesiada intra sas rias) cun unu puntu dòpiu e est sighidu dae unu puntu e vìrgula.

Per differenziare l'aspetto degli elementi dello stesso tipo, si possono usare classi e 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".

[edit] Personalizzare l'aspetto di Wikipedia

Inserendo un foglio di stile personale nella sottopagina "nome utente/monobook.css", si può modificare a piacimento l'aspetto di Wikipedia; ovviamente avrà effetto solo quando si è effettuato il login. Il foglio di stile personale viene inserito dopo quello predefinito, consentendo così di sovrascrivere qualsiasi propietà assegnata di default. Per esempio, per impostare dei caratteri più grandi si può inserire la riga

body { font-size: medium; }

nel foglio di stile personale.

[edit] 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

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

[edit] Le parti della pagina

La seguente lista mostra le principali classi e id della struttura delle pagine di Wikipedia (chi ha la pazienza di farlo, trova tutte le classi e id assegnate dal software spulciando il sorgente HTML delle pagine di Wikipedia ─ però non è molto bello da leggere):

  • #globalWrapper: elemento ("div") che racchiude tutta la pagina
    • #column-content e #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; }

[edit] Esempi di personalizzazioni

  • Una skin ispirata ai vecchi monitor a fosfori verdi: Utente:Kormoran/monobook.css
  • Io ho messo una fascetta arancione in testa alla pagina e cambiato il carattere standard per tutte le pagine: Utente:Paginazero/monobook.css
  • Niente di graficamente elaborato da parte mia, ma una piccola comodità: Al posto della barra di navigazione a sinistra c'è una barra menu che rimane fissa anche quando la pagina scorre (vedasi immagine). Testato con Opera 7.54/Linux e Mozilla Firefox 1.0/Linux, non funziona con Internet Explorer. Usate liberamente, ma ricordate di citare l'autore come richiesto dalla licenza ;-) Utente:Leonard Vertighel/monobook.css
  • Io ho fatto una via di mezzo tra la es.wiki e quella di default. Utente:Helios89/monobook.css

[edit] Voci correlate

Mono

Àteras limbas