Wikibooks:Monobook.css: differenze tra le versioni

Wikibooks, manuali e libri di testo liberi.
Contenuto cancellato Contenuto aggiunto
Ramac (discussione | contributi)
Correggo tag deprecato
 
Riga 7: Riga 7:
* Il foglio di stile in formato [[w:CSS|CSS]] che sostanzialmente definisce tutti gli aspetti visivi della pagina (caratteri, colori, dimensioni, margini, bordi, sfondi, ecc.). Quello di [[w:|Wikipedia]] si trova all'indirizzo http://it.wikipedia.org/skins/monobook/main.css (stile "monobook"), con alcune aggiunte per la versione italiana in [[MediaWiki:Monobook.css]].<br/>
* Il foglio di stile in formato [[w:CSS|CSS]] che sostanzialmente definisce tutti gli aspetti visivi della pagina (caratteri, colori, dimensioni, margini, bordi, sfondi, ecc.). Quello di [[w:|Wikipedia]] si trova all'indirizzo http://it.wikipedia.org/skins/monobook/main.css (stile "monobook"), con alcune aggiunte per la versione italiana in [[MediaWiki:Monobook.css]].<br/>
Ogni '''elemento''' di una pagina HTML viene contrassegnato con dei cosiddetti ''"tag"''. Per esempio, un paragrafo di testo inizia con il ''tag'' <code>&lt;p&gt;</code> e finisce con <code>&lt;/p&gt;</code>. Nel [http://it.wikipedia.org/skins/monobook/main.css foglio di stile "monobook" di ''default''] si trovano le righe
Ogni '''elemento''' di una pagina HTML viene contrassegnato con dei cosiddetti ''"tag"''. Per esempio, un paragrafo di testo inizia con il ''tag'' <code>&lt;p&gt;</code> e finisce con <code>&lt;/p&gt;</code>. Nel [http://it.wikipedia.org/skins/monobook/main.css foglio di stile "monobook" di ''default''] si trovano le righe
<source lang="css">p {
<syntaxhighlight lang="css">p {
margin: 0.4em 0em 0.5em 0em;
margin: 0.4em 0em 0.5em 0em;
line-height: 1.5em;
line-height: 1.5em;
}</source>
}</syntaxhighlight>
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.
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''' 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":
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":
<source lang="css">table.diff { background:white; }</source>
<syntaxhighlight lang="css">table.diff { background:white; }</syntaxhighlight>
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'' <code>&lt;table class="diff"&gt;</code>.) 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.
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'' <code>&lt;table class="diff"&gt;</code>.) 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":
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":
<source lang="css">.error {
<syntaxhighlight lang="css">.error {
color: red;
color: red;
font-size: larger;
font-size: larger;
}</source>
}</syntaxhighlight>
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.
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:
Infine ci si può riferire anche solo agli elementi che si trovano all'interno di certi altri elementi:
<source lang="css">#toc p { margin: 0 }</source>
<syntaxhighlight lang="css">#toc p { margin: 0 }</syntaxhighlight>
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
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
<source lang="css">p#toc { margin: 0 }</source>
<syntaxhighlight lang="css">p#toc { margin: 0 }</syntaxhighlight>
che si riferisce ai paragrafi che hanno loro stessi l'''id'' "toc".
che si riferisce ai paragrafi che hanno loro stessi l'''id'' "toc".
{{Vedi anche|CSS/Selettori}}
{{Vedi anche|CSS/Selettori}}
==Personalizzare l'aspetto di Wikibooks==
==Personalizzare l'aspetto di Wikibooks==
Inserendo un foglio di stile personale nella sottopagina "''nome utente''/monobook.css", si può modificare a piacimento l'aspetto di Wikibooks; ovviamente avrà effetto solo quando si è effettuato il ''login''. Il foglio di stile personale viene inserito dopo quello predefinito, consentendo così di sovrascrivere qualsiasi proprietà assegnata di ''default''. Per esempio, per impostare dei caratteri più grandi si può inserire la riga
Inserendo un foglio di stile personale nella sottopagina "''nome utente''/monobook.css", si può modificare a piacimento l'aspetto di Wikibooks; ovviamente avrà effetto solo quando si è effettuato il ''login''. Il foglio di stile personale viene inserito dopo quello predefinito, consentendo così di sovrascrivere qualsiasi proprietà assegnata di ''default''. Per esempio, per impostare dei caratteri più grandi si può inserire la riga
<source lang="css">body { font-size: medium; }</source>
<syntaxhighlight lang="css">body { font-size: medium; }</syntaxhighlight>
nel foglio di stile personale.
nel foglio di stile personale.


Riga 55: Riga 55:
* <code>.ns-15</code>: Discussioni categoria
* <code>.ns-15</code>: Discussioni categoria
Se volessimo impostare dei caratteri più grandi solo per le pagine nel ''namespace'' principale, potremmo mettere
Se volessimo impostare dei caratteri più grandi solo per le pagine nel ''namespace'' principale, potremmo mettere
<source lang="css">body.ns-0 { font-size: medium; }</source>
<syntaxhighlight lang="css">body.ns-0 { font-size: medium; }</syntaxhighlight>
o più semplicemente
o più semplicemente
<source lang="css">.ns-0 { font-size: medium; }</source>
<syntaxhighlight lang="css">.ns-0 { font-size: medium; }</syntaxhighlight>
Ricordandoci di quanto detto nell'introduzione possiamo anche modificare l'aspetto dei paragrafi nel ''namespace'' principale, lasciandolo immutato negli altri:
Ricordandoci di quanto detto nell'introduzione possiamo anche modificare l'aspetto dei paragrafi nel ''namespace'' principale, lasciandolo immutato negli altri:
<source lang="css">.ns-0 p { margin:0; text-indent:2em; }</source>
<syntaxhighlight lang="css">.ns-0 p { margin:0; text-indent:2em; }</syntaxhighlight>
Se invece volessimo applicare questo stile a tutti i ''namespace'', basterebbe omettere la classe "ns-0":
Se invece volessimo applicare questo stile a tutti i ''namespace'', basterebbe omettere la classe "ns-0":
<source lang="css">p { margin:0; text-indent:2em; }</source>
<syntaxhighlight lang="css">p { margin:0; text-indent:2em; }</syntaxhighlight>
===Le parti della pagina===
===Le parti della pagina===
Riga 84: Riga 84:


Se quindi si mette
Se quindi si mette
<source lang="css">#globalWrapper { font-size: 150% }</source>
<syntaxhighlight lang="css">#globalWrapper { font-size: 150% }</syntaxhighlight>
si aumenta la dimensione dei caratteri di tutta la pagina del 50%. Invece
si aumenta la dimensione dei caratteri di tutta la pagina del 50%. Invece
<source lang="css">#column-content { font-size: 150% }</source>
<syntaxhighlight lang="css">#column-content { font-size: 150% }</syntaxhighlight>
aumenta la dimensione dei caratteri del contenuto, lasciando immutati i link di navigazione.
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,
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,
<source lang="css">body { color: green }</source>
<syntaxhighlight lang="css">body { color: green }</syntaxhighlight>
''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 è
''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 è
<source lang="css">p, h1, h2, h3, h4, h5, h6 { color:green; }</source>
<syntaxhighlight lang="css">p, h1, h2, h3, h4, h5, h6 { color:green; }</syntaxhighlight>


==Esempi di personalizzazioni==
==Esempi di personalizzazioni==
Riga 120: Riga 120:


{{cassetto|titolo=Codice|testo=
{{cassetto|titolo=Codice|testo=
<source lang="css">
<syntaxhighlight lang="css">
/* Style pour les pages de discussion ; gestion de la coloration indentative */
/* Style pour les pages de discussion ; gestion de la coloration indentative */
.ns-1 dd, .ns-3 dd, .ns-5 dd, .ns-7 dd, .ns-9 dd,
.ns-1 dd, .ns-3 dd, .ns-5 dd, .ns-7 dd, .ns-9 dd,
Riga 199: Riga 199:
.ns-105 dl dl dl dl dl dl dl dl dl dl
.ns-105 dl dl dl dl dl dl dl dl dl dl
{ background-color: #FFFFEE; }
{ background-color: #FFFFEE; }
</syntaxhighlight>
</source>
}}
}}



Versione attuale delle 19:39, 4 giu 2020

Wikibooks consente agli utenti registrati di modificare l'aspetto delle pagine a loro piacimento, salvando un foglio di stile nella pagina "Utente:nome utente/monobook.css" (dove "monobook.css" va scritto tutto minuscolo). 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.

Breve introduzione[modifica]

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.). Quello di Wikipedia si trova all'indirizzo http://it.wikipedia.org/skins/monobook/main.css (stile "monobook"), con alcune aggiunte per la versione italiana in MediaWiki:Monobook.css.

Ogni elemento di una pagina HTML viene contrassegnato con dei cosiddetti "tag". Per esempio, un paragrafo di testo inizia con il tag <p> 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 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".

Per approfondire, vedi CSS/Selettori.

Personalizzare l'aspetto di Wikibooks[modifica]

Inserendo un foglio di stile personale nella sottopagina "nome utente/monobook.css", si può modificare a piacimento l'aspetto di Wikibooks; ovviamente avrà effetto solo quando si è effettuato il login. Il foglio di stile personale viene inserito dopo quello predefinito, consentendo così di sovrascrivere qualsiasi proprietà 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.

I namespace[modifica]

Semplificando un po', si può dire che l'elemento "body" è la pagina stessa. Questo ci consente di capire come personalizzare l'aspetto dei vari namespaces: Il software di Wikibooks 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 omettere la classe "ns-0":

p { margin:0; text-indent:2em; }

Le parti della pagina[modifica]

La seguente lista mostra le principali classi e id della struttura delle pagine di Wikibooks (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; }

Esempi di personalizzazioni[modifica]

Fosfori verdi[modifica]

  • Prendendo spunto dalla skin ispirata ai vecchi schermi ai fosfori verdi di Kormoran, ho apportato alcune modifiche, tra cui: riportato il colore delle pagine a quello standard e cambiato il logo con uno più diabolico, in più ispiramdomi alla wikipedia spagnola ho aggiunto delle immagini alle linguette delle pagine, che però in fase di modifica spariscono.. (fixato)
    • icone nei tab delle pagine

Colori lievi[modifica]

  • Questa skin è semplicissima, i colori sono per la maggiorparte quelli originali, uniche modifiche costituiscono nella barra dell'utente in cima, di un colore verde chiaro con scritte azzurre, i menù a sinistra, con intestazione verde chiaro e sfondo azzurro molto lieve, piccole icone nelle linguette di tutte le tipologie di pagine (discussione, modifica, cronologia, sposta, purge, template, aiuto, utente, ecc), Sostituito il logo e colorata la pagina delle ultime modifiche. (Aggiunto al css di default)Inoltre è stato:
    • Evidenziati i redirect nella pagina dei Prefissi
    • Migliorata l'evidenziazione delle modifiche nei diff
    • Cambiato il colore dell'avviso di nuovi messaggi
    • Colorato di rosso il link " [modifica] "

Indentazione discussioni[modifica]

Per seguire più facilmente le lunghe discussioni, ad esempio al bar, è possibile colorare con diversi colori ognuno degli interventi e agevolare così la lettura:

Il codice per l'evidenziazione delle indentazioni in uso


Voci correlate[modifica]