12. lépés: Egyéni stílusok definiálása

A létrehozott összetevőket ugyanúgy kezeli a rendszer, mint a webhelyhez használt témához tartozó design.json és design.css fájlban lévő bármely más összetevőt.

Egyéni összetevőjéhez saját stílus hozzáadásához erősítse meg az összetevő regisztrálásakor használt id azonosító értékét. Az appinfo.json fájlban ez "id": "hello-world" volt.

Ezt az értéket használva szerkessze a témához tartozó design.json fájlt, és ezzel az id azonosítóval vegye fel a támogatni kívánt új stílusokat. Például a témához tartozó /designs/default/design.json fájl szerkesztésekor vegye fel ezt a kódot:

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

Ha összetevőjénél megnyitja a Beállítások panelt, a Stílus lapon meg kell jelennie a Plain (default) és a Gothic beállításnak. A beállítások közötti váltás azonban mindaddig hatástalan lesz, amíg ténylegesen nem definiálja a design.css fájlban felsorolt stílusosztályokat.

Szerkessze a témához tartozó design.css fájlt, és vegye fel stílusának CSS (egymásra épülő stíluslapok) osztályait. Például a témához tartozó /designs/default/design.css fájl szerkesztésekor vegye fel ezt a kódot:

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

Mentse és szinkronizálja a fájlokat az Oracle Content Management példánykiszolgálójára.