Step 12: Define Custom Styles

Components you create are treated like any other component in the design.json and design.css files in the theme used for your site.

To add your own style for your custom component, confirm the id value you used when you registered your component. In the appinfo.json file; this was "id": "hello-world".

Using that value, edit the theme's design.json file and add in the new styles you want to support against that id. For example, edit the /designs/default/design.json file in your theme and add this code:

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

If you bring up the Settings panel against your component, you should now see Plain (default) and Gothic as the two options listed in the Style tab. However, switching between these options will not do anything until you actually define the style classes listed in the design.css file.

Edit the theme’s design.css file and add in the cascading style sheet (CSS) classes of your style. For example, edit the /designs/default/design.css file in your theme and add this code:

.hello-world-default-style .scs-component-content {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.hello-world-gothic-style .scs-component-content {
  font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; 
  font-size: 32px;
  font-weight: bold; }

Save and sync your files to the Oracle Content Management instance server.

Check the Results for Step 12

1. Refresh your page in your site so Site Builder can pick up the changes to the component.

2. Take the page into Edit mode.

3. Drag and drop your component onto the page.

4. Bring up the Settings panel against your component.

5. Go to the Style tab.

6. Switch between the Gothic and Plain styles that were defined in your design.json file.

   You’ll notice that the font size within your component adjusts to reflect the changes as it switches between the applied CSS class for each selection.

Continue to Step 13: Render a Component in an Inline Frame.