This site uses cookies in order for our service to work better. Learn more I understand

Creating a template

1. Adding a new template (graphic style)

In order to add a new graphic template click button “add” in graphics->templates tab and then enter the name of your new template.

For those less advanced we advise creating new graphic templates by copying existing ones provided with our CMS. It will allow you to save some time. To do that, click on the button with two green arrows that can be found to the right of the desired templates name. This will create a template with the original name with "copy" added at the end. Change its name to whatever you would like it to be.

After doing that let us move on to step two.

2. Editing the main file (main.tpl)

Windu templates are using Twitter Bootstrap, a so called CSS framework. It is a system of css styles allowing for fast creation of good looking and clear websites.

A graphic style with implemented Twitter Bootstrap has automatic to the whole base of ready elements at its disposal. Documentation can be found at the following address twitter.github.com/bootstrap/.

Standard code of a website looks like this:

Przechwytywanie

In the code we have respectively:
  • As you can see in lines 8, 9, 25 we have references to the variable $meta, which returns metatags
  • In lines 13-15 we have a code inserting CCS styles according to the system configuration and contents of our CSS folder. Everything is in alphabetical order with main.css inserted at the end as the main file.
  • In lines 16-19 variables required in JS code are being set.
  • In lines 22-24 there is a code insterting JS files similarly to CSS files.
  • In line 28 a widget with notifications is inserted.
  • In line 29 the main template is included, that is the template, which we have set for our page (the choice is made using a drop-down list available for each page). This template is in our “views” folder.
 

3. Defining new views

Views are files contained in the “views” folder. One of those files can be assigned to our page. Thanks to views we we have the ability to define few teamplates, we don't have split it into a main page and a subpage, in this case we have complete freedom.

In order to add a view click the green plus next to the “views” folder and then enter a name for our new view, it has to be unique within our folder.

After finishing this operation our new element will appear, in both the edition panel as well as in the available views list.

In addition we have a “common” folder at our disposal, in which we can place elements thatare common for all the views, for example the footer or top menu of the site. There is no sense in copying the code every time, thats why we're creating a new element in the “common” folder. Then we instert it into our view by entering the proper code:
 
{{include file='../tpl_common/footer.tpl'}}

 

4. Editing views

To edit our view, click the blue pen next to the chosen element. On the right side chosen the templates code will appear. It's an HTML code with use of the smarty.net system generated inside of the body tag.

Basic elements which should be inside of a view are:
  • {{$page->name}} – pages title
  • {{eval var=$page->content}} – pages content generated via “eval” which generates smarty codes inside the view.
  • chosen widgets are inserted by  the “widget inserter” which is turned on by “widget” under the content edit panel
Example view of the page:

content
 

5. Adding and inserting images

In order to add a static image to our template you have to click on the green plus next to the “img” folder. Then click on the gray “i” next to a newly added file and copy the path, which then you can paste anywhere within our code.
 

6. Adding and editing CSS styles

CSS styles are in the “css” folder, main style is loaded as main on the very end and is called “main.css”. By default the styles from the Twitter Bootstrap framework are available, its documentation is available on: twitter.github.com/bootstrap/.

We can of course create our own styles from scratch, in order to do so delete the bootstrap declaration, both css and js.
 

7. Adding and editing of JS code

JavaScript editing is done similarly to CSS code.

Help Center

Do you have a technical problem?