You are here: start » template_tutorial

Template Tutorial

The following is the translation of the fine template tutorial for beginners by Winfried Scharff.

Introduction

My decision to use CMSimple was influenced, amongst others, by the delightful fact, that in my second attempt to use CMSimple I came accross CMSimple_XH 1.2 with a template by Gert Ebersbach. My first attempt mainly failed, because in 2005 there were hardly any usable and attractive templates, as 99% of the available templates were based on tables. To customize or modify something in a multiply nested table structure, particularly with background GIFs, was more than frustrating.

After that attempt followed 5 years of Wordpress, what wasn't/isn't more beginner friendly regarding the modification of the theme templates, but usually one finds templates which's layout is set by CSS. At first glance that's not really better (here diverge the views of the web designer and the newbie), but, however, on the second glance it's way more lucid and it's easier to customize the template—even if one isn't knowledgable about HTML and CSS like me (a condition I'm not really interested to change; I have other interests and hobbies!). With a bit courage doing the copy&paste, occasional looking in the documentations about HTML/CSS which are available online, some general googling and a good backup strategy, one can accomplish a lot.

The templates by Gert Ebersbach looked tidy, were cleanly structured and commented—good to start with. Finding the appropriate template was easy, to customize it to my needs nearly trivial (at least after 5 years of experience with WP templates), and that was enough for about two years. But as I wrote before:

The template was sound and reliable, but after two years in use in the meantime nearly as exciting as a parking garage after midnight

So in a wild copy&paste orgy, combined with excessive deletions, I have adapted one of my old Wordpress favorites, and in the meantime I'm quite satisfied with gonzo-minimal.

OTOH I've noticed, that nothing had changed since past times in this regard: the available documentation to make an own template is (a) outdated and (b) not really suitable for beginners. The only german tutorial about this topic I've found on Lars Ellmauer's website, which starts very well and is comprehensible, at least to the section, in which the complete stylesheet.css is presented without any further explanation. For me (and not only for my) that was the sudden end of the road. Finally it was easier to port a Wordpress template to CMSimple, than to shape something appealing from the CMSimple tutorial template.

Thus, as already announced in the editor's blog: we're knippling our own template, and now proceed to the basics.

Basics

On one hand we have our contents and on the other CMSimple and it's diverse functions, that access those. With regard to this it's worthwhile to mention the CMSimple functions, with whom the data can be accessed. Hier is a list of functions one finds in most templates:

  • head(): inserts meta tags and other head information
  • onload(): inserts some JS for the editor
  • sitename(): displays the site title
  • toc(): displays the regular table of contents
  • locator(): displays the browse path as breadcrumbs (e.g. Home > News > CMSimple)
  • searchbox(): displays the search functionality
  • editmenu(): displays the editor toolbar in admin mode FIXME
  • content(): displays the page contents in the template
  • submenu(): displays the submenu, if there are subpages
  • loginlink(): this link enables the admin to log in
  • sitemaplink(): creates the link to the sitemap
  • printlink(): creates the link to the print view of the page
  • lastupdate(): displays the date of the last modification
  • mailformlink(): creates a link to the email form, if an email address was entered

Some of these are dispensable, others are mandatory. Furthermore the typical CMSimple template has a head section, which one, lacking better knowledge, should simply adopt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>>

and at the bottom of the template one has to remember to close body and html:

</body>
</html>

Theoretically one could list the CMSimple functions in between, and had a functioning installation, which even passes as valid HTML 4.01 transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>><br>
<?php echo sitename();?><br>
<?php echo locator();?><br>
<?php echo searchbox();?><br>
<?php echo toc();?><br>
<?php echo sitemaplink();?><br>
<?php echo printlink();?><br>
<?php echo mailformlink();?><br>
<?php echo loginlink();?><br>
<?php echo lastupdate();?><br>
<?php echo editmenu();?><br>
<?php echo content();?><br>
<?php echo submenu();?><br>
</body>
</html>

Indeed that works, but it looks, er, rather lousy—nothing one would voluntarily use without good cause. But that is the scaffolding, which, when it's populated with HTML/CSS, makes a real website, that suits our imaginings, both functional as well as visual. Furthermore important: the scaffolding should be customizable without much effort, that is designed to be “future-proof”.

