Stile in linea dei componenti per modulo adattivo

È 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.

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à di stile. Per modificare la modalità di formattazione, nella barra degli strumenti della pagina, toccate canvas-drop-down > Style.

  2. Selezionate un componente nella pagina e toccate il pulsante di modifica 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.

  3. Fate clic su una scheda nella barra laterale per specificare le proprietà CSS. È possibile specificare proprietà quali:

    • Dimension 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 dello stile 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

Stile casella di testo dopo l'applicazione dello stile in linea

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.

NOTA

Le proprietà di stile variano in base al componente selezionato.

In questa pagina