È possibile definire l’aspetto e lo stile generali di un modulo adattivo specificando gli stili utilizzando editor di temi. Inoltre, puoi applicare stili CSS in linea ai singoli componenti dei moduli adattivi e visualizzare in anteprima le modifiche al volo. Gli stili in linea sostituiscono lo stile fornito nel tema .
Per aggiungere stili in linea a un componente:
Aprire il modulo nell’editor moduli e modificare la modalità in modalità stile. Per modificare la modalità di formattazione, nella barra degli strumenti della pagina, tocca > Stile.
Seleziona un componente nella pagina e tocca il pulsante di modifica . Proprietà di stile aperte nella barra laterale.
È inoltre possibile selezionare i componenti dalla struttura gerarchica del modulo nella barra laterale. La struttura gerarchica del modulo è disponibile come Oggetti modulo nella barra laterale.
Puoi anche selezionare un componente dalla barra laterale. In modalità Stile è possibile visualizzare i componenti elencati in Oggetti modulo. Tuttavia, l’elenco Oggetti modulo nella barra laterale elenca i componenti, ad esempio campi e pannelli. I campi e i pannelli sono componenti generici che possono contenere componenti quali caselle di testo e pulsanti di scelta.
Quando selezioni un componente dalla barra laterale, vengono visualizzati tutti i sottocomponenti elencati e le proprietà del componente selezionato. Puoi selezionare un componente secondario specifico e formattarlo.
Fai clic su una scheda nella barra laterale per specificare le proprietà CSS. Puoi specificare proprietà quali:
Allo stesso modo, è possibile applicare gli stili ad altre parti di un componente, ad esempio Widget, Caption e Help.
Tocca Fine per confermare le modifiche o Annulla per eliminarle.
Le immagini seguenti rappresentano un campo di testo prima e dopo l’applicazione degli stili in linea.
Componente casella di testo prima di applicare proprietà di stile in linea
Osserva la modifica nello stile della casella di testo come mostrato nell’immagine seguente dopo aver applicato le seguenti proprietà CSS.
Selettore |
Proprietà CSS |
Valore |
Effetto |
Campo |
border |
Larghezza bordo =2 px Stile bordo=Uniforme Colore bordo=#1111 |
Crea un bordo largo 2 px nero intorno al campo |
Casella di testo |
background-color |
#6495ED |
Cambia il colore di sfondo in CornflowerBlue (#6495ED) Nota: Nel campo del valore è possibile specificare un nome di colore o il relativo codice esadecimale. |
Etichetta |
Dimensioni e posizione > larghezza |
100 px |
Corregge la larghezza di 100 px per l’etichetta |
Icona guida campo | Testo > Colore font | #2ECC40 | Cambia il colore della faccia dell'icona della guida. |
Descrizione lunga |
text-align |
center |
Allinea al centro la descrizione lunga dell’aiuto. |
applicatoFigura: Componente casella di testo dopo l'applicazione delle proprietà stile in linea
Seguendo i passaggi descritti in precedenza, puoi selezionare e assegnare uno stile ad altri componenti, ad esempio pannelli, pulsanti di invio e pulsanti di scelta.
Le proprietà dello stile variano a seconda del componente selezionato.