+1 571-297-6383 | info@sonjara.com

Chapter 1: Templates

Templates determine the layout or placement of the various parts of a web page. Fakoli CMS supports templates written in XHTML. You can use a default Fakoli template, or create one or more custom templates for your project.  A template is divided into two parts:

  • Header: the header section states the document type, (e.g, XHTML 1.0 Transitional), the meta name description, meta name keywords, and title. The header also links to any JavaScript files and style sheets needed to render the page.
  • Body: the body lays out all the parts of the page that the user sees: a banner or logo image for your website, a global menu, any other modules linked to a page, the main page content, and the page's footer.

The following is a sample template that mixes DIV and TABLE based layouts

<!DOCTYPE html> 
 <html>
 <head> 
     <meta name="description" content="{ page_title}: {‌meta_tag_description}"/>  
    <meta name="keywords" content="{ page_title }: {‌keywords }"/>  
    <meta http-equiv="content-language" content="en">  
    <title>{‌page_title}</title>  
    {‌var:script}  
    {‌var:styles}  
    <link href="/templates/main.css" rel="stylesheet"/>  
   </head>  
   <body>  
   <div id="frame">  
        <div id="container">  
          <div id="banner">  
            <div id="logo"><a href="/index"><img src="/templates/images/logo_sonjara.png" alt="Sonjara Inc. Digital Strategies for the Greater Good" title="Sonjara, Inc. Digital Strategies for the Greater Good" width="377" height="85" border="0" /></a>          </div>  
          </div>  
          {‌menu:global}  
        <div id="main">  
          <table width="960" border="0" cellpadding="10">  
            <tr>  
              <td colspan="2"><div id="breadcrumbs">Content for  id &quot;breadcrumbs&quot; Goes Here</div></td>  
            </tr>  
            <tr>  
              <td width="691" style="vertical-align:top;">{‌description}</td>  
              <td width="223" style="vertical-align:top;">{‌position:right} </td>  
            </tr>  
          </table>  
        </div>  
         </div>  
  {‌position:footer}   
  </div>  
   </body>  
  </html>

CSS and JavaScript Files

Fakoli CMS will render a page with a default set of css but your code pages can link to additional style sheets by appending them to the "styles" global variable.  Similarly, your code page can append to the default set of JavaScript files, using the "script" global variable.

Global Variables

To place content such as menus, modules, and page content on your template, the Fakoli/CMS uses global variables. Using the format of {variable type: variable name}, these variables are used to place the content in your template in a specific location. There are three types of global variables:

  • Page content
  • Position
  • Menu

Page Content: these variables are captured by a CMS page and inserted within the template. Variables include:

  1. { page_title }
  2. identifier }
  3. { description }
  4. meta_tag_description }
  5. meta_tag_keyword }
  6. created_date }

Position
Modules are placed on a page based on the positions identified in the template. To add a new position in a template, the variable format is {position:variable_name}.

Menu
Menus are also placed on a page in a similar manner to Positions. Menus have the format {menu:variable_name}.

The CMS page manager will gather the menus and other modules that you've linked your code page to and render them in the position designated in your template.



Chapter 2: Menus » « Back to Contents Page