Hide Component Alignment, Width or Spacing Options for a Theme

By default, most components allow someone building sites to specify the alignment, width, and spacing options in the settings dialog of a component. As a developer, however, you may want to hide these options on a custom component to prevent contributors from rendering content in a way inconsistent with the site theme. For example, if you want to promote a consistent look and feel that centers a button and keeps the spacing set to 30 pixels, you can hide the options to change them in the settings by editing the theme's components.json file.

There may also be times when you want to override a custom component's initial default values, which can also be done by editing the components.json file. Any changes to the initial values will only apply to components added to the page after the edited components.json file has been uploaded as a new version.

To hide the settings options for alignment, width, or spacing for a component in a theme:

1. In Oracle Content Management, click Developer in the left navigation menu.
2. On the Developer page, click View all Themes.
3. On the Themes page, select the theme to modify and click Open in the right-click menu or click in the actions bar.
4. Select the components.json file and click Download.
5. Open the components.json file in a text editor.
6. Add objects to specify the component type and ID, and set the properties you want to hide equal to true.
   For example, the following is an entry that hides the alignment, width, and spacing properties of a button component in the settings dialog:

   "type":"scs-button",
   "id":"scs-button",
   "hideAlignmentAndWidth": true,
   "hideSpacing": true,

   Note:

   The id field value is case sensitive.
   If you want to override the default alignment and spacing properties of the button component, the following is an example of how to specify initial values:

   "initialData": {
       "alignment": "center",
       "marginTop": 30,
       "marginBottom": 30

   The full entry into the components.json file to specify default values and hide alignment, width, and spacing options in the settings dialog of a button component used in a theme would be as follows:

   [
       {
           "name": "",
           "list": [
               {
                   "type": "scs-button",
                   "id": "scs-button",
                   "hideAlignmentAndWidth": true,
                   "hideSpacing": true,
                   "initialData": {
                       "alignment": "center",
                       "marginTop": 30,
                       "marginBottom": 30
                   }
               }
           ]
       },
       {
           "name": "Starter",
           "list": [
               {
                   "type": "scs-component",
                   "id": "StarterComponent",
                   "themed": true
               },
               {
                   "type": "scs-component",
                   "id": "StarterFooter",
                   "themed": true
               }
           ]
       }
   ]

7. Once you've made the desired changes, upload the components.json file to the theme as a new version.