Create new template - Part 1 - Template and skin directories

From TomatoCMS Documentation

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:

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

(To be continued ...)