Conoscenza del CSS e del framework LESS.
Nell’articolo sono elencate le classi css di moduli adattivi disponibili al pubblico. Puoi sfruttare queste classi per assegnare uno stile a vari componenti di un modulo adattivo. Lo stile dei componenti di authoring, come le finestre di dialogo e le barre di stato che visualizzano gli avvisi, esula dall’ambito di questo articolo. Utilizza questi costrutti di stile per creare stili (utilizzando CSS o meno) solo quando non sei in grado di assegnare stili ai componenti utilizzando editor temi.
Il framework LESS semplifica il caso d’uso per personalizzare gli stili nei moduli adattivi. Il framework consente di definire gli stili utilizzando un set di variabili e funzioni (mixin). Il framework LESS consente di ridurre le dimensioni del codice in bundle e di aumentarne la riutilizzabilità.
Puoi personalizzare gli stili dei moduli adattivi nei seguenti modi:
Puoi modificare il tema di un modulo adattivo per assicurarti che il suo aspetto sia coerente con le pagine web in cui il modulo adattivo è incorporato.
Le modifiche dell’aspetto generale del modulo adattivo che utilizzano proprietà CSS fanno generalmente parte delle modifiche al tema. Le modifiche principali dell’espressione "ok and feel" del modulo adattivo, come le modifiche di layout e posizionamento dei componenti, non sono considerate modifiche del tema.
In base al bootstrap, il seguente insieme di proprietà CSS definisce il tema di una pagina web:
Attualmente, le variabili LESS sono definite solo per queste proprietà dei vari elementi in un modulo adattivo.
Potete apportare modifiche all'aspetto, al layout, al posizionamento e alla visibilità degli elementi. Per eseguire questa operazione, crea o aggiorna i file .css personalizzati per includere i costrutti di stile elencati in questo articolo.
Per applicare uno stile a un modulo adattivo, apri il modulo adattivo in per la modifica, apri le proprietà del contenitore per moduli adattivi e specifica il percorso del file CSS personalizzato nella scheda di base. Costrutti di stile predefiniti del modulo adattivo e sostituiti con i costrutti elencati nel file .css personalizzato.
I componenti discussi in questo articolo hanno le loro classi CSS predefinite. Puoi modificare le variabili per modificare gli stili nelle classi CSS. In alternativa, è possibile riscrivere l'intera classe. Questa sezione descrive le classi all’interno dei componenti e degli stili che è possibile modificare utilizzando le variabili.
Un contenitore è il componente di livello principale. 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, descrizioni della Guida (descrizione lunga e breve) e icone della Guida dei campi (punto interrogativo).
Classe CSS |
|
Variabili |
Descrizione |
|
Spaziatura per il campo |
|
Colore font del messaggio di errore del campo |
|
Dimensione font del messaggio di errore del campo |
L’elemento HTML etichetta utilizzato per il campo include le classi left o top a seconda che l’etichetta sia in alto o a sinistra.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore font per l’etichetta del campo |
|
Dimensione font per l’etichetta del campo |
|
Proprietà 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 guideFieldLabel etichetta. Se sei un autore, sovrascrivi questa regola per rendere visibili le modifiche personalizzate.
A seconda del tipo, i widget includono anche classi. Di solito, i widget includono guideFieldWidget
classe. I widget forniti con HTML normalmente utilizzano l’input e la selezione standard dell’elemento HTML. Lo stile viene eseguito di conseguenza. Non è possibile assegnare uno stile a un widget personalizzato modificando le variabili.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore di sfondo per i widget (non funziona per la casella di controllo e il pulsante di opzione) |
|
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 stato attivo per i bordi del widget |
|
Stile bordo consolidato dei widget |
|
Colore del testo all’interno del widget |
|
Dimensione del testo all'interno del widget |
|
Proprietà CSS lineheight per il widget |
|
Proprietà di spaziatura interna 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 font per il widget quando il campo è disattivato |
|
Colore bordo per il widget quando il campo è disattivato |
|
Altezza del widget (non funziona per la casella di controllo e il pulsante di opzione) |
|
Altezza della casella di controllo e del pulsante di opzione. |
|
Altezza massima per un elenco a discesa a selezione multipla |
Lo stile dei campi attivati, obbligatori e disattivati è limitato utilizzando le variabili. Tuttavia, è possibile modificarlo ignorando gli stili. Le restrizioni che utilizzano le variabili sono fornite principalmente per mantenere sotto controllo il numero di variabili. La restrizione può essere attenuata se l'aspetto di un campo cambia drasticamente perché si trova in uno qualsiasi degli stati discussi in precedenza.
Un autore può specificare il contenuto della Guida nei campi utilizzando i componenti di descrizione breve e lunga. 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 ignorare lo stile della descrizione. La descrizione della Guida (sia lunga che breve) viene modificata utilizzando le 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 bordo indicatore sinistro della Guida lunga dei widget |
|
Colore di sfondo della Guida breve dei widget |
|
Colore font della Guida breve dei widget |
|
Colore di sfondo della descrizione breve dei widget Guida |
|
Colore font della descrizione breve dei widget Guida |
I Termini e Condizioni (TnC
) consente di specificare termini e condizioni. È possibile personalizzare il widget utilizzando le variabili descritte nella tabella seguente.
Variabili |
Descrizione |
tnc-unvisited |
Colore font del collegamento tnc non visitato. |
tnc-visited |
Colore font del collegamento tnc visitato. |
I pulsanti sono anche widget. Tuttavia, il loro stile è leggermente diverso dai widget. Nei moduli adattivi, costituisce un pulsante uno dei seguenti elementi:
Codice HTML per pulsante:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Classe CSS |
Descrizione |
|
Icone per pulsante |
|
Etichetta/didascalia pulsante Stili |
Variabili |
Descrizione |
|
Dimensione del bordo per i pulsanti |
|
Tipo di bordo |
|
Proprietà di spaziatura interna CSS per il pulsante |
|
Dimensione font per il pulsante |
|
Colore di sfondo per il pulsante |
|
Colore font del pulsante |
|
Colore del bordo del pulsante |
|
Spaziatura per i pulsanti grandi (pulsanti con classe .buttonlarge) |
|
Dimensione carattere per pulsanti grandi |
|
Spaziatura per i pulsanti piccoli (pulsanti con classe .buttonsmall) |
|
Dimensione carattere per pulsanti piccoli |
|
Colore di sfondo per i pulsanti informativi (pulsanti con classe .buttoninformative) |
|
Colore font per pulsanti informativi |
|
Colore del bordo per i pulsanti informativi |
|
Colore di sfondo per i pulsanti con stile di avviso (pulsanti con classe buttonwarning) |
|
Colore del carattere per i pulsanti con stili di avviso |
|
Colore del bordo per i pulsanti con stile di 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, un punto interrogativo viene visualizzato quando un autore aggiunge una descrizione lunga nel contenuto della Guida. Viene utilizzata l'icona predefinita fornita in bootstrap. Per utilizzare un'icona personalizzata, è possibile personalizzare le icone di avvio.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore dell’icona |
|
Colore dell'icona quando si passa il mouse su di essa |
È possibile modificare il tema del 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 del corpo dispari. Il valore predefinito è |
|
Colore di sfondo per la riga del corpo uniforme. Il valore predefinito è |
Il widget File allegato dei moduli adattivi consente di caricare i file. Puoi anche personalizzare il widget utilizzando le variabili.
Variabili |
Descrizione |
|
Spaziatura per i file visualizzati nel widget |
|
Colore di sfondo per l'elemento file |
|
Colore del bordo superiore |
|
Colore del carattere per l'elemento file |
|
Colore per l'icona Anteprima (icona Bootstrap) nel widget |
|
Altezza del commento per l'elemento file |
Sono disponibili quattro tipi di schede del navigatore. Queste includono le schede a sinistra, in alto, nella procedura guidata e nel Pannello a soffietto. Ogni navigatore ha una classe diversa.
Navigatore |
Classe CSS |
|
.pannello di navigazione a soffietto |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.wizard-navigators |
Di seguito è riportato il codice HTML per l'elemento tab navigator (simile alle schede bootstrap):
<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"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
È possibile modificare lo stile del navigatore utilizzando le regole CSS che selezionano gli elementi utilizzando discendente selettori. Ad esempio, per aggiungere uno stile di decorazione del testo al tag di ancoraggio:
Navigatore schede in alto:
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
Inoltre, esistono classi per assegnare uno stile ai navigatori delle schede (sia a sinistra che in alto) a seconda che dispongano di navigatori nidificati/secondari/secondari.
Classe CSS |
Descrizione |
|
Navigatori a schede (a sinistra e in alto) con navigatori nidificati/secondari/secondari |
|
Navigatori a schede (a sinistra e in alto) privi di navigatori nidificati/secondari/secondari |
La classe guideNavIcon fornisce un'icona predefinita per i navigatori delle schede (sia a sinistra che in alto) e i navigatori delle procedure guidate.
Classe CSS |
|
Per modificare l’icona di un particolare navigatore, fornisci una classe CSS nel pannello in authoring, esempio di modulo <class_name>. Aggiungi un <class_name>_nav per l'icona del navigatore.
Variabili |
Descrizione |
Navigatori schede |
|
|
Colore di sfondo per l'intero navigatore schede |
|
Colore di sfondo per la scheda |
|
Colore carattere per la scheda |
|
Colore di sfondo per la scheda al passaggio del mouse |
|
Colore carattere per la scheda al passaggio del mouse |
|
Colore di sfondo quando il pannello è a fuoco (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 attivato una volta ma l’espressione di completamento restituisce false |
|
Colore del font quando il pannello è stato attivato una volta ma l’espressione di completamento restituisce false |
|
Colore del bordo della scheda |
|
Dimensione font per la scheda |
|
Spaziatura per la scheda |
|
Margine per la scheda |
|
Margine per le schede verticali |
|
Dimensione del bordo delle schede |
|
Altezza minima delle schede |
|
Rientro per le 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 creazione guidata |
|
Colore di sfondo quando il pannello è a fuoco (attivo) |
|
Colore del font quando il pannello è attivo (attivato) |
|
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 attivato una volta ma l’espressione di completamento restituisce false |
|
Colore del font quando il pannello è stato attivato una volta ma l’espressione di completamento restituisce false |
|
Colore per la procedura guidata |
|
Dimensione font per la creazione guidata |
|
Spaziatura per la creazione guidata |
|
Dimensione del bordo per la procedura guidata |
|
Colore del bordo del punto elenco del navigatore della procedura guidata (prefisso didascalia/etichetta) |
|
Colore di sfondo della barra di avanzamento del navigatore della procedura guidata |
|
Colore di riempimento per la barra di avanzamento |
Navigatori Accordion |
|
|
Spaziatura per pannello a soffietto |
Un pannello include una barra degli strumenti facoltativa e il relativo contenuto.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore di sfondo per il pannello |
|
Dimensione font per il testo del pannello |
|
Colore font per il testo del pannello |
|
Spaziatura all’interno del pannello |
|
Dimensione font della descrizione del pannello |
|
Riempimento 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. Lì
non è un componente di stile separato per il contenuto. Le variabili descritte vengono applicate sia al navigatore che al contenuto.
Il pannello più in alto (RootPanel) non ha questa classe.
Queste variabili influenzano la barra dell’intestazione visibile su un dispositivo mobile o su dispositivi a schermo ridotto contenenti il titolo del pannello e i navigatori avanti e indietro.
Classe CSS |
|
Variabili |
Descrizione |
|
Colore di sfondo per la barra dell’intestazione |
|
Colore font per il testo all’interno della barra dell’intestazione |
|
Spaziatura per barra intestazione |
Queste variabili influenzano l'indicatore di scorrimento, che è una freccia arancione visualizzata su un dispositivo mobile o su dispositivi con schermo piccolo. Un indicatore di scorrimento indica che è presente contenuto oltre la parte visibile dello schermo. Puoi scorrere verso il basso per vederlo. Quando si preme la fine del contenuto, la freccia scompare.
Classe CSS |
|
Variabili |
Descrizione |
|
Posizione fissa dello scrollindicator dal basso |
|
Posizione fissa dello scorrimento da destra |
|
Larghezza indicatore di scorrimento |
|
Altezza indicatore di scorrimento |
Queste variabili nella tabella seguente influenzano il layout della barra degli strumenti mobile fissa.
Classe CSS |
|
Variabili |
Descrizione |
|
Posizione fissa della barra degli strumenti, su dispositivo mobile, dal basso |
|
Posizione fissa della barra degli strumenti, su dispositivo mobile, dall'alto |
|
Posizione fissa della barra degli strumenti, su dispositivo mobile, da sinistra |
|
Posizione fissa della barra degli strumenti, su 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 |
Il Iscrizione semplice theme in /etc/clientlibs/fd/af/guidetheme/simpleEnrollment e la categoria guide.theme.simpleEnrollment
introduce anche alcune variabili. Se desideri creare un’iscrizione semplice per l’ottimizzazione del tema, puoi 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 barra di avanzamento corrispondente, al primo rendering. |
|
Colore di sfondo per il navigatore della procedura guidata corrente/attivo e barra di avanzamento corrispondente |
|
Colore di sfondo per i navigatori della procedura guidata e barra di avanzamento corrispondente, che sono stati visitati. |
|
Colore del bordo che suddivide il contenitore in navigatori e pannello |
|
Colore bordo inferiore che separa le schede a sinistra (navigatori schede). |
|
Colore di sfondo per i navigatori nidificati/secondari/secondari del navigatore |