Create a Theme

You can create a new theme by copying an existing theme and making changes to the copy. You also can import and use Bootstrap content in a new theme.

Note:

Whether you are creating a new theme or making updates to an existing theme, always make a copy of the theme and work on the copy. Test it with a sample site or a copy of your real site to ensure it works correctly. Note that changes made to an existing theme will be implemented on any sites that use the theme immediately after the revised theme is published.

Copy a Theme

On the home page, click Developer.

The Developer page is displayed.
Click View All Themes.

A list of existing themes is displayed. You can control how themes are displayed by clicking the view icon and selecting an option from the list.
Select a theme and choose Copy in the right-click menu or click in the actions bar.

All the folders and files of the theme are copied, including any sample pages and content.

Note:
When you copy a theme, sharing information for the theme isn’t copied.
Enter a name for the copied theme. You can’t use a name used by another theme.

You can use letters, numbers, underscores (_), and hyphens (-) in the name. If you enter a space, it’s automatically replaced with a hyphen.

Don’t use the following names for site templates, themes, components, sites, or site pages: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Although you can use the following names for site pages, don’t use them for site templates, themes, components, or sites: documents, sites.
Optionally, enter a description for the theme.
Click Copy.

A progress bar shows the new theme name and copy status. When the theme is copied, the name appears in the list of themes. You can explore the folders and files that make up the theme by clicking the theme name in the list of themes.
Use the Oracle Content Management desktop app to sync the theme folders and files to your local system. This enables you to browse the local folders and work directly with files. Changes you make to the theme are automatically synced. You can make changes using your favorite HTML, code, or text editing tools.

Set Whether Custom Styles Can Be Used in a Site

A theme administrator can specify styles that come with a theme, or customize the styles.

A setting in a theme's components.json file specifies whether custom styling can be done in Site Builder. This is to control that a site contributor keeps within the style of the site when building it and does not use, for example, other fonts and colors.

To not allow the use of custom styles in a site:

Hide the Customize option in the Settings panel for components.
In the components.json file for the theme, add the following object along with other component definitions:
```
[
    {
        "showStyleClassOnly": "true"
    }
]
```

Customize toolbar groups and buttons of the rich text editor to remove custom styling:

In the components.json file for the theme, you can specify the toolbarGroups and removeButtons properties of the rich text editor to customize the groups and buttons within groups for Title and Paragraph components.

For example, add the following objects along with other component definitions to remove styles, font, and colors from the Styles group:

[
    {
        "name": "",
        "list": [
            {
                "type": "scs-title",
                "id": "scs-title",
                "initialData": {
                    "toolbarGroups": [
                        {
                            "name": "basicstyles",
                            "groups": ["basicstyles"]
                        },
                        {
                            "name": "styles",
                            "groups": ["styles"]
                        },
                        {
                            "name": "colors",
                            "groups": ["colors"]
                        },
                        "/",
                        {
                            "name": "undo",
                            "groups": ["undo"]
                        },
                        {
                            "name": "links",
                            "groups": ["links"]
                        },
                        {
                            "name": "paragraph",
                            "groups": ["list", "indent"]
                        },
                        {
                            "name": "align",
                            "groups": ["align"]
                        },
                        {
                            "name": "cleanup",
                            "groups": ["cleanup"]
                        }
                    ],
                    "removeButtons": "Styles,Subscript,Superscript,Strike,Anchor,Blockquote,Link,Unlink,Font,TextColor,BGColor"
                }
            },
            {
                "type": "scs-paragraph",
                "id": "scs-paragraph",
                "config": {
                    "toolbarGroups": [
                        {
                            "name": "basicstyles",
                            "groups": ["basicstyles"]
                        },
                        {
                            "name": "styles",
                            "groups": ["styles"]
                        },
                        {
                            "name": "colors",
                            "groups": ["colors"]
                        },
                        "/",
                        {
                            "name": "undo",
                            "groups": ["undo"]
                        },
                        {
                            "name": "links",
                            "groups": ["links"]
                        },
                        {
                            "name": "paragraph",
                            "groups": ["list", "indent"]
                        },
                        {
                            "name": "align",
                            "groups": ["align"]
                        },
                        {
                            "name": "insert",
                            "groups": ["image", "table"]
                        },
                        {
                            "name": "cleanup",
                            "groups": ["cleanup"]
                        }
                    ],
                    "removeButtons": "Styles,Subscript,Superscript,Strike,Anchor,Blockquote,Link,Unlink,Font,TextColor,BGColor"
                }
            }
        ]
    }
]

Not allowing custom styles has the following effects:

In all built-in components, the style tab hides the (o) Customize option.
In the rich text editor, the toolbar buttons for setting styles are hidden, and specification of font family, font color, and so on are overridden.

Hide Components and Section Layouts for a Theme

You can hide components and section layouts to prevent a site developer from using them by editing a theme's component.json file. You may want to do this in order to promote a consistent look and feel. See Hide Components and Section Layouts for a Theme.

Verify the Theme with a Site

After you’ve completed editing the theme, you need to check that all the pieces work together with the site as planned.

Make sure you’ve synchronized your copied folders and files with the Oracle Content Management desktop app and that all the modifications have been saved.
Open a site (it can be a test or existing offline site) in Site Builder and switch the site to use the new theme.
Test the site with the theme by adding pages and using settings, viewing images, checking the navigation, and anything else you’ve changed in the new theme.
Check that everything renders correctly, including all files and links.
Publish the theme so the site will implement the theme changes, then check it in a runtime environment.

See Publish Themes.

Use a Bootstrap Theme

Similarities between Oracle Content Management themes and Bootstrap themes makes it possible to convert existing Bootstrap theme pages and content for use in an Oracle Content Management theme.

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for interface components and JavaScript extensions.

You follow the same instructions for creating a theme, but you work with code (using whichever editor you choose) to import and edit any pages or content you want from the Bootstrap theme.

It’s unlikely that you would use all of a Bootstrap theme with all of its pages and content. Typically you will select parts of the theme to use in an Oracle Content Management theme, maybe only a few of the page templates and only some parts of those. For example, a Bootstrap theme contains several blocks within the templates, including a header, a navigation block, a body block and a footer block. Because of the way that Bootstrap themes are shipped as a collection of files that can be viewed directly from the file system (without a web server), they contain a lot of duplication within each page (they have to because there is no page assembly engine involved). When you use this information in an Oracle Content Management theme, you need to take these parts and add them to reusable Oracle Content Management page templates, and then use Oracle Content Management to dynamically assemble multiple pages from those templates.

One example of adding information to reusable templates is the navigation section. Navigation in a typical Bootstrap theme is duplicated on all pages, but when you move that into an Oracle Content Management theme, you must use JavaScript code to dynamically walk the hierarchy of the site and generate the navigation structures. Then you just include that script on all the pages and they all get the navigation, and that navigation adapts as pages are added or removed from the site.

See Create a Site Template from Bootstrap or a Website Design Template.