Vai al contenuto

Aiuto:Stile utente

Wikibooks, manuali e libri di testo liberi.

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 Utente:TUONOME/monobook.css contenente il CSS che si vuole utilizzare.

Generale

[modifica | modifica sorgente]

Nota: nella configurazione predefinita, gli stili dell'utente sono ignorati. Per abilitare questa possibilità ocoorre 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 [1]: 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.wikibooks.org/style/monobook/main.css e MediaWiki:Monobook.css o simili utilizzando il proprio 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.wikibooks.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!).

Vedi anche Help:Sitewide css wiki page.

CSS

[modifica | modifica sorgente]

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

[modifica | modifica sorgente]

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

[modifica | modifica sorgente]

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: help:index (vedi a vs :link)
  • :link:link
  • :link:visited
  • :link#contentTop
  • :link.external - http://example
  • :link.extiw – interwiki link nel corpo della pagina - it:esempio
  • :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) - Media:example
  • :link.new example
  • 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. [2]); 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 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. Vedi anche 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

[modifica | modifica sorgente]
  • Casella di modifica: textarea#wpTextbox1
example1
  • Oggetto della casella di modifica: input#wpSummary
example2

Principali blocchi di stili

[modifica | modifica sorgente]
  • column-content - spazio totale tra i margini dove si trova il testo.
  • content - lo sfondo bianco, il riquadro dal bordo sottile contenete 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 contgenuto 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 log (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

[modifica | modifica sorgente]

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}".

Style depending on a parameter or variable

[modifica | modifica sorgente]

Variable class or id

[modifica | modifica sorgente]

Nomi degli attributi HTML variabili

[modifica | modifica sorgente]

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.

Variable style parameter value

[modifica | modifica sorgente]

Esempi

[modifica | modifica sorgente]
/* 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; }

-->

Angoli arrotondati con Mozilla

[modifica | modifica sorgente]
[modifica | modifica sorgente]
[modifica | modifica sorgente]

Make the user toolbar a sidebox

[modifica | modifica sorgente]

Fix the sidebar's position while you scroll

[modifica | modifica sorgente]

Monobook menus with serif fonts in the content area

[modifica | modifica sorgente]
[modifica | modifica sorgente]

Stile del diff (differenze fra le versioni)

[modifica | modifica sorgente]
/* 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; }

Collegamenti esterni sul CSS

[modifica | modifica sorgente]

Javascript

[modifica | modifica sorgente]

Voci correlate

[modifica | modifica sorgente]
Estratto da "https://it.wikibooks.org/w/index.php?title=Aiuto:Stile_utente&oldid=382380"