Epan.in Website

Documentation [ Website | ERP | Template | Developer ]

Template Contribution

Web Development

Website Builder

Printing module flow

Introduction To xEpan

HR Application

Communication Application

Project Application

Digital Marketing Application

Commerce Application

Production Application

Account Application

CRM Application

Epan Drive

My Menu

Getting started

The easiest way to master Epan Template system is to start with existing HTML Template and convert it into Epan Template. For this section we are taking one free HTML template from internet and will convert it into Epan Template. 

We will have a step by step tutorial in next and a video followed by but here are the steps just to get started.

Assume you have a HTML Template in folder a folder, lets call it www, but it can be anything like template2134.

  1. create a folder called 'layout' in your root of your template folder.
  2. copy index.html file into it, we will extract common portion there and will replace main page with Page Epan Component.
  3. Open that file in code editor, and do the following
    1. Wrap your all code in body that is required under a div with class xepan-v-body, that actually acts like a virtual body for template and discards anything outside this. This helps system discard anything that is added at runtime either by scripts or any admins you have installed in your browser.
      usually in first xepan-sortable-component in body tag, to make it more easy to understand.
      <body>
          <div class="xepan-v-body xepan-component xepan-sortable-component" xepan-component-name="Main Body">
              <nav>
                  ...
              </nav>
              <div xepan-component="xepan/cms/Tool_TemplateContentRegion" class="xepan-component xepan-page-wrapper xepan-sortable-component">{$Content}
              </div>
              <footer>
                   ...
              </footer>
          </div>
      </body>
    2. Replace main page area (Where the page is supposed to placed) with following code.
      HTML/HEAD/BODY/NAVIGATION/ Replaceable content /FOOTER 
      <div xepan-component="xepan/cms/Tool_TemplateContentRegion" class="xepan-component xepan-page-wrapper xepan-sortable-component">{$Content}</div>
      This portion will render your main pages in places
    3. Add the following section just before </head> tag
      <meta name="description" content="{meta_description}{/}">
      <meta name="keywords" content="{meta_keywords}{/}">
      <title>{title}xEpan CMS{/}</title>
      <!--xEpan-ATK-Header-Start
       {$js_block}
       {$js_include}
       <script type="text/javascript">
       $(function(){
       {$document_ready}
       });
       </script>
       <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js"></script>
       xEpan-ATK-Header-End-->
      You should remove other meta tags for keywords and description.
    4. Remove any jQuery or jQuery UI file included in this page-template, as the system will include these by itself.
    5. Add the following lines just after your body tag to allow any analytical code to be inserted
      {$after_body_code}
  4. Since your common Page-Template is ready just open all html files on root in code editor and remove all common portion from files and just leave page html content only.
  5. Your template is now ready for Epan Website builder. Its time to make contents editable in live edit mode and allow to change images etc. It is also as easy as the above steps, in-fact easier.

To Make content editable you have to simple add few classes and/or attributes on your html tags and thats it. Here are few classes that defines what they do.

  • xepan-component : This css class makes anything Epan Component. That is selectable and can be moved or removed. On double click on that opens option panel. 
  • xepan-sortable-component : This css class makes anything droppable. You can drop any other xepan-component as child of tag where this class is implemented.
  • xepan-editable-text : This css class makes any text editable, Yo can make complete block as editable but it is not recommended. Try to give users as much simple blocks to edit as you can. This saves them by messing things. Editable text will be used by a rich text. If you want to let user edit text but not as Rich Text, add another class to tag xepan-no-richtext.
  • xepan-dynamic-option-N : Sometimes, your templates are so complex that you cannot make everything xepan-component and if you do accessing them becomes problem like any text displayed on hover of a image. If you hover it displays and if you go out it is hidden again, Or sometimes you want some information to be asked from user to update html in editing mode. Here comes xepan-dynamic-options-n tag handy.

    in any xepan-component you can add as many dynamic options as you want by giving each option a unique number like xepan-dynamic-option-1, xepan-dynamic-option-2 ...

    Each dynamic option value is a string that defines what to ask from user in options when this component is selected and what to update when user fills the option values.

    For details on dynamic-options please click here.

 

Let's understand template development by this short video:

Visit Forum | Report Bugs | Join The Community | Contribute To Epan