Etap 12: Definiowanie stylów niestandardowych

Tworzone składniki są traktowane jak wszelkie inne w plikach design.json i design.css, zawartych w motywie używanym dla serwisu.

Aby dodać swój własny styl dla składnika niestandardowego, należy potwierdzić wartość id, użytą podczas rejestrowania składnika. W pliku appinfo.json było to "id": "hello-world".

Używając tej wartości, otworzyć plik design.json do edycji, po czym dodać nowe style, które mają być obsługiwane dla tej wartości id. Na przykład otworzyć do edycji plik /designs/default/design.json ze swojego motywu, po czym dodać następujący kod:

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

Jeśli zostanie wywołany panel "Ustawienia" składnika, to na karcie "Styl" powinny być widoczne dwie opcje: Plain (default) i Gothic. Przełączanie się między tymi opcjami niczego jednak nie zmieni, dopóki nie zostaną zdefiniowane klasy wyszczególnione w pliku design.css.

Otworzyć plik design.css do edycji, po czym dodać klasy CSS swojego stylu. Na przykład otworzyć do edycji plik /designs/default/design.css ze swojego motywu, po czym dodać następujący kod:

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

Zapisać, po czym zsynchronizować pliki z serwerem instancji Oracle Content Management.