Converting a CSS template to a Clesto template

There are thousands of CSS and web site templates available for free download from the Internet such as those from Free CSS and Just make sure that you follow the terms of use which normally is to just keep the credit links in the bottom of your site.

Follow these steps on how to convert such a template to a working Clesto template.

  1. Download the template and add it to the folder "templates". Make sure that there are no double folders for the templates name and that the name is only consisting of a-z letters.
  2. Change the file name of the template file to template.php (normally it is index.html).
  3. Replace the contents of the title element with: <?php title_tag(); ?>
  4. Delete any meta-description, meta-keywords or meta-http-equiv="Content-Type" that is there and add this before </head>: <?php meta_tags(); ?>
  5. Replace the reference to the CSS-file with <?php css_file(); ?> and make sure that the name of the file is style.css and not for example default.css.
  6. Replace other path names with <?php template_path(); ?>/ such as for example CSS files other than style.css such as reset.css.
  7. Make sure that the CSS file does not contain any url('something') or url("something") but just url(something).
  8. Replace the H1 or H2 or which ones that is the web site title with <?php site_title(); ?>
  9. Replace the web site description with <?php site_description(); ?>
  10. Replace the navigation <ul> with <?php navigation_ul(); ?>
  11. Replace the the title of the page with <?php page_title(); ?> (should be inside an H1 element)
  12. Change any links to the home page from for example href="index.html" to href="<?php home_url(); ?>".
  13. Delete the temporary content that is there and place <?php content(); ?> in it's place.
  14. Remove any search box that could be there.
  15. Remove the content of the fixed textbox with <?php fixed_textbox(); ?>
  16. Remove the copyright notice but not any links to design credit and replace with <?php copyright(); ?>
  17. Right before the </body> add: <?php statistics(); ?>
  18. Upload the folder in the template directory and choose the new template in the settings.

Useful CSS to add:

ul#nav #active a {text-decoration:underline;}
ul#nav li:last-child a {border:none;}

img {background:#fff;padding:1px;border:3px solid #eee;margin:10px;}

#content li {margin-bottom:7px;}

fieldset#contact-form {margin:20px 0px 20px 10px;padding:10px;color:#000;width:380px;background:#eee;border:2px solid #aaa;}
fieldset#contact-form label {font-size:13px;}
fieldset#contact-form input {height:20px;font-size:15px;margin-bottom:15px;padding:3px;}
fieldset#contact-form textarea {font-size:15px;margin-bottom:15px;width:360px;padding:3px;}
fieldset#contact-form #contact-button {font-size:14px;height:30px;margin-left:30px;}

input:focus, textarea:focus {background:#fff;border:1px solid #555;}

blockquote {font-style:italic;}