Vaihe 12: mukautettujen tyylien määritys

Luomiasi komponentteja kohdellaan kuin mitä tahansa komponentteja design.json- ja design.css-tiedostoissa sivustosi teemassa.

Jos haluat lisätä oman tyylisi mukautetulle komponentille, vahvista id-arvo, jota käytit rekisteröidessäsi komponenttisi. appinfo.json-tiedostossa kyseinen tunnus oli "id": "hello-world".

Muokkaa kyseistä arvoa käyttäen teeman design.json-tiedostoa ja lisää uudet tyylit, joita haluat tukea kyseisen id-tunnuksen osalta. Voit esimerkiksi muokata /designs/default/design.json-tiedostoa teemassasi ja lisätä tämän koodin:

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

Jos avaat Asetukset-paneelin komponentissasi, Tyyli-välilehdessä pitäisi näkyä kaksi valintaa: Plain (oletus) ja Gothic. Pelkkä tyylin valitseminen ei kuitenkaan riitä, vaan design.css-tiedostossa listatut tyyliluokat on myös erikseen määritettävä.

Muokkaa teeman design.css-tiedostoa ja lisää tyylisi CSS-luokat (Cascading Style Sheet). Voit esimerkiksi muokata /designs/default/design.css-tiedostoa teemassasi ja lisätä tämän koodin:

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

Tallenna ja synkronoi tiedosto Oracle Content Management -instanssin palvelimeen.