Make Your Own Clesto Template

Making your own Clesto template or modifying your existing design to work with the the Clesto CMS is very easy.

Here is a simple HTML template you can use when you make a template.

Example of minimum HTML in the file template.php:

<!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">
<head>
<title><?php title_tag(); ?></title>
<link rel="stylesheet" href="<?php css_file(); ?>" type="text/css" />
<?php meta_tags(); ?>
</head>

<body>
<div id="header">
	<h4><a href="<?php home_url(); ?>"><?php site_title(); ?></a></h4>
	<h5><?php site_description(); ?></h5>
	<?php navigation_ul(); ?>
</div>

<div id="content">
	<h1><?php page_title(); ?></h1>
	<?php content(); ?>
</div>

<div id="textbox">
	<?php fixed_textbox(); ?>
</div>

<div id="footer"><p><?php copyright(); ?></p></div>

<?php statistics(); ?>
</body>
</html>

For a full explanation of all the template functions see the page Template functions explained.

This part is not needed if you don't want:

<div id="textbox">
	<?php fixed_textbox(); ?>
</div>

Example of skeleton CSS in the file style.css:

body {}
a {}
a:hover {}
li {margin-bottom:8px;}

#header {}
#header h4 {}
#header h4 a {}
#header h5 {}

ul#nav {}
ul#nav li {}
ul#nav li a {}
ul#nav li#active {}
ul#nav li#active a, ul#nav a:hover {}

#textbox {}
#textbox h4 {}
#textbox ul#nav2 {}

#content {}
#content h1 {}
#content h2 {}
#content h3 {}
#content h4 {}

#footer {}
#footer p {}
#footer p a {}

fieldset#contact-form {}
fieldset#contact-form label {}
fieldset#contact-form input {}
fieldset#contact-form textarea {}
fieldset#contact-form #contact-button {}

Then just fill in the values in the {}.