Layouts Design

HavaLite CMS

A new liteweight Content Management System (CMS)

Layouts Design

In this tutorial we going to show how to create your own design for Havalaite CMS. If you already know the basics of the layout design and you want to try by your self, you can download one or more layouts from this page and do what ever you like.

Now let's start doing something

The first thing we need is to create a folder in the folder "themes" of havalite and call it "myDesign". In this folder we create the following files:

  1. header.php  (is automatically included)
  2. index.php  (is automatically included)
  3. footer.php  (is automatically included)
  4. sidebar.php (need to be include)
  5. comments.php (need to be include)
  6. search.php (need to be include)
  7. style.css
  8. myDesign.png (this is a screenshot 180x150 with same name as the folder to preview in Settings)

You can surely put the content of all these files in index.php but we prefare to seperate them for a better organized view. We'll explain every part for it self:

1. header.php

The header part connsists of all header informations of a html site and its automatically included by havalite. We only need to retrieve some informations from the database and fill them in the right position. This job is done by our prepared functions that specially made for theme designing, such as:

hava_options('title'); // gets the title of the website
hava_options('description'); // gets the description of your website
hava_template_url(); // get the right path to your template folder
hava_single_post($p, 'tags'); // get the keywords of the current post

A simple header with these functions will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<title><?=hava_options('title'); ?></title>
<link type="text/css" href="<?=hava_template_url(); ?>style.css" rel="stylesheet" media="screen" />
<link rel="shortcut icon" href="<?=hava_template_url(); ?>images/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="<?=hava_options('description'); ?>"  />
<meta name="keywords" content="<?=hava_single_post($p, 'tags'); ?>" />

2. index.php

As we said, the index.php is the most important file in our template folder and actually we need only this one for a simple design. In this file there are a plenty of functions to use, here comes the content or the body informations of our blog.

We have to think over what kind of containers we are going to use and the id or class names

3. footer.php


Here are some clean CSS Layouts to use for Havalite CMS (later we'll prevent more). You can see a demo how they look like, download or edit one of them online with our CSS Generator (Style Sheet Generation "SSG")

Layout 1: preview | download

Layout 2: preview | download

Layout 3: preview | download

Layout 4: preview | download

Layout 5:preview | download

Design your own stylesheet template in 10 minutes onlline

comments powered by Disqus


    Leave a Reply

    Contact Info

    Phone: +49 941 26175

    Address: Ayman Teryaki,
    Prüfeninger Str. 48,
    93047 Regensburg, Germany

    Want more info - go to our contact page or visit Google+


    Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

    Recent Comments