Stili modulo

Concetti di stile

Un modulo di inserimento dati per un modulo ha una scheda Avanzate. I suoi campi variano a seconda del tipo di modulo e puoi verificarlo tu stesso selezionando un modulo Menu e confrontandolo con un modulo di accesso o un modulo Percorso. Vedrai i seguenti tre campi del modulo relativi allo stile:

• Classe modulo è un campo di testo che consente di aggiungere una propria classe CSS al tag contenitore del modulo, solitamente un <div>.
• Classe intestazione è un campo di testo che consente di aggiungere una propria classe CSS al tag dell'intestazione, di default un tag <h3>.
• Stile del modulo è una lista che consente di selezionare uno tra diversi stili standard. La lista contiene none, html5, outline, table, card e noCard. Il valore predefinito è card, dagli stili del template Cassiopeia.

Puoi provare le opzioni di Stile del modulo modificando un modulo e cambiando il valore per vedere l'effetto sulla visualizzazione del sito.

• html5 genera <div class="moduletable ">
• none rimuove completamente il <div> esterno e anche il tag <h3> del modulo.
• outline genera <div class="mod_preview_info">, con le informazioni di posizione e stile che sostituiscono il tag <h3> del modulo.
• table genera un layout a tabella che inizia con <table class="moduletable ">, con il precedente tag h3 che ora diventa un tag <th>.
• card genera <div class="sidebar-right card ">, l'impostazione predefinita.
• noCard genera <div class="sidebar-right no-card ">

La classe modulo

A questo punto devi conoscere un minimo i Cascading Style Sheets o CSS. Se inserisci una singola parola nel campo Classe modulo, ad esempio green poiché le classi CSS sono per convenzione tutte minuscole, e con lo Stile modulo impostato su inherited, l'output contiene <div class="sidebar-right card green">.

Non c'è alcun cambiamento visibile nell'aspetto del Sito perché la classe green non è definita. Per definirla, occorre fare una voce nel file user.css del template.

Dal menu Amministratore:

• Seleziona Sistema / Template del sito / Template e file di Cassiopeia.
• Seleziona Nuovo file dalla Barra degli strumenti
• Seleziona css nella colonna di sinistra, la destinazione per il nuovo file.
• Digita user nel campo Nome file.
• Seleziona css dalla lista Tipo file.
• Seleziona il pulsante Crea.

Ora puoi aprire la cartella css per trovare e aprire il file user.css per la modifica. Inserisci queste dichiarazioni di stile e nota l'ortografia americana di color:

.sidebar-right.card.green {
    background-color: #ddffdd;
}
.sidebar-right.card.green .card-body {
    background-color: #eeffee;
}

Lo stile avrebbe potuto usare solo .green, ma ciò avrebbe potuto influenzare altri tag con quello stile su altre pagine.

La classe intestazione

Torna al modulo di modifica del modulo e aggiungi blue nel campo Classe intestazione. Il modulo non presenta alcun cambiamento visibile sul sito, ma l'intestazione ora appare come <h3 class="card-header blue">. Torna a modificare il file user.css per aggiungere una voce per lo stile dell'intestazione:

.card-header.blue {
    color: navy;
}

L'intestazione del modulo è ora blu scuro. Esistono diversi modi per specificare il colore in CSS. I più comuni sono il formato esadecimale e i nomi di colore standard. Approfondisci l'argomento altrove!

Sfida CSS

• Cambia il colore del bordo del modulo in blu navy!
• Cambia anche il bordo inferiore dell'intestazione.
• Applica questo stile a più moduli invece che a uno solo alla volta