Skip to content

02. Templates

Jump to bottom
Peter Ivanov edited this page Aug 20, 2013 · 3 revisions

Working with templates

We use Twitter's Bootstrap framework as a base for our templates. If you know Bootstrap you can already make Microweber templates.

You can plug and play any existing bootstrap theme out there with 3 lines of code. Just copy this folder and rename it, no need of futher coding.

Of course you can also use you own CSS code.

You can check the default template source code here

Folder structure:

The templates are stored in the following folders


userfiles/
  media/  - folder to store the user pictures 
  modules/  - modules that you drag and drop are here
  elements/ - static elements that you drag and drop  
  templates/ - the site templates

userfiles/
  templates/
    my_theme/                                    - directory for your template
    my_theme/layouts                             - the directory for your layouts
    my_theme/modules/{$module_name}/templates/   - custom modules skins for your template

Requred template files

Each template must have the following files under its directory

userfiles/
  templates/
     my_theme/
    	config.php
    	header.php
    	footer.php
    	index.php
    	layouts/clean.php

What each file does

  • config.php - stores your template name, version, author information and more
  • header.php - your template header
  • footer.php - your template footer
  • index.php - loads as homepage
  • layouts/clean.php - this layout is loaded on blank page
  • layouts/your_layout_file.php - you can make more layouts

#Creating a template

To create a template make a config.php file in its directory and put your details

// example template config stored in userfiles/templates/new_theme/config.php

$config = array();
$config['name'] = "My new theme";
$config['author'] = "Me";
$config['version'] = 0.1;
$config['url'] = "http://example.com";

After that your template should be visible in the admin panel. See how default template is made

####Sample header.php

<!DOCTYPE HTML>
<html prefix="og: http://ogp.me/ns#">
<head>
    <title>{content_meta_title}</title>
    <link rel="stylesheet" href="{TEMPLATE_URL}css/bootstrap.css" type="text/css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="{TEMPLATE_URL}js/functions.js" type="text/javascript"></script>
</head>
<body>
<div id="header" class="edit" field="header" rel="global">
     <module data-type="menu" data-template="navbar">
</div> 
    <div id="content">

####Sample footer.php

    </div> <!-- /#content -->

<div id="footer" class="edit" field="footer" rel="global">
     <div class="row">
        <div class="span6">All rights reserved</div>
        <div class="span6"> </div>
    </div>
</div> <!-- /#footer -->

</body></html>

####Sample index.php

<?php
/*
  type: layout
  content_type: static
  name: Home
  description: Home layout
  
*/
?>
<?php include TEMPLATE_DIR. "header.php"; ?>
    <div class="edit" field="content" rel="content">
    My editable content
    </div>
<?php include TEMPLATE_DIR. "footer.php"; ?>

####Sample blog.php

<?php
/*
  type: layout
  content_type: dynamic
  name: Blog
  description: Blog layout
  
*/
?>
<?php include TEMPLATE_DIR. "header.php"; ?>
    <div class="edit" field="content" rel="content">
            My blog with posts
             <module type="posts">
    </div>
     <div class="edit" field="sidebar" rel="inherit">
            Blog sidebar with pages navigation
            <module type="pages">
    </div>
<?php include TEMPLATE_DIR. "footer.php"; ?>

####Sample blog_inner.php

<?php
/*
  type: layout
  content_type: dynamic
  name: Blog
  description: Blog inner page
  
*/
?>
<?php include TEMPLATE_DIR. "header.php"; ?>
    <div class="edit" field="content" rel="content">
           <module type="pictures">
            My blog post with pics & comments
           <module type="comments">
    </div>
     <div class="edit" field="sidebar" rel="inherit">
             //this field is rel=inherit and will display content from the parent page
    </div>
<?php include TEMPLATE_DIR. "footer.php"; ?>

####Sample blog_inner.php

<?php
/*
  type: layout
  content_type: dynamic
  name: Blog
  description: Blog inner page
  
*/
?>
<?php include TEMPLATE_DIR. "header.php"; ?>
    <div class="edit" field="content" rel="content">
           <module type="pictures">
            My blog post with pics & comments
           <module type="comments">
    </div>
     <div class="edit" field="sidebar" rel="inherit">
             //this field is rel=inherit and will display content from the parent page
    </div>
<?php include TEMPLATE_DIR. "footer.php"; ?>
Clone this wiki locally