Templates

DornCMS Templates

This will be a quick tutorial on how to incorporate your own HTML/CSS template into your site.

Step 1: Find/Create a standard HTML template

Any XHTML template should work fine with DornCMS. For this tutorial, I'm going to use a template from Open Source Web Design called Simple Beauty.

Step 2: Upload Images and Stylesheets

Images

Upload all template images to the uploadedimages/ folder (using the CMS, via FTP, or any other method).

In the case of the Simple Beauty template, there are 4 images that need to be uploaded.

Stylesheets

Any place in the stylesheet(s) that reference images with a url need to be changed to reflect the new image location as follows:

//Old
background: #CACACA url(images/background.png) repeat-x;

//New
background: #CACACA url(<strong>uploadedimages</strong>/background.png) repeat-x;

Put this modified stylesheet in the CMS by following these steps:

• From the main CMS page, go to Edit Style Sheets
• Click on the style sheet called "style" to edit the existing style sheet or add a new one to start from scratch.
• Copy and paste the css code into the editor.
• Hit the Submit Changes button

If you would rather upload the css files via FTP or another method, they are located at "/site/cms/page_content/style_sheets/".

Step 3: Modify the template HTML

Templates in DornCMS are broken into a header and footer file. The header file is further broken into 3 sections as follows:

• PHP code at the top that defines HEAD elements such as css styles, javascript files, and title.
• One line of PHP code that includes the base template, which adds all of the HEAD elements and some standard HTML code.
• All of the template HTML which comes before the content

The footer contains all of the template HTML which comes after the content.

After breaking the Simple Beauty template into these parts, here is the header.php file. Notice the 3 different sections, as described above.

<?php
    //add css file (name of file without ".css")
    $css_files[] = 'style';

    //add the business name to the front of the title
    $title_prepend = CMS::load('site_variables','business_name') . ' - ';

    //include the base HTML template
    require("includes/template.php");
?>

<div id="container">

    <div id="header">
        <h1>Simple Beauty H1 Title or Logo</h1>
    </div>

    <div id="sub_header">... your slogan or tag line here</div>

    <div id="main_content_top"></div>

    <div id="main_content">

        <div class="content">

Here is the footer file. This is all of the code after the content.

        </div>

    <div class="menu">
        <div class="menu_title">Main menu</div>
            <ul>
                <li><a href="#" class="menu_link">About me</a></li>
                <li><a href="#" class="menu_link">Contact me</a></li>
            </ul>
        <div class="menu_title">Sub menu</div>
            <ul>
                <li><a href="http://www.pikanai.com" class="menu_link">Pikanai</a></li>
            </ul>
        <div class="menu_title">Friends</div>
            <ul>
                <li><a href="http://www.oswd.org" class="menu_link">OSWD</a></li>
                <li><a href="http://www.opendesigns.org" class="menu_link">Open Designs</a></li>
            </ul>
        </div>

        <div id="clear"></div>

    </div>

    <div id="main_content_bottom">
    </div>

    <div id="footer">
        <strong>Copyright &copy; 2007</strong> | 
        <a href="#">Your Site</a> | 
        <b>Design by</b> <a href="http://www.pikanai.com">Pikanai.com</a>
    </div>

</div>

Step 4: Upload the header.php and footer.php files

Now, you can upload header.php and footer.php to the site directly through the CMS by following the following steps:

• From the main CMS page, go to Edit Pages
• Click header under Template Pages and click the Edit this page link.
• Replace all of the contents with the new header.php file.
• Hit the Submit Changes button and repeat for footer.

If you would rather upload these files via FTP or another method, they are stored in "/site/cms/pages/"

Step 5: Make the template pull data from the CMS

There are probably several places in the template that should pull data from the CMS and not be hard coded. This may include navigation links, site name, footer message, contact info, etc..

To display things stored in the site_variables section of the CMS, such as email and business_name, use something like the following:

<div>
    Business name: <?php echo CMS::load('site_variables','business_name'); ?>
</div>

To display CMS elements, use the same form as above, but replace 'site_variables' with the page name and 'business_name' with the element's name. Here is an example of loading the 'message' element from the 'footer' page.

<div>
    <?php echo CMS::load('footer','message'); ?>
</div>

Displaying navigation links is a little trickier. Links are stored as a CSV file that contains the link url and the display text for each link. You first load the CSV file and then parse it into an array. You then need to iterate over this array and display each link. This is somewhat complicated, but allows for a lot of flexibility in how the HTML for the links is generated and abstracts away the information from the HTML formatting which makes changing templates easier. Here is an example for populating the Main menu section in the footer of the Simple Beauty template.

<div class="menu_title">Main menu</div>
    <ul>
        <?php
        //load the links and parse them (the second parameter is the CSV header names)
        $links = CMS::parse(CMS::load('header','navigation_links'),array('display','url'));

        //iterate over the links and display them
        foreach($links as $link) {
            //if the link is relative, add $site_root to the beginning
            if(substr($link['url'],0,4) !== 'http') $link['url'] = $site_root . $link['url'];

            //display link
            echo "<li><a href='" . $link['url'] . "' class='menu_link'>" . $link['display'] . "</a></li>";
        }
        ?>
    </ul>

Helpful Hints

jQuery and the jQueryUI CSS framework are automatically included on every page. You can take advantage of these frameworks in your template. Check out the examples on the jQueryUI site for ideas.

Be careful of hard coding relative links in your template. URL rewriting makes your browser think you are in a different directory than you really are. You need to get back to the site root first. You can do this with the PHP variable $site_root by adding it to the beginning of a URL. For example, if you want to link to the about page on your site, you can do the following:

<a href="<?php echo $site_root; ?>about/">About</a>

With the new multi-language feature in DornCMS 1.3, a $language variable is set that contains the language code the site is currently in (e.g. "en-us", "fr", "en-gb", etc.). The variable $site_root includes the language code if there is one in the url so clicking on relative links will keep you in the same language. If you want the original $site_root value, you can use the $orig_siteroot variable instead.

For example, if you go to http://domain.com/mysite/fr-ca/home/, the $language variable is set to "fr-ca", $site_root is set to "/mysite/fr-ca/" and $orig_siteroot is set to "/mysite/". Using these variables, you can provide a way for users to switch languages. Here is an example:

<?php
//if in US English, show link to switch to French Canadian
if($language === 'en-us') {
    ?>
    <a href="<?php echo $orig_siteroot . 'fr-ca/' . $current_path; ?>">View French Canadian version</a>
    <?php
}
//if not in US English, show link to switch back
else {
    ?>
    <a href="<?php echo $orig_siteroot . 'en-us/' . $current_path; ?>">View US English version</a>
    <?php
}
?>