A téma módosítása mások számára a H1 összetevő stílusának választásához

Összetevőjéhez stílusokat regisztrálhat a témával, így más felhasználók a beállítások panelen vagy a Stílus lapon válthatnak az összetevőhöz biztosított stílusok között.

1. Vegyen fel további stílusokat az összetevőhöz tartozó design.css fájlban. Az egyes stílusoknál az előtag az összetevő regisztrált styleClassName értéke legyen az appinfo.json fájlban definiált módon. Ennél az összetevőnél az előtag h1-component.

   Két további stílussal, h1-component-gothic-style és h1-component-courier-style, bővült a választék.

   A design.css fájl tartalma ekkor a következő:

   .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. Regisztrálja a stílusokat a témához tartozó design.json fájlban. Ez a fájl a webhely által használt témában található. Részletezze a témafájlokat a designs mappában, majd a defaults mappában, és vegyen fel egy szakaszt az összetevőjéhez a design.json fájlban.

   Az alábbi félkövér szöveg a hozzáadott részre mutat példát:

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