How to Transform an XHTML / CSS template into an Exponent 0.97 Theme
I have been creating themes for Exponent CMS for some time and decided that maybe some of you would like to know step-by-step how to transform an XHTML / CSS template into a theme. I find it very simple, and I hope my explanation makes it simple for you. You can use these instructions to create a theme for the new 0.97 version (although it also works with older versions).
This "how-to" is intended for people who are familiar with, but not necessarily experts in:
- Exponent (and knowing how to install it)
- XHTML
- CSS
I will not go into all the details of every line and function used in the theme. This is a plain "step-by-step" for transforming a template into a theme. For more detailed information please refer to the Exponent Designer's Guide.
Before we get started
Creating an Exponent theme from a well-written template is much simpler than writing this "how-to," and making it work well on different browsers.
1. Select template
This first step is extremely important. You need to select a well-written XHTML / CSS template. Whether you built the template yourself or got it from someone else, you must know that it works well with various browsers. To have a good quality theme in the end, you need to start with a good quality template. You know the saying... "quality in, quality out."
The template has to be appropriate for the type of site being built. For this "how-to" I decided to build a brochure type website. I found a good template - the freely available Spring Bloom template.
I chose Spring Bloom for this example because it fits both requirements: (1) It is XHTML / CSS; and (2) it includes the basic styles for a company brochure type website - a simple menu structure, search, news, links, and textual content.
It is also important to be aware of the limitations of the template you choose before you start. The menu style in Spring Bloom restricts the website hierarchy - the placement of the navigation in the header allows at most 5 top level pages without modifications to the CSS.
2. Create theme subfolder
Create a subfolder with your theme's name in your exponent installation themes folder, and place the template files in that folder.
Theme names in exponent are made up of two parts: an identifier for the theme and the suffix theme. In this case we create the folder springbloomtheme.
The Spring Bloom template has just a few files: index.html, style.css, and three images.
We will transform the index.html file into an index.php file for Exponent. We will leave the images and style.css as they are because this is the point of the style.
3. [Optional] Create css and images subfolder
This step is not necessary. It is just my own convention. I am placing it here, so you understand that there is flexibility in creating an Exponent theme. My convention places CSS files in a subfolder of the theme called css, and images in a subfolder called images. I create these two folders and move the template's CSS and image files to the folders as appropriate. I then edit the template's HTML and CSS files to point the images and CSS to the directories I use and make sure everything works. I want to start from a working template.
4. Create class.php
Copy class.php from an existing theme subfolder to your new theme subfolder.
Edit class.php and replace basetheme with yourtheme as appropriate. Create a description for your theme, place your name as the author and this file is ready. Here is the code for class.php for the springbloomtheme:
<?php
if (class_exists('springbloomtheme')) return;
class springbloomtheme {
function name() { return "Spring Bloom Theme"; }
function author() { return "Maia Good"; }
function description() { return "A theme based on Spring Bloom template from http://www.oswd.org/"; }
}
?>
5. Create empty index.php
In this step we create an empty index.php for the new theme. An easy way to do this is to copy an index.php from an existing theme and delete all the lines between <body> and </body>. Do this if you are using an earlier version of Exponent. For version 0.97 you can copy the code below, which is just an empty index.php ready to accept the information that is template specific from the index.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <html> <head> <?php $config = array( "reset-fonts-grids"=>false, "xhtml"=>true, "include-common-css"=>true, "include-theme-css"=>true ); echo exponent_theme_headerInfo($config); ?> </head> <body> </body>
The code between the <head> and </head> tags tells Exponent what CSS files to use and it also creates the title, meta, style, and script tags needed for the site, according to whether you want XHTML or not.
Prior to 0.97 this code was different. Then you had to include a link to the style.css file in the <head> tag of your index.php. Starting with 0.97 you tell Exponent which style files to include by setting the values in the array to true or false. In this example, I have set to false the YUI reset-fonts-grids styles (not used by Spring Bloom), true to use the common CSS (Exponent's administration modules styles), and true for the theme CSS (which is your template CSS).
Setting the theme CSS to true tells Exponent to find the files with a .css extension in your theme subfolders and to include them as part of the CSS for the site. This, of course, also means that you don't want to have irrelevant or junk .css files in that folder. Does anybody else do what I do?... style1.css, stylenew.css, style2.css, stylesave.css ?.. ;-)
6. Understand the template structure
Take a look at the <body> section of the index.html for the template.
<body>
<div id="header">
<h1>Spring Bloom</h1>
<p>Design. Style. Usability.</p>
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
<div id="content">
<div id="sidebar">
<h1>Search</h1>
<input value="Start Your Search..." type="text" />
<h1>Latest News</h1>
<p>Spring Bloom has been released to the public. Preview or download it now and leave your comments! <a href="http://www.edg3.co.uk/edg3-design-nine-released/" class="more">Read More »</a></p>
<p>I have created a new site to list all of my favourite design related links. (I know... how boring!) <a href="http://www.edg3.co.uk/edg3couk-links/" class="more">Read More »</a></p>
<h1>Links</h1>
<ul>
<li><a href="http://www.4templates.com/?aff=christopher">4Templates</a></li>
<li><a href="http://www.edg3.co.uk">Christopher Robinson</a></li>
<li><a href="http://www.evohosting.co.uk/affiliate/idevaffiliate.php?id=133">EVO Hosting</a></li>
<li><a href="http://www.opendesigns.org/profile/?user=christopher">Open Designs</a></li>
<li><a href="http://www.text-link-ads.com/?ref=31171">Text Link Ads</a></li>
<li><a href="http://www.w3csites.com/profile.asp?u=christopher">W3C Sites</a></li>
</ul>
</div>
<div id="main">
<h1>Welcome To Spring Bloom</h1>
<p>For simplicity in this how-to the paragraphs of text have been removed from the template.</p>
</div>
</div>
<div id="footer">
<p>Copyright © <a href="#">Spring Bloom</a> 2007 | Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a> | Sponsored by <a href="http://www.opendesigns.org/">Open Designs</a> | Valid <a href="http://jigsaw.w3.org/css-validator/">CSS</a> & <a href="http://validator.w3.org/">XHTML</a></p>
</div>
</body>
Find the <div>s with "id"s that are the containers for sections of the template. Spring Bloom has three high level <div>s:
- header
- content
- footer
This is typical of many templates. In addition, the content <div> is sub-divided into two other parts: sidebar, and main. Here is a visual of the Spring Bloom structure.
Identify in this manner the <div> structure of your template and place it in the index.php. Put the <div>s, without any of the information inside them, between the <body> and </body> tags. The information that was inside the <div>s will be placed in the index.php as Exponent modules in the next steps. We will look at each of these <div>s in separate steps.
Now the index.php should look similar to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<?php
$config = array(
"reset-fonts-grids"=>false,
"xhtml"=>true,
"include-common-css"=>true,
"include-theme-css"=>true
);
echo exponent_theme_headerInfo($section,$config);
?>
</head>
<body>
<div id="header">
</div>
<div id="content">
<div id="sidebar">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
</body>
7. Place Exponent modules in the header <div>
Look at the header <div> to classify the pieces of information. We are assuming here that the header will be the same for all pages of the site being built. I did choose a template with just one header. This "how-to" will not discuss different headers, or different subthemes even if they are possible and easy with Exponent.
The Spring Bloom template header has three areas with information:
- Text
- Site navigation links
- Text
In Exponent these can be implemented with:
- textmodule
- navigationmodule
- textmodule
The two text areas are intended for a company name and motto. I decided to combine these in just one textmodule because there is so little text, and it will be identical for all pages. The site navigation menu shows only the top hierarchy of the site, so I will put in an Exponent navigationmodule, with a "Top Nav" view. (Right, the module view is the second parameter.) Now we can add the Exponent modules to the header <div> in index.php. The header <div> will look like:
<div id="header"> <?php exponent_theme_showModule( "textmodule", "Default", "", "@company" ); ?> <?php exponent_theme_showModule( "navigationmodule", "Top Nav", "", "@top"); ?> </div>
Alternatively we can leave the <h1> and the <p> tags in the header, replacing just the text with our own. This is also a good solution because the text in these tags will be the same for every page of the website. Therefore, hardcoding it in the index.php is acceptable. You decide which way you prefer. Here is the alternate code:
<div id="header"> <h1>My Exponent Site</h1> <p>Simple. Friendly. Useful.</p> <?php exponent_theme_showModule( "navigationmodule", "Top Nav", "", "@top"); ?> </div>
8. Place Exponent modules in the content <div>
Again we look at the template to classify the pieces of information in the next <div>. The content <div> in this template is divided into two other <div>s: sidebar and main.
We will look at the sidebar first. Visually we can see three functional areas in the sidebar. If we look at the index.html we see that each of these areas is titled with an <h1> tag. The sidebar has:
- A search function
- News
- A list of links
In Exponent these can be implemented with:
- searchmodule
- newsmodule
- linklistmodule
Now we can introduce the Exponent modules into the sidebar <div> in index.php. We will assume here that this information will stay the same for all pages on the site. In Exponent a module title is tagged with an <h1> tag, so we will code these modules to include a title. (Third parameter in the function.) The sidebar <div> code will be:
<div id="sidebar">
<?php exponent_theme_showModule("searchmodule","Default","Search"); ?>
<?php exponent_theme_showModule("newsmodule","Default","Latest News"); ?>
<?php exponent_theme_showModule("linklistmodule","Default","Links"); ?>
</div>
Looking at the main <div> we see that it has just one function: text content. So, from the previous <div>s we could say that the main <div> only needs a textmodule. True. This would work, if you want the same text in every page of the site. But, that is not what I want. I chose a template that shows site navigation for five different pages. There are different ways that we could code this <div> in Exponent, but I will show you one here that serves the purpose easily of allowing different content in different pages, and also gives Exponent administration a space.
<div id="main"> <?php exponent_theme_main(); ?> </div>
Simple! Just put the theme main function in there. This function will create one container on the right hand side of the page, and you can do whatever you want with that container after you login to your site. Maybe one of your pages has a textmodule added to that container, but another will have a calendarmodule, and yet another will have a weblogmodule. This gives you the flexibility of having different content on the right hand side of different pages, which is how this template is designed.
9. Place Exponent modules in the footer <div>
The footer <div> is very simple with some text information to appear identical in all pages. I believe that you can already understand that the code is simply:
<div id="footer">
<?php exponent_theme_showModule("textmodule","Default","","@footer"); ?>
</div>
And for Exponent 0.97 one more piece of code goes into your index.php, just before your </body> tag:
<?php echo exponent_theme_footerInfo(); ?>
10. Configure your site to use your new theme
Finished! The theme is ready for use. Go to your Administration Control Panel -> Configure Site -> Edit -> Display Settings and select your new theme for your site.
Voilà! An Exponent site with Spring Bloom Theme
