Conoscenza dei CSS e del framework LESS.
L'articolo elenca le classi css dei moduli adattivi disponibili al pubblico. È possibile utilizzare queste classi per definire lo stile di vari componenti di un modulo adattivo. Lo stile dei componenti di authoring, ad esempio finestre di dialogo e barre di stato contenenti avvisi, non rientra nell’ambito di questo articolo. Utilizzate questi costrutti di stile per creare stili (utilizzando CSS o Less) solo quando non è possibile creare stili di componenti utilizzando l'editor di temi editor di temi.
Il framework LESS semplifica l'uso di maiuscole e minuscole per personalizzare gli stili nei moduli adattivi. Il framework consente di definire gli stili mediante un set di variabili e funzioni (mixin). Il framework LESS consente di ridurre le dimensioni del codice bundle e di aumentarne la riutilizzabilità.
È possibile personalizzare gli stili di modulo adattivi nei seguenti modi:
È possibile modificare il tema di un modulo adattivo per assicurare che l'aspetto sia coerente con le pagine Web in cui il modulo adattivo è incorporato.
Le modifiche nell'aspetto generale del modulo adattivo che utilizzano le proprietà CSS in genere fanno parte di modifiche ai temi. Le modifiche principali allo "ok" e al funzionamento del modulo adattivo, come le modifiche nel layout e nella posizione dei componenti, non sono considerate modifiche ai temi.
In base al programma di avvio, il seguente set di proprietà CSS definisce il tema di una pagina Web:
Attualmente, le variabili LESS sono definite solo per queste proprietà dei vari elementi di un modulo adattivo.
Potete apportare modifiche all’aspetto, al layout, al posizionamento e alla visibilità degli elementi. Per eseguire questa operazione, create o aggiornate i file .css personalizzati in modo da includere i costrutti di stile elencati in questo articolo.
Per applicare uno stile a un modulo adattivo, aprire il modulo adattivo in per la modifica, aprire le proprietà del contenitore di modulo adattivo, specificare il percorso del file CSS personalizzato nella scheda di base. I costrutti di stile predefiniti del modulo adattivo vengono sostituiti con i costrutti elencati nel file .css personalizzato.
I componenti descritti in questo articolo dispongono di classi CSS predefinite. È possibile modificare le variabili per modificare gli stili nelle classi CSS. In alternativa, è possibile riscrivere l'intera classe. Questa sezione descrive le classi all'interno di componenti e stili che è possibile modificare utilizzando le variabili.
Un contenitore è il componente di primo livello. Altri pannelli e campi si trovano sotto il componente contenitore.
Classe CSS |
|
Descrizione variabili |
Descrizione variabili |
|
Colore di sfondo del contenitore |
|
Spaziatura per il contenitore |
|
Margine per il contenitore |
|
Colore font per il contenitore |
I moduli adattivi includono vari tipi di campi. Ogni campo ha un nome di classe univoco, che è il nome del campo. Il campo ha anche un nome di classe comune guideFieldNode
.
I campi includono etichette, widget, descrizione dell’Aiuto (descrizione lunga e breve) e icone della Guida dei campi (punto interrogativo).
Classe CSS |
|
Variabili |
Descrizione |
|
Spaziatura per il campo |
|
Colore del font del messaggio di errore del campo |
|
Dimensione del font del messaggio di errore del campo |
L'elemento HTML label utilizzato per il campo include le classi left o top a seconda che l'etichetta sia in alto o in basso a sinistra.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore del font per l'etichetta del campo |
|
Dimensione del font per l'etichetta del campo |
|
Proprietà di altezza riga CSS per l'etichetta del campo |
|
Proprietà spessore font CSS per l'etichetta del campo |
|
Margine per l'etichetta del campo |
Le regole CSS per l'etichetta vengono applicate utilizzando l'etichetta guideFieldLabel. Se siete un autore, ignorate questa regola per rendere visibili le modifiche personalizzate.
A seconda del tipo, i widget includono anche classi. Comunemente, i widget includono la classe guideFieldWidget
. I widget forniti con HTML normalmente utilizzano l'input standard dell'elemento HTML e selezionano. Lo stile viene applicato di conseguenza. Non è possibile formattare un widget personalizzato modificando le variabili.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore di sfondo per i widget (Non funziona per le caselle di controllo e i pulsanti di scelta) |
|
Colore del bordo per i widget |
|
Dimensione del bordo per i widget |
|
Raggio del bordo per i widget |
|
Tipo di bordo per i widget |
|
Tipo di messa a fuoco per i bordi dei widget |
|
Stile bordo consolidato dei widget |
|
Colore del testo all’interno del widget |
|
Dimensione del testo all’interno del widget |
|
Proprietà lineheight CSS per il widget |
|
Proprietà di spaziatura CSS per il widget |
|
Colore del bordo quando il widget è attivo |
|
Colore del bordo del widget per i campi obbligatori |
|
Colore di sfondo del widget per i campi obbligatori |
|
Colore di sfondo per il widget quando il campo è disattivato |
|
Colore del font per il widget quando il campo è disabilitato |
|
Colore del bordo del widget quando il campo è disattivato |
|
Altezza del widget (non funziona per casella di controllo e pulsante di scelta) |
|
Altezza per la casella di controllo e il pulsante di scelta. |
|
Altezza massima per un menu a discesa con più selezioni |
Lo stile per i campi attivi, obbligatori e disattivati è limitato utilizzando le variabili. Tuttavia, potete modificarlo ignorando gli stili. L'utilizzo di variabili è limitato principalmente per mantenere sotto controllo il numero di variabili. La limitazione può essere attenuata se l'aspetto di un campo cambia drasticamente perché si trova in uno degli stati discussi in precedenza.
Un autore può specificare il contenuto della Guida nei campi utilizzando i componenti Descrizione breve e lungo. Entrambi i componenti hanno una classe comune .guideHelpDescription
e un'altra classe .long
/ .short
, a seconda del tipo di descrizione. Il contenuto della Guida è racchiuso in un elemento paragrafo per sostituire lo stile della descrizione. La descrizione della Guida (lunga e breve) viene modificata utilizzando variabili che iniziano con widgetshelp, come indicato nella tabella seguente:
Variabili |
Descrizione |
|
Colore di sfondo della Guida lunga dei widget |
|
Colore del bordo della Guida lunga dei widget |
|
Colore del bordo dell'indicatore sinistro della Guida lunga dei widget |
|
Colore di sfondo della breve Guida dei widget |
|
Colore dei font della breve Guida dei widget |
|
Colore di sfondo della breve descrizione dei widget |
|
Colore dei font della breve descrizione comandi dei widget |
Il widget Condizioni generali (TnC
) consente di specificare termini e condizioni. Potete personalizzare il widget utilizzando le variabili descritte nella tabella seguente.
Variabili |
Descrizione |
tnc-unvisited |
Colore del font del collegamento tnc non visitato. |
tnc-visited |
Colore del font del collegamento tnc visitato. |
I pulsanti sono anche widget. Tuttavia, il loro stile è leggermente diverso dai widget. Nei moduli adattivi, uno dei seguenti è un pulsante:
Codice HTML per il pulsante:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Classe CSS |
Descrizione |
|
Fornisce icone per il pulsante |
|
Etichetta/didascalia pulsante Stili |
Variabili |
Descrizione |
|
Dimensione del bordo dei pulsanti |
|
Tipo bordo |
|
Proprietà di spaziatura CSS per il pulsante |
|
Dimensione del font per il pulsante |
|
Colore di sfondo per il pulsante |
|
Colore del font del pulsante |
|
Colore del bordo del pulsante |
|
Spaziatura per i pulsanti grandi (pulsanti con classe .buttonlarge) |
|
Dimensione del font per i pulsanti di grandi dimensioni |
|
Spaziatura per i pulsanti piccoli (pulsanti con classe .buttonsmall) |
|
Dimensione del font per i pulsanti di piccole dimensioni |
|
Colore di sfondo per i pulsanti informativi (pulsanti con classe .buttoninformative) |
|
Colore font per i pulsanti informativi |
|
Colore del bordo per i pulsanti informativi |
|
Colore di sfondo per i pulsanti con lo stile dell'avviso (pulsanti con la classe .buttonwarning) |
|
Colore font per i pulsanti con lo stile dell'avviso |
|
Colore del bordo per i pulsanti con lo stile dell'avviso |
|
Colore di sfondo per i pulsanti di avviso (pulsanti con classe .buttonalert) |
|
Colore font per i pulsanti di avviso |
|
Colore del bordo per i pulsanti di avviso |
Per i widget, viene visualizzato un punto interrogativo quando un autore aggiunge una lunga descrizione al contenuto della Guida. Viene utilizzata l'icona predefinita fornita in bootstrap. Per utilizzare un'icona personalizzata, potete personalizzare le icone di avvio.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore dell'icona |
|
Colore dell’icona quando il mouse vi si trova sopra |
È possibile modificare il tema colore per le righe di intestazione e corpo di una tabella utilizzando le seguenti variabili.
Variabili |
Descrizione |
|
Colore di sfondo per la riga di intestazione. Il valore predefinito è |
|
Colore di sfondo per la riga corpo dispari. Il valore predefinito è |
|
Colore di sfondo per la riga corpo pari. Il valore predefinito è |
Il widget Allegato file dei moduli adattivi consente di caricare i file. Potete inoltre personalizzare il widget utilizzando le variabili.
Variabili |
Descrizione |
|
Spaziatura per i file visualizzati nel widget |
|
Colore di sfondo per l’elemento del file |
|
Colore del bordo per il bordo superiore |
|
Colore del font per l’elemento del file |
|
Colore dell’icona Anteprima (icona Bootstrap) nel widget |
|
Altezza del commento per l’elemento del file |
Esistono quattro tipi di schede di navigazione. Tra queste, le schede a sinistra, in alto, nella procedura guidata e nella fisarmonica. Ogni navigatore ha una classe diversa.
Naviagatore |
Classe CSS |
|
.Accordion-navigators |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.Wizard-navigators |
Di seguito è riportato il codice HTML per l'elemento del navigatore tabulazione (simile alle schede di avvio):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
`<button name=“Add” class=“Add”/%3E%60%60%3Cbutton%20name=?lang=it"Remove" class=“Remove”/%3E%60%60%3C/div%3E%60%60%3C/a%3E%60%60%3C/div%3E%60%60…%20panel%20content%20…%60%60%3C/div%3E%60%60%3C/div%3E%60Potete%20modificare%20lo%20stile%20del%20navigatore%20utilizzando%20le%20regole%20CSS%20che%20selezionano%20gli%20elementi%20utilizzando%20i%20selettori%20discendenti.%20Ad%20esempio,%20per%20aggiungere%20uno%20stile%20decorativo%20di%20testo%20al%20tag%20di%20ancoraggio:Navigatore%20tabulazioni%20in%20alto:%60.tab-navigators%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Tab%20navigator%20on%20left:%60%60.tab-navigators-vertical%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Accordion%20navigator:%60%60.accordion-navigators%20.guideHeader%20a%20.guideSummary%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Wizard%20navigator:%60%60.wizard-navigators%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60Inoltre,%20esistono%20classi%20per%20assegnare%20uno%20stile%20ai%20navigatori%20tabulazione%20(sia%20a%20sinistra%20che%20in%20alto?lang=it) in base al fatto che abbiano navigatori nidificati/secondari/secondari.
Classe CSS |
Descrizione |
|
Navigatori tabulazione (sinistra e superiore) con navigatori nidificati/secondari/secondari |
|
Navigatori tabulazione (sinistra e superiore) senza navigatori nidificati/secondari/secondari |
La classe guideNavIcon fornisce un'icona predefinita ai navigatori delle schede (sia sinistro che superiore) e ai navigatori della procedura guidata.
Classe CSS |
|
Potete modificare l'icona di un particolare navigatore fornendo una classe CSS nel pannello in fase di creazione, ad esempio <CLASS_NAME>. Per l'icona del navigatore è possibile aggiungere un <CLASS_NAME>_nav.
Variabili |
Descrizione |
Navigatori tabulazione |
|
|
Colore di sfondo per l'intero navigatore tabulazione |
|
Colore di sfondo per la scheda |
|
Colore del font per la scheda |
|
Colore di sfondo per la scheda al passaggio del mouse |
|
Colore font per la scheda al passaggio del mouse |
|
Colore di sfondo quando il pannello è attivo |
|
Colore del font quando il pannello è attivo |
|
Colore di sfondo quando l'espressione di completamento del pannello restituisce true |
|
Colore del font quando l'espressione di completamento del pannello restituisce true |
|
Colore di sfondo quando il pannello è stato attivo una volta ma l'espressione di completamento restituisce falso |
|
Colore del font quando il pannello è stato attivo una volta ma l'espressione di completamento restituisce falso |
|
Colore del bordo della scheda |
|
Dimensione del font per la scheda |
|
Spaziatura per la scheda |
|
Margine per la scheda |
|
Margine per le schede verticali |
|
Dimensione del bordo per le schede |
|
Altezza minima delle schede |
|
Rientro delle schede nidificate |
Navigatori procedura guidata |
|
|
Colore di sfondo per l'intero navigatore della procedura guidata |
|
Colore di sfondo per la procedura guidata |
|
Colore font per la procedura guidata |
|
Colore di sfondo quando il pannello è attivo |
|
Colore del font quando il pannello è attivo (attivo) |
|
Colore di sfondo quando l'espressione di completamento del pannello restituisce true |
|
Colore del font quando l'espressione di completamento del pannello restituisce true |
|
Colore di sfondo quando il pannello è stato attivo una volta ma l'espressione di completamento restituisce falso |
|
Colore del font quando il pannello è stato attivato una volta ma l'espressione di completamento restituisce falso |
|
Colore per la procedura guidata |
|
Dimensione font per la procedura guidata |
|
Margine per la procedura guidata |
|
Dimensione del bordo per la procedura guidata |
|
Colore del bordo del punto elenco dello strumento di navigazione guidato (prefisso della didascalia/etichetta) |
|
Colore di sfondo della barra di avanzamento della procedura guidata |
|
Colore di riempimento per la barra di avanzamento |
Navigatori Accordion |
|
|
Spaziatura per la struttura a soffietto |
Un pannello include una barra degli strumenti opzionale e il relativo contenuto.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore di sfondo per il pannello |
|
Dimensione del font per il testo del pannello |
|
Colore del font per il testo del pannello |
|
Margine nel pannello |
|
Dimensione del font della descrizione del pannello |
|
Spaziatura della descrizione del pannello |
|
Colore di sfondo per la guida del pannello |
|
Colore del bordo indicatore per la guida del pannello |
Il nodo del pannello è diviso in navigatori e contenuti.
non esiste un componente di stile separato per il contenuto. Le variabili descritte vengono applicate sia al navigatore che al contenuto.
Il pannello superiore (RootPanel) non dispone di questa classe.
Queste variabili influenzano la barra dell’intestazione visibile su un dispositivo mobile o su dispositivi con schermo piccolo che contengono il titolo del pannello e i navigatori successivi e posteriori.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore di sfondo per la barra di intestazione |
|
Colore del font per il testo all’interno della barra dell’intestazione |
|
Spaziatura per la barra dell’intestazione |
Queste variabili influenzano l’indicatore di scorrimento, ossia una freccia arancione che viene visualizzata su un dispositivo mobile o su un dispositivo a schermo piccolo. Un indicatore di scorrimento indica che è presente del contenuto oltre la parte visibile dello schermo. Potete scorrere verso il basso per visualizzarlo. Quando si tocca la fine del contenuto, la freccia scompare.
Classe CSS |
|
Variabili |
Descrizione |
|
Posizione fissa dello scorrevole dal basso |
|
Posizione fissa dello scorrevole da destra |
|
Larghezza dello scorrevole |
|
Altezza dello scorrevole |
Queste variabili nella tabella seguente influiscono sul layout della barra degli strumenti fissa per dispositivi mobili.
Classe CSS |
|
Variabili |
Descrizione |
|
Posizione fissa della barra degli strumenti, sul dispositivo mobile, dal basso |
|
Posizione fissa della barra degli strumenti, sul dispositivo mobile, dall'alto |
|
Posizione fissa della barra degli strumenti, sul dispositivo mobile, da sinistra |
|
Posizione fissa della barra degli strumenti, sul dispositivo mobile, da destra |
|
Posizione fissa dell'icona dei pulsanti della barra degli strumenti, dall'alto |
|
Larghezza dell'icona dei pulsanti della barra degli strumenti sul dispositivo mobile |
|
Altezza dell'icona dei pulsanti della barra degli strumenti sul dispositivo mobile |
|
Colore di sfondo della barra degli strumenti sul dispositivo mobile |
Anche il tema Iscrizione semplice in /etc/clientlibs/fd/af/guidetema/simpleEnrollment e la categoria guide.theme.simpleEnrollment
presentano alcune variabili. Se desiderate creare un tema per migliorare la semplice iscrizione, potete utilizzare le seguenti "variabili aggiuntive:
Variabili |
Descrizione |
|
Colore di sfondo per il pulsante attivo |
|
Colore di sfondo per il pulsante al passaggio del mouse |
|
Raggio del pulsante |
|
Colore di sfondo per i pulsanti di navigazione (Indietro/Avanti) |
|
Colore di sfondo per i pulsanti di navigazione (Indietro/Avanti) al passaggio del mouse |
|
Colore di sfondo per i navigatori della procedura guidata e la barra di avanzamento corrispondente, al primo rendering. |
|
Colore di sfondo per il navigatore della procedura guidata corrente/attiva e la barra di avanzamento corrispondente |
|
Colore di sfondo per i navigatori della procedura guidata e la barra di avanzamento corrispondente visitata. |
|
Bordo bipolazione del contenitore in navigatori e pannelli |
|
Colore del bordo inferiore che separa le schede per le schede a sinistra (navigatori tabulazione). |
|
Colore di sfondo per i navigatori nidificati/secondari/secondari |