With “we” and “us” I refer to all, who are on the same or a lower level of knowledge about using HTML and CSS as I am, and metaphorically speaking I'm only in the second floor of a very, very high tower building, und you'll be told more than once to “apply something without asking”.

How do we get to an attractive, or at least viewable (without risking eye damage), working HTML/CSS framing, which could be married to the CMSimple floor plan? There's more than one way to skin a cat:

  1. Starting from scratch. Not really suitable, if one doesn't want to make HTML/CSS his passion or next hobby.
  2. Starting with an existing CMSimple template. Acceptable, but comprehensive customization tends to be rather costly.
  3. Starting with one of the numerous CSS template generators, that could be found on the web, which make a working scaffolding available. Great, absolutely legitimate for laymen—that's half the battle in most cases.
  4. Analyzing example templates on the web, and using the parts one grasps.

I have decided to use a mixture of (3) and (4), as the topic primarily is “CMSimple template … for laymen” and not “how to become a CSS guru”.

The planned template should have a header area, in which the site title and/or a logo and/or a banner image is displayed. Or only one of these. Furthermore it should have one or two sidebars, that can either be positioned on one or on both sides of the main contents. Of course a closing footer area goes with the territory. Because I don't like templates with fixed dimensions, it should become a template, that is able to adjust to the width of the browser to a certain extend. I will omit some of the CMSimple functions (as I don't need them), but that shouldn't be a problem, because, when we are finished, it's hopefully clear, how to add them in the place, where one wants to have them.

We need the following tools:

* a CMSimple installation; during development Portable_XH (Windows) is quite useful; for validating, what's necessary later, it should be a test installation on the own domain. The validation doesn't serve as a seal of approval for the own site, but is a valuable tool for debugging. The majority of my errors were simple typos so far; a missing / or > can have massive impact.

  • a reasonable text editor; I prefer Notepad++, which simplifies editing of HTML and CSS files enormously due to syntax highlighting and code folding.
  • a template generator, which supplies the suitable scaffolding. The assortment is diverse, the differences can be considerable.

equipped with these tools we proceed to the chapter “Contents looking for Structure”

Contents looking for Structure

Our contents will be presented by the respective CMSimple calls, the structure defines, where they will be positioned. Normally a website is composed of a header, the body and finally a footer. In the header there's the name of the site, sometimes also an image or logo. The body below is the primary contents area, mostly diveded in a wide area for the contents and on the left or right hand side a narrower area (sidebar), in which the menu and further elements as links, news or other small text elements are placed.

All is finished by the footer, in which copyright notices (for CMSimple the appropriate link to cmsimple.org or cmsimple-xh.org, depending on the used variant) and further links can be placed (for example to the site notice and the login link).

To have the basic structure, I have finally settled on a so called grid system. There are lots of templates generators for grids (google), but nevertheless one should basically understand the concept, to know at least roughly, what one's doing.

A grid is nothing else than a fixed structure consisting of rows and columns, in which the particular elements will be placed. To have sufficient flexibility, a certain minimum of columns is inevitable; a popular baseline value are 12 columns, however, there are many layout generators which offer much more columns. The most established grid system is probably the 960 system (960 is the width in pixels), and a first overview is given by the following images, which show grids with 12, 16 and 20 columns.

web57.ws_cms_images_tut_52.jpg web57.ws_cms_images_tut_53.jpgweb57.ws_cms_images_tut_54.jpg

12 has the advantage, that it's divisible by 2, 3 and 4, and more columns don't necessarily offer more possibilities. So we have a closer look at the 12 column grid:

web57.ws_cms_images_tut_56.jpg

12 columns at 60px, a spacing of 20px, left/right margin of 10px, and we've got the mystic 960px. Of course that works with other values for the number of columns, their width and spacing, what makes for other page widths. The basic idea is very simple. There are rows and cells. A row covers the full width, and cells can be as wide as 1 column, 2 columns, 3 columns, …, 11 columns, 12 columns. The rest is 101: one fills a row with as much cells until the 12 columns are filled. In practice the skeleton might look as follows:

