Theme definition
The theme definition is a JSON file that defines all aspects of a theme: templates, block types, color schemes, configuration options, languages and content samples. The file must reside in the root folder of the theme and must have the following format as the filename:
theme_code.theme
Important note: a single syntax error in the JSON file will make the theme unusable for Navigate CMS. Fortunately the application will warn you of this mishap if you run the Themes function. You can get a little more information if you use Firefox and have the FirePHP extension installed in your browser.
All texts subject to be shown in Navigate CMS (descriptions, option titles and values...) can be translated using the theme dictionary. For example, given a theme that has a scheme color with the name "ec_blue", Navigate CMS will look for a string matching that code for the current language ("Electric Blue" in English, "Azul eléctrico" in Spanish) and show it in the application instead of "ec_blue", otherwise the default language will be used.
You can also put a "@" symbol before the string code to aid you identifying what will be checked against the dictionary (the symbol is not used for anything, it will be removed before checking the dictionary).
Main structure
All theme definitions follow the format below:
{
"title": "Your theme title",
"version": "1.0",
"author": "Theme author <author@email.com>",
"website": "Author's website",
"languages": {},
"styles": {},
"options": [],
"templates": [],
"blocks": [],
"content_samples": []
}
Quick jump to a section:
Languages Styles Options Templates Blocks Content samples
Languages
The language codes are defined in the website configuration. We recommend using the 2-letters identifier for a language (ISO 639-1).
"languages":
{
"language_code": "path to json dictionary from THEME ROOT",
"en": "i18n/en.json"
}
Color schemes (theme styles)
Every color scheme available in a theme must have an internal codename. In the website configuration the scheme titles are read from the "name" property, which can be translated using the theme dictionary (in the example "@default" means that Navigate CMS will look for a translation of the "default" keyword).
In the example below each scheme is composed by three stylesheets: global, color and content. "global" defines the website structure. "color" assigns shades. "content" is a special stylesheet that will be loaded in the tinyMCE editor inside Navigate CMS when editing a theme page. You can organize your scheme stylesheets the way you like, you can even remove the "styles" section of the theme definition.
Remember: the only stylesheet type Navigate CMS will read by itself is "content".
"styles":
{
"scheme_code":
{
"name": "scheme title",
"global": "path to your common css for all schemes",
"color": "path to the css file for this particular color scheme",
"content": "path to the css file used in the tinyMCE editor in Navigate CMS"
},
"default":
{
"name": "@default",
"global": "css/default/global.css",
"color": "css/default/blue.css",
"content": "css/default/content.css"
}
}
Options (website configuration)
If you want to allow changing the logo image used in a theme, or define the Facebook URL used for a button in all pages, etc. this is how you can do it:
"options": [
{
"id": "code of the option, you will receive this in your theme widget",
"name": "@option_title",
"type": "type of the option",
"dvalue": "default value when option is left empty",
"custom_property": "custom_property_values"
},
{
"id": "logo",
"name": "@logo",
"type": "image",
"dvalue": "img/logo.png"
}
]
Some option types allow custom properties like "width of the editor" if a "tinyMCE" is used, etc.
Check the Configuration and options section to get a full list of option types and its custom properties.
Templates
Here you define if your theme includes a blog, a news list or any other kind of page, including your own defined types.
"templates": [
{
"type": "template type",
"file": "path to template file from theme root",
"uses": "structure,element",
"enabled": true|false,
"permission": 0|1|2,
"gallery": true|false,
"statistics": true|false,
"comments": false|true,
"tags": true|false,
"sections": [],
"properties": []
},
{
"type": "home",
"file": "home.nvt.html",
"uses": "structure",
"gallery": false,
"statistics": true,
"sections": [],
"properties": []
}
]
Let's explain each property of a template definition:
- enabled - the template is hidden and all pages using it won't be displayed
- uses - the template can be assigned to a structure item, an element or both (default)
- permission - access level for pages using this template
- 0: everybody (default)
- 1: only logged in users
- 2: hidden for all
- gallery - display the gallery tab (when editing the content in Navigate CMS)
- statistics - the pages using this template should be included in the website statistics?
- comments - this template allows posting comments? (display the comments tab)
- tags - display the "tags" field when using this template
- sections - array of sections definitions (see below)
- properties - array of properties definitions (same format as theme options, see Configuration and options)
Templates > Page types (as of Navigate CMS 1.7.4)
home
content
gallery
blog
blog_entry
item
list
contact
search
newsletter
portfolio
portfolio_item
not_found
You can also use your own template types; to avoid compatability problems it is recommended to append the theme code before, for example: ocean_content_fullwidth (remember that if a string with that code is found in the dictionary, a translation/readable text will be shown in Navigate CMS, like this "Ocean | Content (Fullwidth)").
Templates > Sections definition
sections:[
{
"name": "section title or string code",
"code": "internal codename for that section, NO SPACES",
"editor": "which editor is presented for this section: tinymce | raw | html"
},
{
"name": "intro_fullwidth",
"code": "intro",
"editor": "tinymce",
"width": "960"
},
{
"name": "#main#",
"code": "main",
"editor": "tinymce",
"width": "610"
}
]
The special section code name "#main#" tells Navigate CMS to show the string "Main content", which doesn't need to be translated in the theme dictionary.
Templates > Properties definition
properties:[
{
"id": "id of the property, use it when writing a tag",
"name": "title of the property, @translated",
"element": "item|structure",
"type": "value",
"dvalue": "5",
"custom_property": "value of the custom property"
},
{
"id": "slideshow_pause",
"name": "@slideshow_pause",
"element": "item",
"type": "value",
"dvalue": "5"
}
]
The field "element" tells Navigate CMS where the property field has to be displayed (editing an item or editing a structure entry). Click here to get the list of all available property types.
Blocks
"blocks": [
{
"id": "id of the block type (used when calling the tag)",
"code": "internal codename for this block type",
"title": "translated title of this block type",
"type": "type of block",
"width": 0,
"height": 0,
"order": "how this type of blocks are sorted"
},
{
"id": "ocean-home-slider-item",
"code": "ocean-home-slider",
"title": "@ocean_home_slider",
"type": "block",
"width": 960,
"height": 330,
"order": "priority"
}
]
The width and height are only required if the block type has a fixed size (imagine a sidebar block with a maximum 200px of width and variable height, width: 200 height: 0).
Block types:
- block - generic block, editable in Navigate CMS
- theme - theme-specific block => the theme widget must take care to render that block type.
- In the future, more block types will be added, like "map", poll, etc...
Order types:
- single - just one, the first found, no matter which one
- priority - follow the order assigned in Navigate CMS
- random - random order but taking in account the fixed block positions given in Navigate CMS
Content samples
The theme can provide example content to demonstrate how a certain page type can be crafted.
content_samples: [
{
"title": "title for the example content",
"file": "path to the html file from the theme root"
},
{
"title": "Home",
"file": "samples/home.html"
}
]
This samples can be viewed and imported by an user when editing a content in Navigate CMS. In short, only the contents of the div with id "navigate-theme-content-sample" will be copied into the editor.
Sample file example
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/blue/global.css" />
<link rel="stylesheet" href="../css/blue/blue.css" />
<div id="navigate-theme-content-sample">
<div class="page-title">
<h2>This is a title</h2>
<div class="page-content-separator"></div>
</div>
</div>
0 Comments