Microweber templates are a set of files that determines the overall look of your website. These files are used to generate the site layout and the html code.
You can use PHP and HTML to make your template as flexible as you need it to be.
Here is a link you can use to download our bootstrap 3 template and check it out code by code:
https://github.com/microweber-dev/bootstrap3
OK, let's get down to some basic explaining.
Modules
Each template is made of modules. You can think of them as the building blocks of your template.
Examples of modules are: menu, posts list, contact form, shopping cart, user login, etc.
You can use the modules if you do not want to write custom functionality or re-use code you have already written.
The Modules are loaded with the <module type="the_name_of_the_module" template="the_skin_you_want" id="the_id_of_the_module" /> tag
Filename
Description
This is just a short list of all the free modules we offer you. You can find more in the /userfiles/modules/ and experiment with them as much as you like!
Layouts
Layouts are pre-defined simple pieces of code that can be added in the page.
You are build one for the purpose of your page or you can use/modify one from ours.
The Layouts are loaded with the <module type="some_module_name" /> tag
Basic files
All templates are located into userfiles/templates directory. Each template is contained within its own folder and you need to create a new folder when creating a new template. Usually, the name of the folder is the name of your new template.
Template folders must be in lower-case and must not contain spaces or special characters.
For the purpose of this tutorial we are going to use this free template. You can get the source code from Bootswatch at https://bootswatch.com/paper/
Lets download the template css file from here https://bootswatch.com/paper/bootstrap.css and unzip it in new folder at userfiles/templates/bootswatch_paper
After unzip create a new file at userfiles/templates/startbootstrap-agency/config.php, this file holds information about the template name, author, version, etc.
The config.php file must contain a $config array with the following information.
Now that we have the template and our config file in place, lets get to work and connect it to the CMS
The index.php file is loaded when the user goes on the home page. You can see the HTML source code of the downloaded template here.
We will need to separate the header and the footer part, so we can re-use them in our inner pages layouts.
header.php
Create a file at userfiles/templates/startbootstrap-agency/header.php and move the template styles and scripts there.
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="author"content=""><title>Some Title</title><!-- Bootstrap Core CSS --><linkhref="<?php print template_url(); ?>css/bootstrap.min.css"rel="stylesheet"><!-- Custom CSS --><linkhref="<?php print template_url(); ?>css/agency.css"rel="stylesheet"><linkhref="<?php print template_url(); ?>css/custom.css"rel="stylesheet"><!-- Custom Fonts --><linkhref="<?php print template_url(); ?>font-awesome/css/font-awesome.min.css"rel="stylesheet"type="text/css"><linkhref="https://fonts.googleapis.com/css?family=Montserrat:400,700"rel="stylesheet"type="text/css"><linkhref='https://fonts.googleapis.com/css?family=Kaushan+Script'rel='stylesheet'type='text/css'><link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<linkhref='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700'rel='stylesheet'type='text/css'><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><bodyid="page-top"><!-- Navigation --><navclass="navbar navbar-default navbar-fixed-top"> <divclass="container"> <divclass="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<aclass="navbar-brand page-scroll"href="#page-top">Start Bootstrap</a> </div><!-- Include menu module --> <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"> <divclass=" navbar-right"> <moduletype="menu"name="header_menu"id="header_menu" /> </div> </div> </div></nav><!-- Header -->
Let's get to some explanation, shall we?! Most of the code should be simple- we put the html mark-up inside for the head section and the first part of the body for the header. Including your .css and .js files are pretty easy, too.
we are pointing where the file is and Microweber is taking care for the rest.
Declaring module is simple, too. Here we are saying that we want a module that is menu type, which has a name,an id and as we are going to see in the footer.php page you can assign a template as well. Moving on.
##footer.php Well, same as the header.php, this is going to be a file that will be part of every page and, as the name suggests, inside we are going to put our footer information.
Notice the class="mw-row" and class="mw-col". This will allow you to resize the columns in real time via the live editor. You can also set the initial width with style="width:x%".
Now all you have to do is to use
<?php includetemplate_dir()."header.php"; ?>
and this
<?php includetemplate_dir()."header.php"; ?>
to include this files wherever you want them to appear! Simple as that!
##index.php
<?php/* type: layout content_type: static name: Home position: 11 description: Home layout*/?><?php include template_dir(). "header.php"; ?><divclass="container edit"id="home-layout"rel="page"field="content"> <divclass="row clearfix"> <divclass="col-md-12 column"> <divclass="jumbotron"> <h1> Hello, world! </h1> <p> This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. </p>
<p> <aclass="btn btn-primary btn-large"href="#">Learn more</a> </p> </div> </div> </div> <divclass="mw-row clearfix"> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <divclass="element"> <h2> Heading </h2> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p> <aclass="btn"href="#">View details</a> </p> </div> </div> </div> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <divclass="element"> <h2> Heading </h2> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p> <aclass="btn"href="#">View details</a> </p> </div> </div> </div> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <divclass="element"> <h2> Heading </h2> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p> <aclass="btn"href="#">View details</a> </p> </div> </div> </div> </div> <divclass="container"> <divclass="element"> <br> <br> <h3 align="center" class="symbol">Powerful & User Friendly Content Management System of New Generation</h3>
<h4 align="center">with rich PHP and JavaScript API</h4> <br> </div> </div> <divclass="container"> <divclass="mw-row"> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <divclass="element"> <hrclass="visible-desktop column-hr"> </div> </div> </div> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <h2 align="center"> <?php _e("Latest Posts"); ?> </h2> </div> </div> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <divclass="element"> <hrclass="visible-desktop column-hr"> </div> </div> </div> </div> <moduledata-type="posts"data-limit="3"id="home-posts"data-description-length="100"data-show="thumbnail,title,created_at,read_more,description"data-template="columns" /> </div> <divclass="container"> <divclass="mw-row"> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <divclass="element"> <hrclass="visible-desktop column-hr"> </div> </div> </div> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <h2 align="center"> <?php _e("Latest Products"); ?> </h2> </div> </div> <divclass="mw-col"style="width:33.33%"> <divclass="mw-col-container"> <divclass="element"> <hrclass="visible-desktop column-hr"> </div> </div> </div> </div> <moduledata-type="shop/products"data-limit="3"id="home-products" /> </div></div><?php include template_dir(). "footer.php"; ?>
Here, we include the header and the footer and between them we put some content.
This is the section where you give your page some attributes like name, description, type, etc. Microweber will go trough that comment and will extract everything it needs . For the rest of the tutorial we are going to call this
<?php/*file information*/
When having .edit class, we are saying that we want the elements, that are in the containing tag, to be editable. With this information, Microweber will know that in Live Edit mode we want to have absolute control over the content. Id, rel and field should be also included in order to make the fields unique and prevent different edit field from colliding and outputing errors.
More function and explanations you can find in our documentations : http://microweber.com/docs/guides/README.md
##clean.php
<?php/*file information*/?><?php include template_dir(). "header.php"; ?><sectionid="content"> <divclass="container edit"field="content"rel="content"> <pclass="element">Type your text here</p> </div></section><?php include template_dir(). "footer.php"; ?>
Clean page is for one purpose- to be clean and ready for filling. Call it blank page if you want.
##layouts\shop.php
<?php/*file information*/?><?php include template_dir(). "header.php"; ?><sectionid="content"> <divclass="container"> <divclass="row"id="shop-products-conteiner"> <divclass="col-sm-12 edit"field="content"rel="page"> <p class="p0 element">This text is set by default and is suitable for edit in real time. By default the drag and drop core feature will allow you to position it anywhere on the site. Get creative & Make Web.</p>
</div> </div> <divclass="row"id="shop-products-conteiner"> <divclass="col-sm-8 edit"field="content2"rel="page"> <moduletype="shop/products"limit="18"description-length="70" /> </div> <divclass="col-sm-4"> <?php include template_dir(). 'layouts' . DS."shop_sidebar.php"; ?> </div> </div> </div></section><?php include template_dir(). "footer.php"; ?>
Like all the pages we saw before, this is a simple and standard page for Microweber. As the name suggests it's for the SHOP part of the site and it's purpose is to view the main content. REMEMBER that this is for the main part. If you want to create a view for a single product for example, we can do it like this
<?php include template_dir(). "header.php"; ?><sectionid="content"> <divclass="container"> <divclass="row"> <divclass="col-sm-8"> <h2class="edit"field="title"rel="post">Product inner page</h2> <hr> <divclass="edit"field="content"rel="post"> <divclass="mw-row"> <divclass="mw-col"style="width:50%"> <divclass="mw-col-container"> <moduletype="pictures"rel="content"template="product_gallery" /> </div> </div> <divclass="mw-col"style="width:50%"> <divclass="mw-col-container"> <divclass="product-description"> <divclass="edit"field="content_body"rel="post"> <p class="element">This text is set by default and is suitable for edit in real time. By default the drag and drop core feature will allow you to position it anywhere on the site. Get creative & <strong style="font-weight: 600">Make Web</strong>.</p>
</div> <moduletype="shop/cart_add" /> </div> </div> </div> </div> </div> <divclass="edit"field="related_products"rel="inherit"> <h4class="element sidebar-title">Related Products</h4> <moduletype="shop/products"related="true" /> <pclass="element"> </p> </div> </div><!------------ Sidebar --------------> <divclass="col-sm-4"> <?php include_once "shop_sidebar_inner.php"; ?> </div> </div> </div></section><?php include template_dir(). "footer.php"; ?>
Note: In order to create a single-view product that is connected to the main part it has to be called something like "theNameOfThePage_inner.php". The "_inner" part is helping Microweber to transfer all the data that it needs and display the right information within the field you told it to.
If you want to add a page inside a page, you can do it like that
<?php include_once"shop_sidebar_inner.php"; ?>
##blog.php
Creating a view for the blog is no different than creating a shop layout
<?php/*file information*/?><?php include template_dir(). "header.php"; ?><divid="content"> <divclass="container"id="blog-container"> <divclass="row"> <divclass="col-md-8 "id="blog-main"> <divclass="edit"field="content"rel="page"> <h2>My blog</h2> <p class="p0 element">This text is set by default and is suitable for edit in real time. By default the drag and drop core feature will allow you to position it anywhere on the site. Get creative, Make Web.</p>
<moduledata-type="posts" /> </div> </div> <divclass="col-md-3 col-md-offset-1"id="blog-sidebar"> <?php include_once "blog_sidebar.php"; ?> </div> </div> </div></div><?php include template_dir(). "footer.php"; ?>
And the inner page for the blog will be:
<?php include template_dir(). "header.php"; ?><divclass="container"id="blog-container"> <divid="blog-content-<?php print CONTENT_ID; ?>"> <divclass="row"> <divclass="col-sm-9"id="blog-main-inner"> <h3class="edit"field="title"rel="content">Page Title</h3> <divclass="edit post-content"field="content"rel="content"> <moduledata-type="pictures"data-template="slider"rel="content" /> <divclass="edit"field="content_body"rel="content"> <divclass="element"> <p align="justify">This text is set by default and is suitable for edit in real time. By default the drag and drop core feature will allow you to position it anywhere on the site. Get creative, Make Web.</p>
</div> </div> </div> <divclass="edit"rel="content"field="comments"> <moduledata-type="comments"data-template="default"data-content-id="<?php print CONTENT_ID; ?>" /> </div> </div> <divclass="col-sm-3"id="blog-sidebar"> <?php include template_dir(). "layouts/blog_sidebar.php"; ?> </div> </div> </div></div><?php include template_dir(). "footer.php"; ?>
##Creating other layouts
There are a lot of ways of creating a layout. You can put a plain HTML code inside, you can use modules, predefined layouts or all the mentioned together. It's up to you. Make sure to check all the files inside the zip file for more information.
#Module skins
You don't like the current skin? Well in Microweber nothing is permanent. Here is how to change a module's skin.
In your template's folder create a folder called "modules". Now, for every module, that you want to edit, you create a separate folder. Let's say we want to create new skin for the menu module. We create a folder called "menu" inside our "modules" folder and then we create another folder called "templates" inside "menu". Inside, we add a new php file- let's call it navbar.php. The choice of name is up to you. Inside we put
<?php/*type: layoutname: Navbardescription: Navigation bar*/?><script>$(document).ready(function() {$('ul.nav .dropdown').hover(function() {$(this).find('.dropdown-menu:first',this).stop(true,true).delay(200).fadeIn(); },function() {$(this).find('.dropdown-menu:first',this).stop(true,true).delay(200).fadeOut(); }); });</script><divclass="navbar-collapse collapse"> <?php$menu_filter['ul_class'] = 'nav navbar-nav'; $menu_filter['ul_class_deep'] = 'dropdown-menu'; $menu_filter['li_class'] = 'dropdown'; $mt = menu_tree($menu_filter); if($mt != false){ print ($mt); } else { print lnotif("There are no items in the menu <b>".$params['menu-name']. '</b>'); } ?></div>
If you do not specify skin's name, Microweber will look for a file called default.php!
And this is it. If you want to hard-code the template, in the module declaration you have to write
Or you can choose it from the Live Edit mode by clicking on the name you put in the commented section above. And that's it!
For references you can go in \userfiles\modules and check out all the modules you have access to with all there skins inside. If you want to create new skins for them, you repeat the same steps for the new module.
Filename
Description
Post list
List of all the posts in your blog section
Product list
Product list of your online shop
Categories
All the categories for your posts or shop
Pictures
Gallery pictures
Shop
Displaying the Microweber's shop module
Menu
Displaying the menu module
Comments
List of comments for the current item
Social network
Quick buttons for our favourite social networks
config.php
holds the information for your template, like name, version
