Fork me on GitHub

create a skin

An article by Gaspard Bucher

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.

turn dev mode on

The “dev mode” gives you easy access to the templates of the the node you are viewing. In the “admin” page (click on your login name) you see something like this:

turn dev on

Click on “turn dev on”. You should then see an additional “dev” menu on all pages:

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, giving you a quick way to edit the them:

open dev menu

starting from scratch

1. create a new Skin object

It is recommended to keep all Skins together and create all “skin” nodes in the “skins” section, but that’s not mandatory.

adding a skin

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.

template setup

Create the initial Node.zafu template in a Skin.

You should now have:

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

starting from an existing template

Steps:

  1. Either compress an existing standard xhtml template folder to a .tgz file (archive should contain a directory) or export a zena skin (option in the dev_mode overlay for skins). To properly rename an exported skin, extract the .tgz file, rename the contained folder, and adapt or delete the .zml file. Then compress the skin to a .tgz again.
  2. In the skins section, click on “add_document”
  3. Select the “import” tab.
  4. Choose “Skin” as the initial node class.

testing the new skin

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:

drive popup

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.

You are now ready to start editing your new skin