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:
Click on “turn dev on”. You should then see an additional “dev” menu on all pages:
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:
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.
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 existing template
- 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.
- In the skins section, click on “add_document”
- Select the “import” tab.
- 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:
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.