Smart Learning

Introduction:

In this tutorial we will learn how to create our own contrexx theme. Its very easy to create a new theme in contrexx CMS. We have to follow only three steps to create a new contrexx theme. Contrexx Web Content Management System(WCMS) separates code and design with a sophisticated template system. You can create your own templates with pure HTML code. For creating a contrexx theme, you don't need to work on coding part of the WCMS. You need only HTML programming knowledge to work on the design part. We will create the new theme using contrexx default theme.

Step:1 Contrexx Default Theme

Before creating a new theme we must understand the contrexx default theme, because for every new theme, We will copy the contrexx default theme and rename it as our own new theme. So its very important to understand the contrexx default theme. Lets say for example, if our contrexx installation folder name is "contrexx_cms". The file structure of Contrexx Content Management System(inside the "contrexx_cms" folder) will look like this,


From the file structure of contrexx CMS, you will find a folder named “themes”, This themes folder is the designing part area of the contrexx CMS. Themes folder contains the different themes, If it is a fresh Contrexx CMS installation then you will find four themes. The default theme folder which is named as "contrexx_theme_2_1_en" will contain the following files.

 
There are several files with an image folder is used in the default theme,

Step:2 Create New Theme and Activate

copy default theme and rename it:

lets say the name of the new theme you want to create is “my_theme”. You have to copy the default theme which is named as “contrexx_theme_2_1_en” and rename it as “my_theme”.Then open the “index.html” file of the “my_theme” folder.

Find “contrexx_theme_2_1_en”

 

and replace it with “my_theme”.



Because we have to tell the coding part of WCMS, that we have created a new theme with the folder named “my_theme”, by setting the path name as shown in above coding image.

Step:3 Activate The Theme

To activate the new theme, you have to login in to the contrexx backend admin panel.To access the Contrexx backend admin panel via the following URL http://www.example.com/cadmin. Please replace "example.com" by your own internet address.If it is localhost "http://localhost/contrexx_cms/cadmin" . Here contrexx_cms is the folder name where we installed our contrexx package.

Then, the following page for the login appears:


Please enter the security code, user name and password. Then get into Administration => Layout & Design => New Theme. You will find the following page.

 
In the “ or use existing directory ” drop down menu you will find your “my_theme” theme.(because it already exists). You have to choose that theme as shown in the above image and click “create” to create the “my_theme” theme . After creating click on the “activate” menu, you will find the following page.


You can see four types of templates there.

1. Active PDF Template:
   
   
2. Active Printview Template:
   
   
3. Template for Mobile Devices
   
   
4. Active Template

Each thing contributes to different view. Such as PDF, Print, Mobile view and for web site view respectively. Now Let us concentrate on the Active Template for the Web site view.

Active Template:

We can have different themes for different languages. The default language will be highlighted with the rose background as shown in the above image. we have to activate the “my_theme” theme for the language we need, but now we have activated “my_theme” theme only for English language, then save it. We have successfully activated the “my_theme” theme now. If we want to preview our new "my_theme" just we can simply visit out site where contrexx is installed, if its localhost then visit  "http://localhost/contrexx_cms". Then the following page appears.


Thats it we have done it.