11.1 Skinning
You are here: C97net • Documentation
Modify Kemana to match your design.
Kemana is a template driven script. So, modifying Kemana to match your site is very easy, you don't need to edit any PHP files (which can be difficult, even for a master), you only need to edit several template files (*.tpl).
- User interface (UI) template files are located in /skins/SKIN_NAME/ folder; for example /skins/default.
- ACP template files are located in /skins/_admin/ folder.
- There are several special template files located in:
- /skins/_common/ folder stores commonly used elements, which are template or image files used by both UI & ACP templates.
- /skins/_fman/ folder stores file manager related files.
- /skins/_mail/ folder stores email template files.
- /skins/_mobile/ folder stores mobile version template files. Yes, Kemana support mobile browsers, and adapt your site layout to minimalist design provided in this template.
- If you need to create additional UI skin, simply create a new folder in /skins/ folder, eg: /skins/my_own_skin/, and select the skin in ACP.
Template files (*.tpl) are actually chunk of HTML files. You can use any text editor to edit it, but it's highly recommended to use an HTML editor, such as Notepad++ for Windows, and gedit for Linux (Ubuntu/Gnome in this case).
Master Template
Kemana is using a master template to contain site's content. A master template is like a skeleton, it appears everywhere, and act as a container. In all skins, UI, ACP & Mobile, the master template is outline.tpl (each skin has its own master template).
The content of all pages is contained in {$main_body} which is located in master page, which is outline.tpl. For example default skin's outline.tpl: /skins/default/outline.tpl
In the middle of outline.tpl, you will find {$main_body}, which will later be replaced by content, for example category listing (list.tpl), detailed informaton (detail.tpl), etc.
Variables
As you can see above, {$main_body} is actually a variable. In Kemana, variables are marked by {$var_name}, for example {$main_body}, {$current_user_id}, etc.
Default skin uses all possible variables. But you may not need them. For example, if you don't want to display user_id information, you can simply remove {$current_user_id} from your design.
Special Tags
Kemana also has some special tags:
- IF:
- <!-- BEGINIF $variable -->some html<!-- ENDIF -->
- <!-- BEGINIF $variable -->some html<!-- ELSE -->some other html<!-- ENDIF -->
- This is a conditional tag, if the $variable match, then it will display some html. A more complex conditional provided with <!-- ELSE -->
- BLOCK:
- <!-- BEGINBLOCK block_name -->some html<!-- ENDBLOCK -->
- <!-- BEGINBLOCK block_name --><!-- BEGINSUBBLOCK block_name --><!-- ENDSUBBLOCK --><!-- ENDBLOCK -->
- This is a looping tag. Usually used in a list.
- MODULE:
- <!-- BEGINMODULE module_name -->some module variables<!-- ENDMODULE -->
- This is module related function. It usually display some information from related module. Please consult module documentation in ACP for more information on the module variables.
- SECTION
- <!-- BEGINSECTION section_name -->some html<!-- ENDSECTION -->
- This is a unique feature of Kemana. By using section, Kemana reuse some elements, so you don't need to create same design again and again.
- See sections.tpl for intensive use of section.
- The skins/default/outline.tpl provides a good example on all of above tags.
- Please note the letter case, all tags must be in UPPERCASE.Except for the variable_name, block_name, and module_variables which is script dependent, and should be followed as is.
- Also, please note the spacing & number of dash '-' characters.
- If you don't need a specific block, eg. you don't want to display feat_content block in welcome page, DO NOT remove the block entirely, instead create an empty block, eg. <!-- BEGINBLOCK feat_content --><!-- ENDBLOCK -->
Special TPL
There are some special template files in Kemana:
- sections.tpl contains lots of small html sections. Kemana uses this to make sure it has design consistency along the web. So, if you find some weird design, such as:
<table border="0" width="100%">
<!-- BEGINBLOCK featured -->
<tr>
<!-- BEGINSUBBLOCK featured -->
<td width="50%" valign="top">{$featured_box}</td>
<!-- ENDSUBBLOCK -->
</tr>
<!-- ENDBLOCK -->
</table>
It probably defined in sections.tpl!
- ezform_section.tpl, qadmin_section.tpl both (actuall three of them) used by Kemana for ACP.
- module_*.tpl used by modules.
- pages.tpl (not page.tpl) same like sections.tpl, but separated for better performace, as pages.tpl usually contains long & complex html.
- pagination.tpl used to define pagination (aka page number, or page jumper) design.
- popup.tpl used to content popup mode.
- print_version.tpl used to regulate print version of any pages.
- rss.tpl used to regulate RSS feeds.
- and of course, outline.tpl as master template.
