Uppdatera temat så att andra kan välja H1-komponentens format

Du kan registrera format för komponenten med temat, så att andra användare kan växla mellan de format du anger för komponenten från inställningspanelen eller fliken Format.

1. Lägg till fler format i filen design.css för komponenten. Ange komponentens registrerade styleClassName som prefix för varje format, enligt definitionen i appinfo.json. För den här komponenten är det prefixet h1-component.

   Två format till, h1-component-gothic-style och h1-component-courier-style, har lagts till.

   Det nya innehållet i design.css blir nu följande:

   .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. Registrera dina format i filen design.json för temat. Du hittar den här filen i temat som används för webbplatsen. Borra ned till temafilerna i designmappen och sedan till standardmappen. Lägg sedan till en sektion för komponenten i design.json.

   Texten i fetstil som följer är ett exempel på vad som kan läggas till:

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