Passo 12: Definire stili personalizzati

I componenti creati personalmente dall'utente vengono trattati come qualsiasi altro componente nei file design.json e design.css del tema utilizzato per il sito.

Per aggiungere il proprio stile per il componente personalizzato, confermare il valore id utilizzato durante la registrazione del componente. Nel file appinfo.json era "id": "hello-world".

Utilizzando tale valore, modificare il file design.json del tema e aggiungere i nuovi stili che si desidera supportare rispetto a id. Ad esempio, modificare il file /designs/default/design.json nel tema e aggiungere questo codice:

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

Se si attiva il pannello Impostazioni per il componente, ora dovrebbero essere visibili le opzioni Plain (predefinita) e Gothic elencate nella scheda Stile. Il passaggio dall'una all'altra di queste opzioni, tuttavia, non avrà alcuna conseguenza finché non verranno effettivamente definite le classi di stile nel file design.css.

Modificare il file design.css del tema e aggiungere le classi CSS (Cascade Style Sheets) dello stile. Ad esempio, modificare il file /designs/default/design.css nel tema e aggiungere questo codice:

.hello-world-default-style .scs-component-content {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.hello-world-gothic-style .scs-component-content {
  font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; 
  font-size: 32px;
  font-weight: bold; }

Salvare e sincronizzare i file nel server dell'istanza di Oracle Content Management.