Navigate CMS
Sign up
Sign in
Sign out
Step by step (Create a theme)
In a nutshell, the recommended steps to create a theme from an image or PSD file are:
1 Convert the original design to a static HTML site with its files, javascripts and stylesheets.
2 Install Navigate CMS on a web server.
3 Determine the theme title, codename, the available template types, the website block types and global configuration options.
4 Write the theme definition file.
5 Take every HTML file and transform it to a template using nv tags.
6 Refine the theme definition with template options, include the theme dictionaries, etc.
7 Create some sample content while finishing the theme.
8 Export the sample content and include it in the theme folder.
Additionaly, you can publish the full theme to the Navigate CMS Downloads section.
Now we're going to explain how to create a simple theme for Navigate CMS step by step.
1 From PSD (or image) to HTML
If we already have a static HTML site we can skip this step. If you don't know how to achieve this step you have two options.
Option 1) Learn and master the art of creating HTML templates from a design. We recommend reading this online tutorial and the PSD to HTML tuts website.
Option 2) Choose a company that offers such service. Naviwebs, the company behind Navigate CMS, offers that service at a very affordable price. We can even create a full compatible theme for your Navigate CMS installation.
To follow this step by step we provide you a very simple html site template.
2 Install Navigate CMS on a web server
Follow the instructions on how to install the application here.
3 Determine the theme title, codename, the available template types, the website block types and global configuration options
Our theme title will be "Demo website" and the codename "demo".
The theme has two page types: home and content. In our example we won't create any block types.
We'll add two global theme configurations: logo and slogan.
4 Write the theme definition file
We start writing the basic structure:
{
"title": "Demo website",
"version": "1.0",
"author": "Naviwebs <info@naviwebs.com>",
"website": "http://www.naviwebs.com",
"languages": {},
"styles": {},
"options": [],
"templates": [],
"blocks": [],
"content_samples": []
}We won't have alternative color schemes, so styles will be left empty, the same happens with blocks and content_samples.
Later we'll decide if we create a theme dictionary, right now we leave the languages section empty too.
So, we need to write the options and templates sections.
Theme Options
We'll prepare two theme options: website logo and website slogan. The first will be an image file and the second a multilanguage text field. Let's write the definitions:
[
{
"id": "logo",
"name": "Website logo",
"type": "image",
"dvalue": "img/logo-navigate.png"
},
{
"id": "slogan",
"name": "Website slogan",
"type": "text",
"dvalue": ""
}
]Note: The "dvalue" of the logo option sets the default path to the image from the theme folder, not the website root.
Templates
Two templates must be declared: home and content. The home template has 3 sections (the three columns after the main image). We'll use the Navigate CMS gallery to define the main image of the home template. The content template has just one editable section: main content.
[
{
"type": "home",
"file": "home.nvt.html",
"uses": "structure",
"gallery": true,
"statistics": true,
"sections": [
{
"name": "Column 1",
"code": "column1",
"editor": "tinymce",
"width": "285"
},
{
"name": "Column 2",
"code": "column2",
"editor": "tinymce",
"width": "285"
},
{
"name": "Column 3",
"code": "column3",
"editor": "tinymce",
"width": "285"
}
],
"properties": []
},
{
"type": "content",
"file": "content.nvt.html",
"gallery": false,
"statistics": true,
"sections": [
{
"name": "#main#",
"code": "main",
"editor": "tinymce",
"width": "940"
}
],
"properties": []
}
]Note that we defined "structure" for the "home" template uses. That's because that template can only be assigned to a structure item, not to an element. That makes easier the user experience when choosing templates. The "content" template can be assigned to a structure item or to an element, so the "uses" property is not needed.
5 Take every HTML file and transform it to a template using nv tags
Let's start by editing the home template. The head section is missing a <title> tag. Navigate CMS can auto-generate it by using the metatags nv tag:
...
<nv object="nvweb" name="metatags" />
</head>After opening the <body> tag it is recommended to include a call to the Live Edit nv tag.
<body>
<nv object="nvweb" name="liveedit" />
...Following the home template source code we arrive at the logo & slogan section:
<div class="logo">
<a href="#">
<img src="img/logo-navigate.png" width="200px" />
</a>
</div>
<div class="slogan">Your custom website slogan</div>as both are theme options (properties), the new code would be this:
<div class="logo">
<a href="{{nv object='root'}}">
<nv object="nvweb" name="properties" property="logo" width="200" />
</a>
</div>
<div class="slogan"><nv object="nvweb" name="properties" property="slogan" /></div>The logo is wrapped by a link that redirects to the website root (homepage). Navigate CMS returns the website root URL by calling the nv tag "root". Note we have used the {{nv}} form instead of <nv />. We could have used both but as we are writing a tag in an attribute, the HTML code would be syntactically incorrect. In the end it doesn't matter because Navigate CMS parses every nv tag before sending the page to the browser, so it is up to you.
The image logo is requested using the properties webget and, as we know the property is an image, we define that the logo should have a width of 200px. You can remove this attribute so Navigate CMS will create a img tag without dimensions.
The slogan text is a simple call to the properties webget asking for the value of a property called "slogan". As Navigate CMS is aware of the active language in a website, the correct text translation will be selected.
Next thing, the menu. Let's analyze the original source code:
<div class="menu">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Content 1</a></li>
<li><a href="#">Content 2</a></li>
</ul>
</div>Our template creates the menu using the standard ul > li > a format. Navigate CMS can generate this kind of menu by writing the following code:
<div class="menu">
<nv object="nvweb" name="menu" mode="ul" />
</div>Easy, isn't it? There is only one small caveat, Navigate CMS assigns its own class "menu_option_active" to the page we are in... If you look closely our first <li> you'll see we defined the class "active" for that purpose. That means we'll have to modify slightly our stylesheet and define that new class.
ul > li > a.active
{
color: #769fdf;
text-decoration: underline;
}will become:
ul > li > a.active,
ul > li > a.menu_option_active
{
color: #769fdf;
text-decoration: underline;
}
You are free to remove the original selector ( ul > li > a.active ) as it is not needed anymore.
We arrive at the main content zone, divided in three sections: title, main image and 3 independent columns.
<div class="content">
<h2>Welcome Home</h2>
<img src="img/sea.jpg" width="940" height="300"/>
</div>Later, in Navigate CMS, we'll create an item for the home page. We'll have to give a title to that item and we'll upload an image in the gallery. So, the final code for our template is:
<div class="content">
<h2><nv object="nvweb" name="content" mode="title" /></h2>
<nv object="nvweb" name="gallery" mode="image" position="0"
width="940" height="300" border="false" />
</div>
The title part is quite clear. We just ask for the title of the current content. The code for the main image requires more explanation. To retrieve an image from the gallery of the current content we need to make a request to the "gallery" webget. One of the function modes it offers is "image", which returns just one image tag corresponding to the given "position" (0 is the first). We also need that image to be 940 x 300px and there is a chance that the uploaded image had a different size. Requiring a certain width and/or height forces Navigate CMS to generate a resized image and that means we have to choose how we want to do that: crop or scale leaving transparent borders. In this case we want our image to fill the entire dimensions so we define border="false" to force the application do a resize & crop. You may ignore the attributes width, height and border in other situations and the original, unresized, image will be returned.
We now continue with the remaining section: the three columns.
<div class="columns">
<div class="column">
<h4>Lorem Ipsum</h4>
<div class="column-text">
Phasellus in nulla a sapien ultrices bibendum.
Quisque fermentum diam eget augue fringilla sit amet vestibulum.
</div>
</div>
[...2 more columns...]
<div style="clear: both;"></div>
</div>If you recall our theme definition, each column is an independent section. We will have 3 columns, no more and no less.
<div class="columns">
<div class="column">
<nv object="nvweb" name="content" mode="section" section="column1" />
</div>
<div class="column">
<nv object="nvweb" name="content" mode="section" section="column2" />
</div>
<div class="column">
<nv object="nvweb" name="content" mode="section" section="column3" />
</div>
<div style="clear: both;"></div>
</div>Each of our original columns had two inner tags: <h4> and <div class="column-text">. These tags will have to be inserted in every section when editing. To ease this task Navigate CMS offers the "Content samples" feature. Check the theme definition section for more information. In this guide we'll suppose that the user will enter those tags without any help.
Finally, in the footer zone of our home template, we have:
<div class="footer">
<div class="footer-line"></div>
<span>© 2012 - Website Title</span>
</div>Two parts will change, the year and the website title:
<div class="footer">
<div class="footer-line"></div>
<span>
© <nv object="variable" name="year" /> -
<nv object="variable" name="website_name" />
</span>
</div>A direct request to the variables object will give us that information.
We've just finished the home template!
Now, the content template is even simpler. We just repeat (or copy and paste ;) the common parts with the home template and that leaves only one zone to edit:
<div class="content">
<div class="content-text">
<h2>Some information</h2>
<span>content text</span>
</div>
</div>Only a title and the main content...
<div class="content">
<div class="content-text">
<h2><nv object="nvweb" name="content" mode="title" /></h2>
<nv object="nvweb" name="content" mode="body" />
</div>
</div>Done!
6 Refine the theme definition with template options, include the theme dictionaries, etc.
Our theme is so simple it doesn't have a dictionary and we already have wrote the global theme options. To finish the basic package for our theme we'll include two files at the root folder.
Static HTML demo page
-we take the original home.html and rename it to demo.html.
Theme thumbnail / screenshot
-we use a screen capture application and resize the taken screenshot to 205x145px, saving the file as thumbnail.png.
To prepare a ZIP package to ease the installation of our theme we have to use our favorite compressor, select all files and folders inside the theme folder and pack them in a new file called demo.zip. Note that the file must take the codename of our theme, otherwise Navigate CMS may fail loading.
7 Create some sample content while finishing the theme
This step requires an active Navigate CMS installation. We are going to create a demo site for our theme.
7.1 Open Web > Web sites and create the website and assign a domain / subdomain.
7.2 Select the new website in the top website selector.
7.2 Open the Web > Themes function.
7.3 Click on Install from file and select the demo.zip file created before. You should see a new element with the thumbnail you created before.
7.4 Open the Web > Structure function and create two or three elements (Home, Content 1, Content 2...). Assign the correct template to each structure element and give a unique path.
7.5 Open the Content > Elements function and create an element for each structure entry generated before. Once you assign the category to an element Save to update the form. Enter a title and some content on every section, include images if you wish.
7.6 Open again the Web > Web sites function and double click the website you are working on. In the first tab, edit the Home page field to set the path you assigned in the step 7.4. In the last tab you can set the website slogan and logo. Save and your demo website will be completed.
7.7 Click on the House icon located at the top website selector to open your website in a new tab. Check everything and change what you don't like.
8 Export the sample content and include it in the theme folder
Now you have a fully working website with sample data, why not include it in your theme package? This way someone only will have to install the theme and import the sample content to have your website up and running. Just open Web > Themes
and click on Export sample content. You can find more detailed instructions in the corresponding section of this manual.
After that process you just have to include the ZIP in the root folder of your theme files.
Congratulations!
0 Comments