Structure

A theme is 100% composed by files.

Each theme must have a codename composed of lowercase ASCii letters (a-z) without spaces, accents or punctuation marks. For example a theme called "Île de la Cité" could have the following codename: "ile_cite".

The codename is used as the name of the folder which contains all theme files. In our example, the theme would be located at:

/www/navigate/themes/ile_cite

Navigate CMS requires the following files to be placed inside that folder:

• ile_cite.theme
• Theme definition.
• thumbnail.png
• A screenshot or identity image for the theme (205 x 145 px).
• ile_cite.info.html
• Help file that the users can read in Navigate CMS.
• ile_cite.nvweb.php
• (optional) Theme webget, to apply theme options or generate content in templates with your own "nv tag".
• demo.html
• (optional) HTML page that will be loaded as a theme preview or demonstration.
• ile_cite_sample.zip
• (optional) Example content/website ready to be imported in Navigate CMS (created using Themes / "Export sample content").

Note: please replace "ile_cite" for the codename of your theme.

Beyond the required files you are free to organize your other theme files the way you prefer.

Real example: Ocean theme

Ocean is a free theme that you'll find in the Navigate CMS store. Let's take a look to its full file organization:

• /ocean
• css/
• black/
• black.css
• content.css
• global.css
• blue/
• blue.css
• content.css
• global.css
• i18n/
• en.json
• es.json
• img/
• colors/
• black_quotes1.png
• ...
• quotes1.png
• rss.png
• ...
• js/
• jquery-min.js
• ocean.js
• samples/
• content_fullwidth.html
• home.html
• ...
• templates/
• blog.nvt.html
• blog-entry.nvt.html
• contact.nvt.html
• content.nvt.html
• content-fullwidth.nvt.html
• content-right.nvt.html
• footer.nvt.html
• head.nvt.html
• home.nvt.html
• portfolio.nvt.html
• portfolio-item.nvt.html
• search.nvt.html
• demo.html
• ocean.info.html
• ocean.nvweb.html
• ocean.theme
• thumbnail.png
• ocean_sample.zip
  

As we see, the root folder (/ocean) contains the required Navigate CMS files, and all other theme files are placed in subfolders:

• /ocean/css
• Theme styles (one subfolder per scheme).
• /ocean/i18n
• Translations.
• /ocean/img
• Theme images.
• /ocean/js
• jQuery library and Ocean theme javascript.
• /ocean/samples
• HTML samples that can be imported in the wysiwyg editor when editing the website content.
• /ocean/templates
• Theme templates using "nv tags".

This file organization is very clean and understable. We could also put all files in the root folder but that would be a mess. In the end it's up to you.

Navigate CMS knows where to find the theme files by looking at the theme definition, so let's proceed to the next chapter.

0 Comments