Adım 12: Özel Stiller Tanımlama

Oluşturduğunuz bileşenler, siteniz için kullanılan temadaki design.json ve design.css dosyalarında yer alan diğer bileşenlere benzer şekilde işlem görür.

Özel bileşeninize kendi stilinizi eklemek için bileşeninizi kaydederken kullandığınız id değerini teyit edin. appinfo.json dosyasında bu değer şuydu: "id": "hello-world".

Bu değeri kullanarak temanın design.json dosyasını düzenleyin ve bu id için desteklemek istediğiniz yeni stilleri ekleyin. Örneğin temanızdaki /designs/default/design.json dosyasını düzenleyin ve şu kodu ekleyin:

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

Ayarlar panelini özel bileşenin karşısına getirdiğinizde artık Stil sekmesinde iki seçenek olarak Plain (öndeğer) ve Gothic listelendiğini görmelisiniz. Bununla birlikte, design.css dosyasında listelenen stil sınıfını tanımlayana kadar bu seçenekler arasında geçiş yapıldığında hiçbir şey olmaz.

Temanın design.css dosyasını düzenleyin ve stilinizin basamaklı biçim tablosu sınıflarını ekleyin. Örneğin temanızdaki /designs/default/design.css dosyasını düzenleyin ve şu kodu ekleyin:

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

Dosyalarınızı Oracle Content Management anı sunucusuna kaydedin ve eşzamanlı kılın.