Pasul 12: Definirea stilurilor personalizate

Componentele pe care le creaţi sunt tratate ca orice altă componentă în fişierele design.json şi design.css din tema utilizată pt. site-ul dvs.

Pt. a vă adăuga propriul stil pt. componenta personalizată, confirmaţi valoarea id pe care aţi utilizat-o la înregistrarea componentei. În fişierul appinfo.json; aceasta era "id": "hello-world".

Folosind această valoare, editaţi fişierul design.json al temei şi adăugaţi-l în stilurile noi pe care doriţi să le acceptaţi pt. respectivul id. De exemplu, editaţi fişierul /designs/default/design.json din tema dvs. şi adăugaţi acest cod:

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

Dacă deschideţi panoul de Setări pt. componentă, ar trebui să vedeţi acum Plain (prestabilit) şi Gothic ca două opţiuni listate în fila Stil. Cu toate acestea, comutarea între aceste opţiuni nu va face nimic până nu definiţi efectiv clasele de stiluri listate în fişierul design.css.

Editaţi fişierul design.css al temei şi adăugaţi-l în clasele Cascading Style Sheet (CSS) ale stilului dvs. De exemplu, editaţi fişierul /designs/default/design.css din tema dvs. şi adăugaţi acest cod:

.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; }

Salvaţi şi sincronizaţi fişierele pe serverul de instanţă Oracle Content Management.