Show Menu
ARGOMENTI×

Modifica degli stili predefiniti dei moduli HTML5

Il rendering dei moduli HTML5 viene eseguito utilizzando le funzionalità HTML5 e lo stile del modulo di cui è stato effettuato il rendering viene applicato tramite CSS. L'aspetto predefinito di un modulo HTML5 è simile alla rappresentazione PDF. Gli sviluppatori possono utilizzare CSS personalizzato per modificare l'aspetto predefinito dei moduli HTML5.
Questo articolo fornisce informazioni dettagliate per modificare lo stile di un modulo HTML5 e l’articolo Introduzione agli stili contiene informazioni dettagliate sui vari aspetti dello stile dei moduli HTML5. Prima di eseguire i passaggi indicati in questo articolo, leggete Introduzione agli stili.
Le due immagini seguenti mostrano la differenza tra gli stili predefiniti e personalizzati.

Stile dei moduli

  1. Scegliere un profilo per aggiungere stili personalizzati
    Accedete all'interfaccia CRX DE all'URL: https://<server>:<porta>/crx/de e crea un profilo o scegli un profilo esistente. Per informazioni su come creare un profilo, consulta Creazione di un nuovo profilo
  2. Creare un foglio di stile CSS per la formattazione dei moduli HTML5
    Passare alla cartella in cui è stato creato il renderer del profilo e creare un file foglio di stile CSS. I passaggi da seguire sono:
    1. Fare clic con il pulsante destro del mouse sulla cartella e selezionare Crea > Crea file dal menu
    2. Nella finestra di dialogo Crea file, immettere il nome del foglio di stile. Accertatevi di utilizzare l'estensione .css (ad esempio, stylesheet.css)
    3. Dal riquadro di navigazione, aprite il file CSS creato.
    4. Definire le classi CSS dei componenti che si desidera personalizzare e aggiungere stili in tali classi.
    Per sapere quali classi CSS creare per un particolare componente nei moduli HTML5, vedere Introduzione agli stili .
  3. Includi il foglio di stile nel renderer del profilo
    Aprite la pagina Profile Renderer (file jsp) in CRX DE e includete il file CSS nella pagina immediatamente sotto la libreria client XFA. Effettuate le seguenti operazioni per includere il file CSS nel profilo.
    1. Nella pagina del renderer, cercate la riga seguente:
      <cq:includeClientLib category="xfaforms.profile" />
    2. Inserire quanto segue sotto la riga sopra per includere il foglio di stile:
      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>
    3. Salvate il file.