Basic Theme Structure

The basic structure of a theme includes the design, navigation, and styles specified in folders stored in Oracle Content Management. A theme is part of the template for a site.

When a user selects a template to create a new site, the associated theme data is automatically loaded. If you use the JET Starter Template or Starter Template, the theme is automatically copied instead of referenced. As a developer, if you’re using the starter template, you want your own copy of the theme.

A theme is organized in a specific folder and file structure, as illustrated in this example showing basic folders and files:

    theme
         assets
             css
                 main.css
             js
                 topnav.js
         designs
             default
                design.css
                design.json
         layouts
         publish
         responsepages
             404.html
         viewport.json
         _folder.json
         _folder_icon.png
         components.json

Certain folders contain specific types of information, including the following folders:

assets: JavaScript, Cascading style sheet (CSS), images, and other support files that are referenced by the layouts.
designs: design.css and design.json files, which are used to specify style options for components.
layouts: HTML files for page templates, which are used to display pages of the site.

Note:
All HTML files must have a DOCTYPE element at the start of the file that looks like this: <!DOCTYPE html>
publish: After a theme has been used in a published site, this directory is listed and contains copies of files. This directory is visible if you have sync’d the theme using the desktop app, but it’s not included if you’ve exported the theme as part of a template.
responsepages: Special page for handling errors (404).

Note:
If a page in a site is flagged as an Error Page, then the 404 error message from the theme will be ignored and the designated Error Page is used instead.
viewport.json: Specifies Viewport settings for the theme.
_folder.json: Specifies the name and GUID for the theme. For example:
```
{
      "themeName":"MarketingCampaignTheme",
      "itemGUID":"TB79D65F699B022AC4E11F4D4EE870070A1ADD86BBBB"
}
```
The GUID is created by Oracle Content Management when the theme is first imported or when it is copied. The theme name is assigned by the theme developer when creating a theme.
components.json: Records the custom components used within the theme.

There are two key files that you’ll work with when creating a new theme. These files set styles for components:

design.css
design.json

It is good practice to put navigation information into one JavaScript file; for example, a file named nav.js. The theme’s /assets/js/ folder is a good location for such a file.