Create new template - Part 1 - Template and skin directories

Template:Inuse In this series, I will show you how to create a new template for TomatoCMS. Thank sliver163 who sent me this template which was already done in HTML and CSS formats.

This probably is long waiting post. In this guide, I will show you how to create a new template which looks like following screenshot:

caption

The template and skin directories are app/templates and skin respectively. Each template can have multiple skin which allows your website to switch between skins. Follow is the structure of template and skin directories:

TomatoCMS_Root_Dir
|___app
| |___templates
| | |___blog
| | |___default
|___skin
|___blog
| |___default
| |___default.css
|___default
|___default
|___default.css

In other words, the general directory is:

TomatoCMS_Root_Dir
|___app
| |___templates
| | |___NameOfTemplate
|___skin
|___NameOfTemplate
|___NameOfSkin
| |___default.css
|___OtherSkin
|___default.css

I assume that we'll create new template named sample and associated skin named plus. Let's create its directories:

TomatoCMS_Root_Dir
|___app
| |___templates
| | |___sample
|___skin
|___sample
|___plus
|___default.css

default.css file in app/skin/sample/plus is used to define skin styles