Show Menu
ARGOMENTI×

Stile in linea dei componenti per moduli adattivi

È possibile definire l'aspetto e lo stile complessivi di un modulo adattivo specificando gli stili mediante l'editor Creazione e utilizzo di temi tema. 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.

Applica proprietà CSS in linea

Per aggiungere stili in linea a un componente:
  1. Aprire il modulo nell'editor del modulo e passare alla modalità stile. Per modificare la modalità di formattazione, nella barra degli strumenti della pagina toccate > Stile .
  2. Selezionate un componente nella pagina e toccate il pulsante di . 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.
  3. Fate clic su una scheda nella barra laterale per specificare le proprietà CSS. È possibile specificare proprietà quali:
    • Dimensioni e posizione (impostazione visualizzazione, spaziatura, altezza, larghezza, margine, posizione, indice z, float, cancellazione, overflow)
    • Testo (famiglia di font, spessore, colore, dimensione, altezza e allineamento)
    • Sfondo (immagine e sfumatura, colore di sfondo)
    • Bordo (larghezza, stile, colore, raggio)
    • Effetti (Ombra, Opacità)
    • Avanzate (consente di scrivere CSS personalizzato per il componente)
  4. Allo stesso modo, potete applicare stili ad altre parti di un componente, ad esempio Widget, Didascalia e Aiuto.
  5. Toccate Fine per confermare le modifiche oppure Annulla per annullare le modifiche.

Esempio: stili in linea per un componente Campo

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 pixel 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
100px
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.