Customizing

Kezoor Documentation: Customizing

Where to start

When customizing a keZoor theme, the right place is the 'Install/Uninstall Themes > Theme Templates Editor' and 'Install/Uninstall Themes > Theme CSS Editor'.
Each keZoor page needs an 'index template' to work, this is selected in the section 'Template to use'  when creating or editing pages/pars/etc.
Lets say we use 'Template 9', when the page with this template is requested, keZoor will go to the file 'index_templates.tpl' and load the TPL Marks named 'index_templates_tpl9' and that is where you would begin customizing your theme.

Lets look at an example of this 'index_templates.tpl' file:

<!-- TPL BEGIN: index_templates_tpl9 --> <div class="header">     <div class="header_1">         <div class="top_bar_1">             <!-- CONDITION IF BEGIN: $User->Logged == "true" -->             Welcome {!USR.us_nick!} , <a href="?id=profile">my profile</a>             <!-- CONDITION IF ELSE -->             Want to be a member? <a href="?id=profile">Register</a>             <!-- CONDITION IF END -->         </div>                <div class="top_bar_2">                 {!INDEX.primarymenu!}         </div>     </div>         <div class="header_2">         {!INDEX.header!}     </div>       </div> <div class="bg_structure">                     <div class="box_mid" style="width:950px;">                    <!-- CONDITION IF BEGIN: $TPLConditions['ADSPUB.ContentTop'] == "true" -->                 <div>{!ADSPUB.ContentTop!}</div>            <!-- CONDITION IF END -->                                                  <!-- CONDITION IF BEGIN: $TPLConditions[top_content] == "true" -->             <div>{!INDEX.top!}</div>             <!-- CONDITION IF END -->                            <!-- CONDITION IF BEGIN: $TPLConditions['ADSPUB.ContentAfterTop'] == "true" -->                 <div>{!ADSPUB.ContentAfterTop!}</div>             <!-- CONDITION IF END -->                                                       {!INDEX.maincontent!}                  <!-- CONDITION IF BEGIN: $TPLConditions['ADSPUB.ContentAfterMainContent'] == "true" -->              <div>{!ADSPUB.ContentAfterMainContent!}</div>             <!-- CONDITION IF END -->                                <!-- CONDITION IF BEGIN: $TPLConditions[comments] == "true" -->             <div>{!INDEX.comments!} </div>             <!-- CONDITION IF END -->                               <!-- CONDITION IF BEGIN: $TPLConditions['ADSPUB.ContentBottom'] == "true" -->                        <div>{!ADSPUB.ContentBottom!}</div>             <!-- CONDITION IF END -->         </div>        </div> <div class="footer">         {!INDEX.footer!}           </div> <!-- TPL END: index_templates_tpl9 -->

This is an example of a part of the file:

The 'Template Codes' <!-- TPL BEGIN: index_templates_tpl9 --> and <!-- TPL END: index_templates_tpl9 --> denote where the template start and end, as explained in 'Templates > The basics'.
Inside this 'Template Codes', write your HTML Code for your page, this will be used every time a page that uses this 'Template Index' is requested.

Example, this theme will have two headers named "header_1" and "header_2". Inside "header_1" we will have two Bars named "top_bar_1" and "top_bar_2".
Inside "top_bar_1" we use 'Template Conditions'  to customize our output. In this particular example, we will output a text if the user is logged in, and a different one if the user is a Guest.

This 'Template Index'  will need some general marks to create the page, they are:

{!INDEX.primarymenu!} : This mark will be replaced by the contents of the Template File "body_menu.tpl", which contains some 'Template Codes'  to create a proper menu.

{!INDEX.header!}: This mark will be replaced by the contents of the Template File "body_header.tpl", which contains some 'Template Codes'  to create a proper header. Usually your site will have one header for all the 'Template Index'  pages, by using this mark, you don't need to write 10 times the same code in each one of the 'Template Index' codes, you will just write in the "body_header.tpl" file and it will load from there, this also applies for many templates.

{!INDEX.top!}: This mark will be replaced by the contents of the Template File "body_top.tpl", which contains some 'Template Codes' to create this section.

{!INDEX.maincontent!} : This mark will be replaced by the contents of the Template File "body_content.tpl", which contains some 'Template Codes' to create this section. This is probably the most important mark, because without it, there would be no content in our pages. Sometimes a different Template File is used to print an output in our page, this depends on the type of content we are using.

{!INDEX.footer!}: This mark will be replaced by the contents of the Template File "footer.tpl", which contains some 'Template Codes'  to create a proper footer. This mark behaves pretty much like the Header one.

As we see in many examples, we use any 'Template Conditions'  inside or outside our marks, to provide a better customization of the theme. For example, we could only show a header if the user is logged in, by using the proper 'Template Condition' and putting our Header mark inside it.

By customizing all of these 'Template Index' pages, you can create a very unique theme and infinite different designs of pages to display your content, there is no limit on how many 'Template Index' pages you can have, and each one with a different styling.

The CSS Code will be in your "styles.css" file, this can be modified by using the 'Install/Uninstall Themes > Theme CSS Editor' to complete this Template Customization.


You will find many other files in the 'Install/Uninstall Themes > Theme Templates Editor', which can be used when needed, as well as the examples we just saw (body_header.tpl, footer.tpl, body_menu.tpl, etc).