Diğerlerinin H1 Bileşeni Stilini Alması İçin Temayı Güncelleme

Diğer kullanıcıların ayarlar panelinden veya Stil sekmesinden bileşeninize ilişkin stiller arasında geçiş yapabilmesi için bileşeninize yönelik stilleri tema ile kaydedebilirsiniz.

1. Bileşeninizin design.css dosyasına biraz daha stil ekleyin. Her stile, appinfo.json içinde tanımlandığı gibi bileşenin kayıtlı styleClassName ile önek koyun. Bu bileşen için o ön ek: h1-component.

   İki stil daha, h1-component-gothic-style ve h1-component-courier-style eklendi.

   design.css yeni içeriği şu şekildedir:

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }
   .h1-component-gothic-style .scs-component-content {
    font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif;
    font-size: 32px;
    font-weight: bold; }
   .h1-component-courier-style .scs-component-content {
    font-family: "Courier";
    font-size: 32px;
    font-weight: bold; }

2. Stillerinizi temanın design.json dosyasına kaydedin. Bu dosyayı sitenin kullandığı temada bulabilirsiniz. Tasarımlar klasöründeki tema dosyalarının ardından klasör öndeğerlerinin detayına gidin ve bileşeniniz için bir bölümü design.json'a ekleyin.

   Şu kalın metin ne yapılacağı ile ilgili bir örnektir:

              "news-article": {
                       "styles": [{
                                         "name": "News Article 1",
                                         "class": "news-article-default-style"
                                         },
                       {
                                         "name": "News Article 2",
                                         "class": "news-article-style-1"
                                         }
                                  ]
              }, 
              "h1-component": { 
       "styles": [{ 
         "name": "Plain", 
         "class": "h1-component-default-style" 
      }, { 
               "name": "Courier", 
               "class": "h1-component-courier-style" 
      }, { "name": "Gothic", 
           "class": "h1-component-gothic-style" 
      }] 
     }
     },
     "componentIcons": {
             "scs-socialbar": {
                       "icons": [