Tutorial: understanding how QnE templates work
STOP PRESS: QnE is no longer a commercial product - and is no longer being sold from this website.
- QnE will continue to be developed, though not as a commercial product.
- Existing clients and licenses will continue to be supported - and all existing agreements will be honoured.
- if you have any questions about this change please get in touch via the contact form.
In this tutorial I will work through the steps required to integrate a template with QnECMS. I will use the home page template files in this example - however the process for integrating the main templates files is exactly the same.
QnE uses four files to create the design of a website (i.e, to provide the template files). There are two files for the home page (a header file and a footer file) and two files for the rest of the site (you guessed it, also a header file and a footer file).
Using the home page templates as an example
Here is an example template - which happens to be the default template that comes with QnE:
When I am looking at a new layout to be integrated with QnE - the first thing I am thinking about - is how to split it into a header section and a footer section. The markup for these sections will be added to the headerhome.php - and footerhome.php files respectively.
An important point to note here - is that the main content of your page - will not be in your template files. The content is sandwiched between the header and footer files.
The content area gets 'filled in' by the content of your page. As far as your header and footer templates are concerned - it always comes directly after the header file and directly before the footer file.
This is a simple layout - the area grayed out above is the header section of the page - and in terms of the template files - the markup for that section will appear in headerhome.php
In this case directly after the header section is the main content for the page - which will be managed via the content management form. So next we move on to the footer section.
This starts directly after the finish of the content area - which in this case means at the top of the right-hand column. I.e., in the image above - this is the column marked with a 2.
Looking at the header template markup
Note: no PHP knowledge is required to work with QnE templates - the only bits you will be altering will be standard (X)HTML tags.
Note: as I look through this template I am describing the HTML as it appears in the default template - but the expectation is that you will be replacing that HTML with your own, i.e., the HTML used to create your page design template.
Headerhome.php
Looking at the start of the headerhome.php file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>
<?php
dontloadwithout();
// Get the title tag for the browser bar
echo $sitetitle." | ".$pagetitle;
?>
</title>
Here we see the standard DOCTYPE tag, followed by the start of the head section and the opening title tag.
At that point we find the first bit of PHP code. dontloadwithout(); is a function to stop people calling this file directly.
The two variables that follow are there to show the site title and page title in the browser title bar. The $sitetitle variables will be replaced by the value set in the CMS configuration file. The $pagetitle variable title will be replaced by the value set in the page title field when the form to create this page was filled in.
Moving on
Adding information to the meta tags
Next in our headerhome.php we have the standard meta tags that should appear in the head section of any HTML file. The only difference here - is that the meta tags can have values that you added when creating or editing the page form. This is good because it means every page on your site can have it's own meta tag values.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="<?php echo $metatext; ?>" />
<!-- <meta name="Description" content="<?php echo $pagetitle; ?>" /> -->
<meta name="Description" content="<?php echo $summary; ?>" />
The first meta tag contains information about the characters set being used on the page. This is a standard tag - no magic is going on here.
The next tag provides keywords for the page. These keywords can be provided by substituting the values added via the 'Keywords' filed in the page form - which is why there is a bit of php in there to pick up that value, e.g., <?php echo $metatext; ?>
The following meta tag provides a description of the page. There are two lines provided here to demonstrate that the description value can either be the information from the 'summary ' field or the the page title can be used instead. One is commented out - in this case the meta tag showing the use of the pagetitle variable is commented out.
Picking up the style sheet
<style type="text/css" media="screen">
@import "<?php echo $baseurl; ?>/stylesheets/flex2colrightmenu.css";
@import "<?php echo $baseurl; ?>/stylesheets/inlineadminstyle.css";
</style>
</head>
The $baseurl variable is replaced by the domain for the site (e.g. http://www.qnecms.co.uk) which is a value set in the configuration file.
In this particular case it is being used to ensure that the style sheet is correctly referenced.
The first Style sheet is the main one for this template design (i.e., flex2colrightmenu.css) - you will replace this with your own template.
inlineadminstyle.css
The second template (inlineadminstyle.css) is there to format the edit links that appear on the page when you are logged into the CMS. if you want your editing links to look different from the default - make sure you add this style sheet to your template and change it for your own needs.
Markup for page header and banner
<body>
<div id="wrap">
<div id="header">
<div id="accessmessge">
<p><a href="<?php echo $baseurl; ?>/sitemap/">sitemap</a>
</p>
</div>
<h1 style="margin-left: 440px; font-size: 100%; color: #666;">
QnECMS: Quick & Easy Accessible CMS, Weblog and Podcasting Software
</h1>
</div>
<h2 id="belowheader" >
Can you <strong>buy an accessible CMS</strong> that is easy to use, quick and affordable?
</h2>
<!-- main-body is the left container wrap containing two columns -->
<div id ="main-body">
This is mostly just standard HTML. The only QnE specific feature here is the use of PHP to include a reference to the Sitemap plugin:
<p><a href="<?php echo $baseurl; ?>/sitemap/">sitemap</a>
The $baseurl variable is used to ensure that the link to the sitemap will work when QnE is installed on different hosts. The domain value ($baseurl) is picked up from the configuration file.
Horizontal navigation at the top of the page
All pages created in QnE should be added to a category. Categories are created in the 'Manage categories' section of the control panel.
Adding categories and putting pages into those categories allows QnE to generate navigation based on those categories, i.e., a navigation bar consisting of category names, that when clicked show pages in those categories.
In order to make use of this feature the following include has been added to the default template:
<?php
// Navigation bar created from a list of categories
// ul for this navigation has an id="globalnav", li has class="globalnavli", a has class="globalnavanchor"
// Add a category called 'Home' or 'home' and put your home page in that category to generate a link to your home page.
include(ADMIN_FOLDER_PATH."/navigation/categoryindex.php");
?>
If you don't want to use this feature, just 'comment out' the include line by adding double forward slashes to the start of the line. It is not a feature I use often myself, but for a simple website where completely automated navigation is required (i.e., when a new category or page is added to the site it automatically appears on the site) it is handy to have.
Adding the weblog feature
<div id="content" style="clear: both;">
<div class="gutter">
<div class="textborder">
<?php
// Add a weblog to this page
include(ADMIN_FOLDER_PATH."weblog/include/webloglist.php");
?>
<?php
// Add weblog archive list to this page
include(ADMIN_FOLDER_PATH."weblog/include/weblogarchive.php");
?>
<?php
// Add RSS .91 link
include(ADMIN_FOLDER_PATH."weblog/rss.91include.php");
?>
<?php
// Add RSS 2 link
include(ADMIN_FOLDER_PATH."weblog/rss2include.php");
?>
Stay tuned, I'll be adding to this page shortly....