Krok 12: Definovanie vlastných štýlov

Komponenty, ktoré vytvoríte, sa budú používať rovnako ako všetky ostatné komponenty v súboroch design.json a design.css v motíve používanom pre vašu lokalitu.

Ak chcete pre vlastný komponent pridať svoj vlastný štýl, potvrďte hodnotu id, ktorú ste použili pri registrácii komponentu. V súbore appinfo.json to bola hodnota "id": "hello-world".

Ak chcete použiť túto hodnotu, upravte súbor motívu design.json a pridajte doň nové štýly, ktoré majú byť podporované pre dané id. Upravte napríklad súbor /designs/default/design.json v motíve a pridajte tento kód:

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

Ak pre komponent otvoríte panel Nastavenia, na karte Štýl by ste mali vidieť dve voľby: Plain (predvolená hodnota) a Gothic. Pri prepínaní týchto dvoch volieb sa však nič nezmení, kým nedefinujete konkrétne triedy štýlu uvedené v súbore design.css.

Upravte súbor motívu design.css a pridajte doň triedy CSS (kaskádový hárok štýlov) vášho štýlu. Upravte napríklad súbor /designs/default/design.css v motíve a pridajte tento kód:

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

Súbory uložte a synchronizujte na serveri inštancie Oracle Content Management.