Update the Theme for Others to Pick the H1 Component Style

You can register styles for your component with the theme, so that other users can switch between the styles you provide for your component from the settings panel or Style tab.

To update the theme for other users to pick the component style:

1. Add some more styles to your component design.css file. Prefix each style with the component’s registered styleClassName as defined in appinfo.json. For this component, that prefix is h1-component.

   Two more styles, h1-component-gothic-style and h1-component-courier-style have been added.

   The new contents of design.css will now be as follows:

   .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. Register your styles in the theme’s design.json file. You can find this file in the theme the site is using. Drill down to the theme files in the designs folder, then to the defaults folder, and add a section for your component to design.json.

   The bold text that follows is an example of what to add:

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

The names in the design.json snippet that was added ("Plain", "Courier", "Gothic") will appear in the settings panel for your component on the style tab as below. When selected, they will apply the corresponding styles ("h1-component-default-style", "h1-component-courier-style", "h1-component-gothic-style") respectively, on your component.