È possibile definire l'aspetto e lo stile generali di un modulo adattivo specificando gli stili utilizzando l'editor di temi editor di temi. Inoltre, potete applicare stili CSS in linea a singoli componenti di moduli adattivi e visualizzare rapidamente l'anteprima delle modifiche. Gli stili in linea sostituiscono lo stile fornito nel tema.
Per aggiungere stili in linea a un componente:
Aprire il modulo nell'editor del modulo e passare alla modalità di stile. Per modificare la modalità di formattazione, nella barra degli strumenti della pagina, toccate > Style.
Selezionate un componente nella pagina e toccate il pulsante di modifica . Le proprietà di stile vengono aperte nella barra laterale.
È inoltre possibile selezionare componenti dalla struttura gerarchica del modulo nella barra laterale. La struttura gerarchica del modulo è disponibile come oggetti modulo nella barra laterale.
Potete anche selezionare un componente dalla barra laterale. In modalità Stile è possibile visualizzare i componenti elencati in Oggetti modulo. Tuttavia, gli oggetti modulo elencati nella barra laterale elencano componenti quali campi e pannelli. I campi e i pannelli sono componenti generici che possono contenere componenti quali caselle di testo e pulsanti di scelta.
Quando selezionate un componente dalla barra laterale, vengono elencati tutti i componenti secondari e le proprietà del componente selezionato. È possibile selezionare uno specifico sottocomponente e formattarlo.
Fate clic su una scheda nella barra laterale per specificare le proprietà CSS. È possibile specificare proprietà quali:
Allo stesso modo, potete applicare stili ad altre parti di un componente, ad esempio Widget, Didascalia e Aiuto.
Toccate Fine per confermare le modifiche oppure Annulla per annullare le modifiche.
Le immagini seguenti rappresentano un campo di testo prima e dopo l’applicazione degli stili in linea.
Componente casella di testo prima dell'applicazione delle proprietà di stile in linea
Osservate la modifica nello stile della casella di testo come illustrato nell'immagine seguente dopo l'applicazione delle seguenti proprietà CSS.
Selettore |
Proprietà CSS |
Valore |
Effetto |
Campo |
border |
Larghezza bordo = 2px Stile bordo=Uniforme Colore del 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: È possibile specificare un nome di colore o il relativo codice esadecimale nel campo del valore. |
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 Aiuto. |
Descrizione lunga |
text-align |
center |
Allinea la descrizione lunga per l’Aiuto al centro |
Componente casella di testo dopo l'applicazione delle proprietà di stile in linea
Seguendo i passaggi descritti qui sopra, è possibile selezionare e formattare altri componenti, ad esempio pannelli, pulsanti di invio e pulsanti di scelta.
Le proprietà di stile variano in base al componente selezionato.