User Documentation Informazioni sui fogli di stile a cascata
Una pagina del sito generata da Joomla! è composta da tag HTML con attributi di stile sotto forma di dichiarazioni di classe. Ad esempio, un'intestazione all'interno di un articolo potrebbe essere <h3 class="special-warning">Attenzione!</h3>. Questa intestazione potrebbe essere visualizzata con un carattere più grande, colori diversi per testo e sfondo e magari un bordo e un'icona di avviso. Gli stili della classe verrebbero definiti nel file user.css del template, in questo modo:
h3.special-warning {
color: #900;
background-color: #fee;
border: 1px solid #900;
padding: 1rem;
font-size: 2rem;
}
Questo funziona perché il foglio di stile user.css viene caricato per ultimo e qualsiasi stile in esso contenuto ha la precedenza sugli stessi stili presenti nei file css caricati in precedenza. Lo stile special-warning non si applica ad altri tag <h3>, solo a quelli con questa classe specifica. Funziona all'interno di un articolo perché lì si digita il nome della classe stessi.
Ma cosa succede se si desidera applicare uno stile a un modulo o a un'intera pagina? Ad esempio, si potrebbero applicare colori di sfondo diversi a moduli o pagine differenti. Oppure si potrebbe rendere lo stile dell'intestazione della pagina iniziale diverso da quello delle intestazioni di altre pagine. Tutto questo può essere ottenuto aggiungendo nomi di classe nel modulo di modifica del modulo o nel modulo di modifica della voce di menu. Le classi di stile vengono quindi inserite nel file user.css.
Stili dei moduli
Questo semplice esempio applica stili personalizzati al modulo di accesso e al suo titolo. La seguente schermata mostra i nomi degli stili inseriti nella scheda Avanzate del modulo di modifica Moduli: Login. La Classe modulo è stata impostata su make-me-light-green e la Classe intestazione è stata impostata su make-me-dark-green. Nota che è possibile includere segni meno o trattini bassi nei nomi delle classi, ma gli spazi separano nomi di classe diversi.
Le seguenti dichiarazioni di stile sono utilizzate nel file user.css:
.make-me-light-green {
background-color: #efe;
border-color: darkgreen;
}
.make-me-dark-green {
color: darkgreen;
border-color: #264f71;
}
Fate attenzione al punto (.) che viene usato in css per definire una classe con quel nome. Il punto non deve essere usato nel modulo di inserimento dati del modulo. Il risultato in questo esempio è il seguente:
In basso nell'immagine è mostrato il pannello degli Strumenti per sviluppatori del browser con il tag <div> contenitore del modulo Login selezionato. Si può notare che lo stile Classe modulo personalizzato è stato aggiunto agli stili già definiti nel template del modulo. La riga successiva mostra il tag <h3> con la Classe intestazione personalizzata aggiunta agli stili già definiti.
Lo stile di questo modulo può piacere o meno! Ma questa è solo una lezione su come farlo, non su cosa costituisca una buona combinazione di colori!
Stili di pagina
Ci sono diversi modi per personalizzare l'aspetto generale di una pagina. Tutti funzionano tramite il modulo Menu: modifica voce:
- La scheda Dettagli ha un'opzione Stile template dalla quale puoi selezionare un template specifico da usare.
- La scheda Layout blog ha i campi Classe articolo principale e Classe articolo in cui puoi digitare un nome di classe.
- La scheda Opzioni ha il campo Scegli un layout dal quale puoi scegliere tra i layout disponibili per tutti gli elementi.
- La scheda Tipo di link ha campi per Classe link, Classe icona link e Classe immagine.
- La scheda Visualizzazione pagina ha un campo per la Classe pagina.
È proprio quest'ultima voce della lista ad essere trattata in questo articolo. Cosa succede se in questo campo si inserisce make-me-aliceblue? E se nel file user.css viene inserito quanto segue:
.make-me-aliceblue {
background-color: aliceblue;
}
La classe viene aggiunta al tag body della pagina:
