If you want to create a new template for your website, you have to adhere to some conventions that pinion can work with your template. This conventions are explained below.

At the beginning you have to create an new folder in the folder "templates". This folder gets the name, how your tempalte should be called. In this folder you can apply a info.ini in which you can define a description and other things. Here you can look about the info.ini of the basic-template. You can also give a icon or rather preview-image to your template. This icon must be saved as icon-png an in the size 240x180px in your template folder.

For the styling of the template different page- and module templates must be applied. In this templates different template-variations can be defined, between this can be switched on every page and every content element. In every template variation (and first in every folder "standard") a php-file named _main.php must exist, which contains the complete structure of the page or the module and the page variables. Beside this you can create the folders "css" and "js", in which you define css- and js-files. This file will be imported automatically.

First apply a page-template, where the basic structure  of your page is defined. For that you create a folder named "page" in your template-folder. In this it is suggested, to define a folder named "standard" first, which contains the styling for the standard page.

Here you have to create _main.php and add your complete site structure to it (all that is written in the body of a normal html-file).

In areas you can add content. Areas must be defined, that pinion can rendern content in your page-template. For this the area-function is used:

Important: If you apply more template variations, you have to attend, that same areas in the variations have the same name, because by the name of the area it is defined which content will be rendered into it. When you switch between templates, which have not the same areas, conent positioned in this areas will not be rendered any more and will not be visible.

pageVars are variables for pages, that can be used in your templates and can be changed in the frontend later. So you can manage e.g. the background-color of your template with a ColorPicker in the frontend.

pageVars are defined in the info.ino of your template-variation (in templates->templatename->page->standard->info.ini):

info.ini in the page-folder
    [variables]
    color = "#554433"
    or
    [variables]
    color[editor] = "input.ColorPicker"
    color[value] = "#ffffff"

if you add your pageVars in your template, you can change many styling-settings directly in the frontend:

    [Code: pageVars in _main.php]

In the frontend pageVars can be changed with a click in the edit-icon of the page. If you are in the edit-mode of the page, you can open a group named "variables", in which the pageVars are listed. Here you can change your pageVars.

[Screenshot pageVars verändern und hinzufügen)

You can also add pageVars directly in the frontend and use them in the template.

You can apply template variations for every module, the tempalte selected by default is here also called "standard". For that you have to create a folder with the modulename in your template folder for every module. This folder contains the _main.php for the module structure an the folders "css" and "js" with the respective stylesheets and js-files.

If there is no template variation applied in your template, pinion takes the standard-template, that is defined directly in the module (like it does by the page-template).

To change the template-variation of a content element you have to click the change-template-icon in the edit-bar. After that you can see all variations of your template that are defined for this module. Click on the variant you want to use and pinion changes the styling directly.

tip: if you have styled a bit unclean, it can be, that the styling of the previous variation affects on the new styling, because the styleshhet is still loaded. In this case refresh the site an look if your styling is correct.

To style websites, which are created with pinion, simple and versatile, we are aimed to allocate a set of nice and different templates. If you want to join and allocate your template for other users you have the following possibilities:
- use the upload-form
- or send a zipped template to template@pinion-cms.org

Please regard, that you write name, version number and description in the info.ini and that the complete template-folder is zipped. It would be nice, if you also create a template-icon or rather preview-picture