web57.ws_cms_images_tut_57.jpg

The first row could be: logo (2), sitename (7), loginlink or search form or both (3). Second row: in my case a CoCo area (12). Third row: contents (8), sidebar containing the menu (4). Fourth row: 4 newsboxes or CoCo boxes. Missing: the fifth row with copyright notices (12).

Personally I don't like these fixed withs in pixels, but instead prefer flexible pages, which fit to the width of the browser in certain limits. That complicates the grid system a bit, and the solution using percentages instead, doesn't have advantages solely. And now something practical, the basic CSS for the grid system for our stylesheet.css:

.grid_1 { width:6.25%; } 
.grid_2 { width:14.583%; } 
.grid_3 { width:22.917%; } 
.grid_4 { width:31.25%; }
.grid_5 { width:41.667%; }
.grid_6 { width:47.917%; } 
.grid_7 { width:56.25%; } 
.grid_8 { width:64.583%; }
.grid_9 { width:72.917%; }
.grid_10 { width:81.25%; }
.grid_11 { width:89.583%; }
.grid_12 { width:97.917%; }
.column { margin: 0 1.04%; overflow: hidden; float: left; }
.row { min-width: 960px; max-width: 1280px; margin: 0 auto; overflow: hidden; }

.grid_1 to .grid_12 are our cells with the respective number of columns, and they define the width in percent; .column adds some margin and .row defines the row. The minimum width is 960px in this case, the maximum width is 1280px; these values can be adjusted to one's taste/needs.

And thereto we need the basic HTML for template.htm; for simplicity we reuse an existing template: gonzo-minimal. This one is rather classic in appearance and structure; header with image, contents area on the left hand side, sidebar with menu and the footer. Additionally we're using 2 CoCo boxes, but omit some other CMSimple functions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>>
<?php echo sitename();?>
<img src="./templates/gonzo-minimal/images/bfhoechst1980.jpg" alt="" width="100%" height="175">
<?php echo coco('coco_latest');?>
<?php echo editmenu();?>
<?php echo content();?>
<?php echo toc();?>
<?php echo coco('coco_sidebar');?>
<p><?php echo top();?> | 2001-2012 | © mein.name | <a href="?Startseite:Impressum">Impressum</a> | Powered by <a href="http://www.cmsimple.org/">CMSimple 4</a> | Template by <a href="http://web57.ws/cms/">w.scharff</a> | <?php echo loginlink();?></p>
</body>
</html>

If one has grasped the grid system shown above, the following is almost shockingly simple:

www.web57.ws_cms_images_tut_grid_d1.jpg

The resulting template.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>>
 
<!-- header: name of the site -->
<div class="row">
    <div class="column grid_12">
        <?php echo sitename();?>
    </div>
</div>
<!-- header: image taking the full width -->
<div class="row">
    <div class="column grid_12">
        <img src="./templates/gonzo-minimal/images/bfhoechst1980.jpg" alt="" width="100%" height="175">
    </div>
</div>
<!-- CoCo box for lead article -->
<div class="row">
    <div class="column grid_12">
        <?php echo coco('coco_latest');?>
    </div>
</div>
<!-- contents/edit area and sidebar with toc/coco_sidebar -->
<div class="row">
    <div class="column grid_8">
        <?php echo editmenu();?>
        <?php echo content();?>
    </div>
    <div class="column grid_4">
        <?php echo toc();?>
        <?php echo coco('coco_sidebar');?>
    </div>
</div>
<!-- footer -->
<div class="row">
    <div class="column grid_12">
        <?php echo top();?> | 2001-2012 | © mein.name | <a href="?Startseite:Impressum">Impressum</a> | Powered by <a href="http://www.cmsimple.org/">CMSimple 4</a> | Template by <a href="http://web57.ws/cms/">w.scharff</a> | <?php echo loginlink();?>
    </div>
</div>
</body>
</html>

Very important: if one calls plugins like Coco in a template, the plugin has to be installed! Otherwise the template doesn't work, and one sees a blank page or an error message from the server.

