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
anddesign.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.