Krok 12: Definování vlastních stylů

S komponentami, které vytvoříte, se zachází stejným způsobem jako s jakoukoli jinou komponentou v souborech design.json a design.css v tématu použitém pro váš web.

Chcete-li přidat vlastní styl pro svou vlastní komponentu, potvrďte hodnotu id, kterou jste použili při registraci komponenty. V souboru appinfo.json toto bylo "id": "hello-world".

Pomocí této hodnoty upravte soubor design.json tématu a přidejte do něj nové styly, které chcete pro toto id podporovat. Například upravte soubor /designs/default/design.json ve svém tématu a přidejte tento kód:

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

Pokud vyvoláte panel Nastavení pro svou komponentu, měly by být na kartě Styl zobrazeny dvě volby, Prostý (výchozí) a Gotický. Nicméně přepínání mezi těmito volbami se nijak neprojeví, dokud skutečně nedefinujete třídy stylů uvedené v souboru design.css.

Upravte soubor design.css tématu a přidejte do něj třídy šablon stylů CSS svého stylu. Například upravte soubor /designs/default/design.css ve svém tématu a přidejte 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; }

Uložte soubory a synchronizujte je se serverem instance služby Oracle Content Management.