How to use an existing template with W3StudioCMS

This tutorial is based on the template Crystalx by Nuvio and I refer to it to explain how to import an existing template in W3StudioCMS. You can download the original file by clicking this link. After you have downloaded it, extract it and open the crystalx-01 directory.

Inside the directory, there is the template file called index.html, the “css directory” that contains all the css used by the template and the “design directory” with the images.

In W3StudioCMS templates are organized in projects. This means that a project can have one or more templates. To import the template the first step is to create a folder with the name of your project, I called it crystalx.After this operation create a new folder inside this directory and calle it with the name for your first template. I called it crystalx01.

Copy all the contents of the crystalx-01 directory contained into the downloaded file, into the template folder, crystalx01 in our sample. Open the html file and delete all the TAGS relatives to the doctype, the head section and only the body tag. In this way only the pure structure of the page will remain. See the sample below.

[DELETE]
<?xml version="1.0"?> <!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" xml:lang="en" lang="en">
<head>
  [head contents]
</head>
<body>
[/DELETE]
[STRUCTURE CONTENTS - Leave intact]
[DELETE]
</body>
</head>
[/DELETE]

Save the file with the same name of the template directory plus the php extension, in this case crystalx01.php. Into the directory create a new file called data.yml. This file will contain the data that will be insert everytime a new page is inserted.

Note: The convenction for the names explained must always be respected, otherway the template will not work.

Tutorial: 1 - 2 - 3 - 4