Trin 12: Definere tilpassede typografier

Komponenter, som du opretter, behandles som alle andre komponenter i design.json- og design.css-filerne i det tema, der bruges til dit site.

Hvis du vil føje din egen typografi til den tilpassede komponent, skal du bekræfte den ID-værdi, som du brugte, da du registrerede komponenten. I filen appinfo.json var det "id": "hello-world".

Brug denne værdi til at redigere temaets design.json-fil og tilføje nye typografier, som du vil understøtte med det pågældende ID. Du kan for eksempel redigere filen /designs/default/design.json i temaet og tilføje denne kode:

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

Hvis du åbner panelet Indstillinger for komponenten, bør du nu se Almindelig (standard) og Gotisk som de to valg på fanen Typografi. Hvis du skifter mellem disse valg, sker der imidlertid ingenting, så længe du ikke har defineret de typografiklasser, der bliver vist i filen design.css.

Rediger temaets design.css-fil, og tilføj CSS-klasserne (Cascading Style Sheet) for din typografi. Du kan for eksempel redigere filen /designs/default/design.css i temaet og tilføje denne kode:

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

Gem og synkroniser dine filer til Oracle Content Management-instansserveren.