create a skin

This tutorial will teach you how to create a new theme called green for your website. You must have admin access rights to do this.

You can also watch the video on this subject.

starting from scratch

1. create a Skin object

It is better to create this special node in the “skins” section, but that’s not mandatory.

2. create a Node template in the skin just created

The “Node” template is used to render all nodes, without any specialization. You will later create “Project, Contact, Post, ...” templates to change the layout for these special nodes.

To create this template, click on the “add document” to open the document popup and move to the “template” tab and set the “class scope” to “Node”. You should leave the name and mode blank.

Create the initial Node.zafu template in a Skin.

You should now have:

root
    +-- skins (layout themes)
      +-- green
        +-- Node.zafu

starting from an xhtml template

Steps:

compress xhtml template folder
in “skins (themes)”, “add_document”
clic on the “import” tab
select “Skin” as initial node class
upload

testing the new skin

turn dev mode on

To see your website rendered with the new skin, you should first enable “dev” mode (it will be easier to edit the layouts later). In the “admin” section (clic on logged in name):

Clic on “turn dev on”. You should then have the menu on the left and each page now has the “dev” menu:

When you pass with the mouse above the menu, you get the list of zafu templates and assets used to render the current page. This gives you a quick access to edit a template or stylesheet :

define a node as using the new skin

At this point, it is best to create a node for testing. Simply create a Page at the root of your website name “green_test”. Open the “drive popup” using the drive button () on the “green_test” page:

Set the skin used to render a Node.

reload “green_test” page

If you have created a skin from scratch:

You should get a… blank page ! That’s normal since the Node.zafu template does not contain any display rules.

If you have created a skin from an existing xhtml template:

You should get an exact copy of the “index.html” file, ready to be adapted.