Stap 12: aangepaste stijlen definiëren

Door u gemaakte componenten worden op dezelfde manier behandeld als andere componenten in de bestanden design.json en design.css van het thema dat voor uw site wordt gebruikt.

U kunt uw eigen stijl voor uw aangepaste component toevoegen door de waarde van id te bevestigen die u bij de registratie van uw component hebt gebruikt. Voor het bestand appinfo.json was dit "id": "hello-world".

Bewerk het bestand design.json voor het thema en voeg de nieuwe stijlen toe die u op basis van die waarde voor id wilt ondersteunen. U kunt bijvoorbeeld het bestand /designs/default/design.json bewerken in uw thema en deze code toevoegen:

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

Als u het paneel 'Instellingen' opent voor uw component, ziet u de volgende twee opties op het tabblad 'Stijl': Normaal (standaard) en Gotisch. Het kiezen van een andere optie heeft pas effect als u daadwerkelijk de stijlklassen definieert in het bestand design.css.

Bewerk het bestand design.css voor het thema en voeg de CSS-klassen (Cascading Style Sheet) van uw stijl toe. U kunt bijvoorbeeld het bestand /designs/default/design.css bewerken in uw thema en deze code toevoegen:

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

Sla uw bestanden op de server van uw Oracle Content Management instance op en synchroniseer ze.