Trinn 12: Definere egendefinerte stiler

Komponenter du oppretter, blir behandlet som en hvilken som helst annen komponent i filene design.json og design.css i temaet som brukes for området.

Hvis du vil legge til en egen stil for den egendefinerte komponenten, må du bekrefte id-verdien du brukte da du registrerte komponenten. I filen appinfo.json var dette "id": "hello-world".

Rediger filen design.json for temaet med denne verdien, og legg til de nye stilene du ønsker skal støttes for denne id-en. Du kan for eksempel redigere filen /designs/default/design.json i temaet og legge til denne koden:

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

Hvis du åpner ruten Innstillinger for komponenten igjen, skal du nå se Vanlig (standard) og Gotisk som de to valgene som vises i fanen Stil. Hvis du bytter mellom disse valgene, gjør du imidlertid ingenting før du faktisk definerer stilklassene som er oppført i filen design.css.

Rediger filen design.css for temaet, og legg til CSS-klassene (Cascading Style Sheet) for stilen. Du kan for eksempel redigere filen /designs/default/design.css i temaet og legge til denne koden:

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

Lagre og synkroniser filene på tjeneren for Oracle Content Management-forekomsten.