Actualizarea temei pentru alegerea stilului componentei H1 de către alte persoane

Puteţi să înregistraţi stiluri pentru componenta dvs. în cadrul temei, pentru ca alţi utilizatori să poată comuta între stilurile pe care le furnizaţi pentru componentă din panoul de setări sau din fila Stil.

1. Adăugaţi câteva stiluri suplimentare la fişierul componentei design.css. Adăugaţi pentru fiecare stil, sub formă de prefix, styleClassName înregistrat al componentei aşa cum este definit în appinfo.json. Pentru această componentă, prefixul este h1-component.

   Două stiluri suplimentare, h1-component-gothic-style şi h1-component-courier-style au fost adăugate.

   Noul conţinut al design.css va fi acum după cum urmează:

   .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. Înregistraţi-vă stilurile în fişierul design.json al temei. Puteţi să găsiţi acest fişier în tema pe care o utilizează site-ul. Detaliaţi la fişierele temei din folderul de designuri, apoi la folderul de valori prestabilite şi adăugaţi o secţiune pentru componenta dvs. la design.json.

   Textul aldin care urmează este un exemplu de ce se adaugă:

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