How to create a theme for Etomite
One of the advantages of using a CMS package is that site publishers can maintain their sites with very little knowledge of the underlying technologies used. But to customize your site and make it your own it does help to know a little HTML, or at least convert a template done in FrontPage or DreamWeaver in to a template for your CMS package.
This tutorial is specific to Etomite, but many other CMS packages should be similar.
For this tutorial we're going to assume that you have designed an HTML page. You could have done the layout in FrontPage, DreamWeaver, or Notepad. It really doesn't matter for this post. Regardless of how you designed the page, the HTML looks like the following.
-
<title>This is my title</title>
-
<meta name="description" content="This is my site description" />
-
<meta name="keywords" content="these, are, my, keywords" />
-
<link href="/style.css" rel="stylesheet" type="text/css" />
-
<table width="100%">
-
<a href="/">Home</a>
-
<h1>Welcome</h1>
-
This is the content</td>
-
</tr>
-
</table></body></html>
Given, this is a very simple HTML page but it'll work for our purposes here.
The variables
Let's go over a few tags that you may need for your template. We won't use them all for our example, but you may want them for more complicated templates.
[(sitename)]
This becomes the name of your site. So if you entered "Bob's super site" as your site name in the Etomite options, this will be replaced with "Bob's super site".
[*pagetitle*]
This will be replaced with the name of the page from the editor in Etomite.
[*description*]
This will display the description that you entered in the Etomite editor.
[[GetKeywords]]
GetKeyWords is a snippet that will return a list of all the keywords that you have tagged your page with.
Personally I don't use the keywords feature in Etomite so I don't use this variable. But I'll be using it in the sample because so many people like to use the keywords meta tag.
And this is a fairly simple snippet. The base install for Etomite comes with dozens of snippets and there is a snippet library available on the Etomite site that contains code for almost any task you can imagine.
[*content*]
This will be replaced by whatever you have entered in the page as content.
Benchmarking
You can also use a few tags to benchmark the page load. [^qt^] will return the total query time, [^p^] will return the amount of time that PHP spent processing the page, and [^t^] will return the total time spent on the page. If you use these tags my suggestion would be to wrap them in HTML comments (<!-- & -->) so that they're not displayed on screen.
Fixing the template
Now it's time to replace a few things. To make this easier let's just look at the final changes and then we'll explain a few things after.
Notice that the template is almost the same as the one we designed to start except for 4 spots have been replaced with variables to display the page title, page description, keywords, and content.
What's next?
Admittedly this is a very simple and boring template. Odds are you want something a little fancier.
There are also several snippets available for creating the navigation menu without having to hard code it in the template. This is a good thing because new pages will be added to the menu without you having to edit the template.
Need help?
I've put up about half a dozen Etomite sites, all with custom templates, and have gotten pretty good at it. If you need help, post away in the comments below.
Question, Comments...
Do you have more questions. Please either leave a comment below or join us in our new forum.