3. Designing a Skin

qE is a template driven script. So, modifying qE 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).

  1. User interface (UI) template files are located in /skins/SKIN_NAME/ folder; for example /skins/default.
  2. ACP template files are located in /skins/_admin/ folder.
  3. 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, qE support mobile browsers version by using this skin. But it's recommended to use responsive design approach instead.
    • /skins/_module/ folder stores all module related skin files.
  4. 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).

Syntaxes

qE is using its own template engine. The capabilities is of course limited, but on the other hand, is very easy to use.

Master Template

qE 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).

Outline as 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

main body

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 qE, 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

qE also has some special tags:

  1. 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 -->
  2. 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.
  3. 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.
  4. SECTION
    • <!-- BEGINSECTION section_name -->some html<!-- ENDSECTION -->
    • This is a unique feature of qE. By using section, qE reuse some elements, so you don't need to create same design again and again.
    • See sections.tpl for intensive use of section.
  5. The skins/default/outline.tpl provides a good example on all of above tags.
  6. 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.
  7. Also, please note the spacing & number of dash '-' characters.

    dashes
  8. 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 qE:

  • sections.tpl contains lots of small html sections. qE 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 qE 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.

Posted On: Mar-05-2010 @ 12:00am
Last Updated: May-06-2013 @ 06:35pm

There is no comment. Why not be the first?

More Comments/Post Your Own

Advertisement

Online Users

There are 94 users online.

Connect

Connect with us on Facebook

Newsletter

Subscribe to our newsletter for the latest updates and exciting promotions!