Overview

Templates are composed of a basic HTML file, 3 stylesheets and 1 mandatory JavaScript file. In this tutorial I’ll explain how to build and add your own template to the system.

The templates are used to create a website from scratch. When a website is created using the template system shown on this document, SiteCenter NX can switch the template of the whole website while keeping the contents, menu and file structure intact.

Take a look at the files in the templatefiles folder of your site builder install. It contains a sample template that you can customize to make getting started easy.

Requirements

To build SiteCenter NX templates, you will need:

  • SiteCenter NX 1.0 or newer (version NX 1.2.6 or newer is required for private templates)
  • Basic knowledge of HTML and CSS coding
  • Notepad, Dreamweaver, Frontpage or other tool to edit the HTML and the CSS files
  • Paint, Photoshop, Gimp or other image editor (optional)

Sample Template

Take a look at the files in the templatefiles folder of your site builder install. It contains a sample template that you can customize to make getting started easy.

HTML

The first thing you will need is your HTML template file called template.html. It can contain images, styles, JavaScript and anything else a normal web page might contain, however it will require a few placeholders, all of which are described within this document.

You should also have a transitional doctype at the top of your template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Placeholders

Placeholders are words that SiteCenter will understand and convert into the appropriate HTML elements. All placeholders are described below:

  • %%PAGE_TITLE%% - The title of the page. This should be added between the &title> and </title> tags., like so:
    <title>%%PAGE_TITLE%%</title>
    You should not use anything else between the <title> and </title> tags, and the %%PAGE_TITLE%% should not be used anywhere else on the page.
  • %%PAGE_HEADER%% - The header of the page. Initially, it is equal to the page title, but the user may edit this to anything else. It is used just before the text of the content area.
  • %%META_KEYWORDS%% - The meta keywords of the page. This should be added as part of the meta keywords tag, like so:
  • %%META_DESC%% - The meta description of the page. This should be added as part of the meta description tag, like so:
  • %%SITE_NAME%% - The name of the web site, as entered by the user when creating the site in the site builder. You can use this anywhere on your page, but it’s a good idea to include it in the heading.
  • %%NAV_MENU%% - This placeholder will be replaced with the navigation menu for the page. The CSS can be altered to make the menus horizontal or vertical.
  • %%PAGE_CONTENT%% - The main content of the page that will be editable from within the site builder when the user chooses to edit the page. This is editable, and it will automatically be wrapped in an editable region tag.
  • %%FOOTER_LINK%% - This placeholder will insert the link defined in the administration area. You can change the link from the settings page in the control panel.

Images, JavaScript and Stylesheets

Location

Any images, JavaScript and style sheets for the template need to be saved in a folder called media.

Your media folder should look like this:

HTML References

You should reference these files from inside the template.html file using relative referencing, for example:

<img src="media/myimage.gif" />

… or:

<script type="text/javascript" src="media/script.js"></script>

… or:

<link rel="stylesheet" type="text/css" href="media/mystyles.css" />

There are a few mandatory files that must be included in the media folder of every template. You can find these in your templatefiles folder:

  • menu.js: The dropdown menu script. The system takes care of creating the menus however you must add a reference to this file in the <head> part of your template, like this:

    <script src="media/menu.js" type="text/javascript"></script>
  • style.css: The stylesheet for the template. You must add a reference to this file in the <head> part of your template, like this:

    <link href="media/style.css" type="text/css" rel="stylesheet"/>

    You should add any styles you use in the template.html into style.css.
  • menustyle.css and menustyleie.css: Drop down menu style files. You must add references to these files in the <head> part of your template, like this:

    <link href="media/menustyle.css" type="text/css" rel="stylesheet"/>
    <link href="media/menustyleie.css" type="text/css" rel="stylesheet"/>

    • We will look at these files in more details shortly.

    CSS Details

    Your CSS can define class Selectors or id Selectors.

    Only class Selectors will be useable by your customers. The id Selectors will be hidden from your customers and protected on your template.

    Changing Menu Styles

    Each template will need the drop down menu to look a certain way, i.e. its own font and colors. The media/menustyle.css file contains all of the menu styles. To change the appearance of the menu, the only styles you need to change are those between the following two comments:

    /* -- Edit the styles below to change the color of the dropdown menu -- */

    … and:

    /* -- End styles for the dropdown menu -- */

    Editable Regions

    The WYSIWYG editor within SiteCenter is called DevEdit. DevEdit is a powerful HTML editor with many features.

    DevEdit allows you to define regions in your HTML code that users can edit. By defining editable regions, the editor restricts editing to anything outside these editable regions. Editable regions can be useful when you want to restrict users from editing certain parts of a website or newsletter template, so they are restricted to the content only.

    Editable regions are defined by using comment tags, similar to those found in Macromedia Dreamweaver and Microsoft Frontpage:

    <!-- #BeginEditable "name" -->
<!-- #EndEditable -->

    A sample webpage with editable regions would look like this:

    <html>
<body>
	This is my web page header and is not editable<br><br>
	<!-- #BeginEditable "myContent" -->This is my content and IS editable<!-- #EndEditable -->
	This is my footer and is not editable<br><br>
	<!-- #BeginEditable "secondFooter" -->This is another footer, but IS editable<!-- #EndEditable -->
</body>
</html>

    The %%PAGE_CONTENT%% and the %%PAGE_HEADER%% tags will be wrapped automatically by editable regions.

    Create the Preview

    Once you’ve designed your template, you should take a 150x101 pixel screenshot of your template in a web browser and save it as preview.gif.

    The preview.gif file should be saved on the same folder as the template.html.

    Publishing the Template

    We have put together the basics of a web site template. Let’s now add it into the system. Using an FTP client, change into the directory where you have the site builder installed.

    You’ll see categories such as “Business”. You can add your own template category here and it will appear in the “Layout Category” dropdown in the system on the “Site Builder” tab. For this example we will add a template in the Business category:

    You’ll see a list of templates in the Business folder. In this example, we would add a folder called “4” because “3” was the last template to be added. Change into the new folder and upload the media folder, the preview.gif image and the template.html file, like this:

    Now login to the site builder as an end-user and click on the site options button to show the site builder tab. Click the “Layout Category” dropdown box and change to the category where you uploaded your template. You should then see your new templates preview image in the list of templates, like this:

    Once you’ve chosen your new template click the “OK” button and let the system update your site layout to match your new template. Now, visit your site in a browser and if anything looks strange (such as styles or layout) then reedit your template/stylesheet and reupload it as we did earlier.

    If you have pages with sub pages then you will notice that the dropdown menus might look a little odd. I’ll show you how to change the menu style now.

    Private Templates

    Sometimes the templates may be done for specific customers. As of SiteCenter 1.2.6, you can set the templates such as only a certain customer can have access to it.

    The template creation process is exactly the same as any template. The only difference between a private template and a public template is the name of the category folder. If you name the category “t_user”, the template will only be seen by the user “user”.

    You can have as many templates as you want within the category “t_user”, and you can have other categories for your other users, like “t_john” or “t_peter”. The name on the folder has to match the user login.

    Conclusion

    As you can see it’s really quite simple to create your own web site template. For those of you who don’t have much time, you can take an existing web site template from the site builder directory on your web server and use it as a base for your new template. Just download one of the numbered folders in your templates folder to get started.