Aktualizácia motívu pre ostatných na výber štýlu komponentu H1

Pre komponent s motívom môžete zaregistrovať štýly. Medzi štýlmi, ktoré ste poskytli pre komponent, potom môžu ostatní používatelia prepínať na paneli nastavení alebo na karte Štýl.

1. Pridajte ďalšie štýly do súboru design.css komponentu. Ku každému štýlu pridajte prefix so zaregistrovaným atribútom styleClassName komponentu, ako je definovaný v súbore appinfo.json. Pre tento komponent je predponou h1-component.

   Boli pridané dva ďalšie štýly, h1-component-gothic-style a h1-component-courier-style.

   Nový obsah súboru design.css bude vyzerať takto:

   .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. Zaregistrujte štýly v súbore design.json motívu. Súbor nájdete v motíve, ktorý sa používa na lokalite. Prejdite na súbory motívu v priečinku návrhov, potom do priečinka predvolených položiek a pridajte sekciu pre komponent do súboru design.json.

   Text uvedený tučným písmom nižšie je príkladom obsahu, ktorý môžete pridať:

              "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": [