Aggiornare il tema in modo che altri utenti possano selezionare lo stile del componente H1

È possibile registrare gli stili per il componente con il tema in modo che altri utenti possano alternare gli stili forniti per il componente dal pannello Impostazioni o dalla scheda Stile.

1. Aggiungere altri stili al file design.css del componente. Inserire come prefisso prima di ogni stile l'elemento styleClassName registrato dell'elemento definito in appinfo.json. Per questo componente il prefisso è h1-component.

   Sono stati aggiunti altri due stili, h1-component-gothic-style e h1-component-courier-style.

   Ora il contenuto del file design.css è il seguente:

   .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. Registrare gli stili nel file design.json del tema. Il file è reperibile nel tema utilizzato dal sito. Eseguire il drill-down ai file del tema nella cartella delle progettazioni, quindi alla cartella dei valori predefiniti e aggiungere una sezione per il componente a design.json.

   Il testo in grassetto riportato di seguito costituisce un esempio degli elementi da aggiungere:

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