It's quite helpful to get used to comment the template. A comment is enclosed between <!– and –>. Also very useful is a formatting style, which shows by indentation where a div starts and ends. A really common mistake is, particularly with deeply nested divs, to simply miss one; however, it's already enough to forget a <, / or >. Notepad++ helps to avoid these mistakes.

The template above in combination with the stylesheet already looks quite similar to the original gonzo-minimal—at first glance. On looking more closely, it's apparent, that there's only one font family, the links are looking as in “the good old times” of Web 0.9, and some formatting styles are missing. Therefore a chapter about fonts, colors and general pretty up follows, so to say the “pimp my ride” of the page design.

Pimp my Site

If the visitor's browser doesn't get extra instructions, it uses defaults for the presentation of the visited website. That does not necessarily look like one desires. Therefore one has to define the instructions regarding fonts, colors and formatting of all kind in stylesheet.css.

Let's start with some basic elements and defaults: the colors of background and font, the primary font, the line height and the formatting of the H(eading) elements. An arbitrary amount of fonts can be listed and the browser chooses the first one it can display. In our case this will be “Times”; this font is likely to be available on most browsers and operating systems. Other fonts can be tested, too; the size of the font is defined with font-size:“value”. As “value” %, px or em can be used.

/* typography.css */
html {font-size:100.01%;}
body {font-size:90%;color:#222;background:#fff;font-family:Times, Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:2em;line-height:1;}
h2 {font-size:1.5em;}
h3 {font-size:1em;line-height:1;}
h4 {font-size:1.5em;line-height:1.25;}
h5 {font-size:1.2em;font-weight:bold;}
h6 {font-size:1em;font-weight:bold;}

It already works out; however, the links don't look really nice, and the date in the news boxes sticks too close to the heading. How to embellish the links is noted in the first four lines, the next two lines devote themselves to the presentation of lists (what also effects links, which are often displayed as a list), and the last line will be shown in the format combobox, and allows to push respectively formatted text to the right margin.

a{text-decoration:none;color:#111111;font-weight:inherit;font-style:inherit}
a:focus{color:#c0c0c0}
a:hover{text-decoration:underline;color:#000080}
a:visited{color:#666}

li{line-height:1.4em}
ul,ol{margin-bottom:20px;list-style:none}

.news-date {float: right; font-size: 10pt; font-style: italic; font-weight: normal;}

Now it looks considerably well-mannered; however, there are still several things missing, for instance, the quotes are, uh, boring.

Next line for the CSS:

blockquote{font-style:italic;border-left:5px solid;padding:1px 0 1px 12px;margin:16px 0 16px 16px;color:#777;font-size:1.2em}

To let images scale by the template, independ of their real size, we add the following statement:

.column img {max-width:100%;}

In this case the fields “width” and “height” should be left blank, when the images are inserted!

With that this small tutorial, without diving deeper into the CSS matter, is finished. The template works and is valid.

Again, for easy copy and paste, template.htm; for your own use don't forget to adjust the paths to your needs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>>
 
<!-- Header: Name der Seite -->
<div class="row">
    <div class="column grid_12">
           <h1><a href="http://www.web57.ws/cms" title="Startseite"><?php echo sitename();?></a></h1>
    </div>
</div>
<!-- Header: Bild über gesamte Breite -->
<div class="row">
    <div class="column grid_12">
        <img src="./templates/gonzo-minimal/images/bfhoechst1980.jpg" alt="" width="100%" height="175">
    </div>
</div>
<!-- CoCo Bereich für Leitartikel -->
<div class="row">
    <div class="column grid_12">
        <?php echo coco('coco_latest');?>
    </div>
</div>
<!-- Content/Editbereich und sidebar mit toc/coco_sidebar -->
<div class="row">
    <div class="column grid_9">
        <?php echo editmenu();?>
        <?php echo content();?>
    </div>
    <div class="column grid_3">
        <?php echo toc();?>
        <?php echo coco('coco_sidebar');?>
    </div>
</div>
<!-- footer -->
<div class="row">
    <div class="column grid_12">
        <?php echo top();?> | 2001-2012 | © mein.name | <a href="?Startseite:Impressum">Impressum</a> | Powered by <a href="http://www.cmsimple.org/">CMSimple 4</a> | Template by <a href="http://web57.ws/cms/">w.scharff</a> | <?php echo loginlink();?>
    </div>
</div>
</body>
</html>

The current stylesheet.css:

 /* gonzo-grid */

/* typography.css */
html {font-size:100.01%;}
body {font-size:90%;color:#222;background:#fff;font-family:Times, Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:2em;line-height:1;}
h2 {font-size:1.5em;}
h3 {font-size:1em;line-height:1;}
h4 {font-size:1.5em;line-height:1.25;}
h5 {font-size:1.2em;font-weight:bold;}
h6 {font-size:1em;font-weight:bold;}

a{text-decoration:none;color:#111111;font-weight:inherit;font-style:inherit}
a:focus{color:#c0c0c0}
a:hover{text-decoration:underline;color:#000080}
a:visited{color:#666}

li{line-height:1.4em}
ul,ol{margin-bottom:20px;list-style:none}

.news-date {float: right; font-size: 10pt; font-style: italic; font-weight: normal;}

blockquote{font-style:italic;border-left:5px solid;padding:1px 0 1px 12px;margin:16px 0 16px 16px;color:#777;font-size:1.2em}

/* Raster, das grid */

.grid_1 { width:6.25%; }
.grid_2 { width:14.583%; }
.grid_3 { width:22.917%; }
.grid_4 { width:31.25%; }
.grid_5 { width:41.667%; }
.grid_6 { width:47.917%; }
.grid_7 { width:56.25%; }
.grid_8 { width:64.583%; }
.grid_9 { width:72.917%; }
.grid_10 { width:81.25%; }
.grid_11 { width:89.583%; }
.grid_12 { width:97.917%; }
.column { margin: 0 1.04%; overflow: hidden; float: left; }
.column img {max-width:100%;}
.row { min-width: 800px; max-width: 1200px; margin: 0 auto; overflow: hidden; }

That's the base for further experiments. There's plenty of room for beautifying regarding the fonts and their sizes; there's also a lot of development potential regarding the way the links are displayed and, of course, the positioning of the elements on the page. The menu on the left hand side, and the content on the right? No problem, just exchange the grid elements in the respective row (.row):

<!-- Content/Editbereich und sidebar mit toc/coco_sidebar -->
<div class="row">
    <div class="column grid_3">
        <?php echo toc();?>
        <?php echo coco('coco_sidebar');?>
    </div>
    <div class="column grid_9">
        <?php echo editmenu();?>
        <?php echo content();?>
    </div>
</div>

and already you have the sidebar on the left hand side.

Enjoy experimenting!

A template building up on this tutorial is available in the download area as gonzo-h. As I'm fixing bugs and adding improvements in my downloadable templates, there may be more or less subtle differences in the HTML/CSS files compared to the ones that were worked out here.

The underlying grid system, that beats all other grid frameworks I have tested regarding its compelling nature and clarity, without limiting the possibilities too much, is:

Unfortunately, the site of the “1KB CSS grid” has gone offline at the beginning of 2013.

Improvements and Corrections

Nothing is perfect, and even if the already achieved looks nice and survives the validator, that doesn't mean that my worked out template.htm/stylesheet.css is particularly good or elegant, from the point of view of those who develop CMSimple (the CMS, plugins and templates). Generously, I have received some constructive criticism. I shall add hints and tips, that are easily comprehensible and realizable, in this chapter.

At first the head section was cleaned up; it's even possible to make it simpler and shorter and replace:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

with <!DOCTYPE html>. The resulting error message of the validator led necessarily, in a manner of speaking, to the next step, which was to replace the ungainly method of placing the header image directly in the template with the contemporary method to do that in stylesheet.css. So in template.htm the following line is removed:

<img src="./templates/gonzo-minimal/images/bfhoechst1980.jpg" alt="" width="100%" height="175">

and replaced by the following:

<div id=banner>
</div>

and in stylesheet.css the banner has to be defined:

#banner { background-image: url("images/bfhoechst1980.jpg"); background-size: 100%; height: 175px; background-repeat:no-repeat;}
 
You are here: start » template_tutorial
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Valid XHTML 1.0 Valid CSS Driven by DokuWiki