1. Introduction:
Before start creating the Contrexx themes, one must get familiarized with the file structure that is being followed in Contrexx cms. All the theme file will be placed inside the 'themes' folder in the project folder. After the fresh installation, one could see four folders inside the themes folder. Each folder symbolize a theme.
2. Layout and Design:
To view the list of themes and its related files login in to admin panel and get into Administration → Layout & Design. In the overview section you can see the list of themes that are included in that project. The active theme is mentioned as '(Default)' in that list.
3. Create a New Theme:
Start Creating a new theme from Administration → Layout & Design → New Theme. Here you create a theme from the already exsisting theme file. If you already have a Theme folder, just copy that folder to 'themes' folder inside your contrexx installation. Then select the 'use exsisting directory in the backend' and you can see the folder name that you copied in the themes folder. Select that theme and click 'Create' button. So that a new theme will be installed. Or else you can create a new theme from scratch or from the template already in your contrexx installation.
To create a new theme from scratch give the name for your theme in 'New name of directory' and if you want theme from template, select those from the select available at the right side. Or else leave it as default and click create.
4. Activate the New Theme:
Now Click on the Activate tab, placed above this table. There you can see a list of languages and their corresponding selected themes. You can see four types of templates there.
- Active PDF Template:
- Active Printview Template:
- Template for Mobile Device
- Active Template
If you have chosen a exsisting template you can see the new design in the front end or else you will get a error in the front end stating 'Variable placeholder 'CONTENT_FILE' not found'. In the later sections we can see why this error occurs.
5. Placeholders:
The placeholders plays a major role in the template creation. There are some must know predefined place holders such as
- NAVBAR_FILE
- CONTENT_FILE
- CONTENT_TITLE
- CONTENT_TEXT
- SUBNAVBAR_FILE
These placeholders includes the corresponding content to this file. For example the NAVBAR_FILE includes the navigation bar to the file where ever it is used.
6. Index.html
The Whole Template gets included in the index.html file only. It contains the header and the footer information. NAVBAR_FILE is included in the header. Here the CONTENT_FILE is a compulsory palceholder. Because that is the only while includeds the contents to the template. If you are in the home pahe home.html is included or if you are in the sub pages, corresponding subpage content from content.html is included through this CONTENT_FILE. CONTENT_TITLE and CONTENT_TEXT fetches the corresponding page's content and title from the content manager in the sub pages.
7. Content Manager:
In the Content manager section you can create new pages and add contents to those pages and on saving that, all the changes will be reflected in the front end dynamically through the placeholders that we have used.
8. Stylesheets:
The style.css is the main stylesheet file that is linked to index.html file. The general styles of the html entities can be written in this file. And style for home page contents, subpage contents, navigation bar, sub navigation bar can be written seperately in home_layout.css, content_layout.css, navbar.css and subnavbar.css respectively and these stylesheets can be imported in the styles.css file.
9. info.xml
After succesfully creating the theme edit the info.xml file which will contain the information about the author, company and version of the theme. These things can be seen in the import/export section in the administration → Themes.
