Overview
CmsLite Template Documentation Version v1.0
Here I will try and explain how simple and straight forward CmsLite templates are. For me the templates are very straighforward but then I have been working on them
for a number of years now so if there is some thing I have missed or not explained correctly please email me and I will update the docs and explain further.
This is the first released Documentaion for CmsLite Template Building
- Author: BeKirk
- Created on: 08/07/2016
- Latest Update on: ----
- Contact: support@bekirk.co.uk
Please click on all images for a larger view.
Template Main Structure
Here we will look at how the structure of a template is made up including code snippets
So the main files for all front end templates are
- header.tpl
- index.tpl
- footer.tpl
There are additional files that make up the template but we will look at them later.
Sections
I will explain here how each part of the code works and if necessary to be changed for templates.
Firstly some of the template files(TPL) are made up of sections each section can show something to the user or allow a change to be made when viewing a page... for example the eu cookie agreement or remove the install file.. these section appear like so...
{:HeadStart:}
some content within the section...
{:/HeadStart:}So when editing TPL files make sure that you do not accident remove the section code or part of it as your site page will be filled with errors...
Variables
Secondly there are also template variables included with the code that show to the person viewing your site certain information for example the title of the page in the browser or the copyright date.
These variable appears like so... They will always have curly brackets around the outside and a dollar sign
{$PageTitle}Constants
Constants appear throughout the template files and are mostly used for paths in the main header of a template..
<script type="text/javascript" src="{#CMS_COMMON_JS#}jquery-latest.min.js"></script>This part of the code is the constant {#CMS_COMMON_JS#} and should not be changed unless you are absolutely sure you know what you are doing...
Language
Language tags within the template show all the phrase in the template from your language file
<a class="dropdown-toggle no-text-underline" href="#"><i class="fa fa-flag fa-lg" style="color:white"></i> {{LANGUAGES}}</a>This part of the code {{LANGUAGES}} is the language tag and again should not be changed unless you know what you are doing..
Header.tpl
Open template/BeLite/header.tpl in a text editor so you can see what I am referring too and I will explain each section of this file, starting with
{:HeadStart:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />This part of the code basically talks to the browser about certain conditions... This does not need to be touched
The next piece of code is the page Title and looks like so...
<title>{$PageTitle}</title>The next three lies of code are Meta Tags these give information to search engines regarding your site..for example describes your site and what is is all about..
these settings can be changed in the admin section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{$KeyWords}" />
<meta name="description" content="{$MetaDesc}" />The next eleven lines of code link to Javascript files for using different functions within your site
they look like so....
<script type="text/javascript" src="{#CMS_COMMON_JS#}jquery-latest.min.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}jquery-migrate.min.js"></script>
<script type="text/javascript" src="{#CMS_COMMON#}bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{#CMS_COMMON#}owl-carousel/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}owl-carousel.js"></script>
<script type="text/javascript" src="{#CMS_COMMON#}fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}fancy-box.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}js.cookie.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}example.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}general.js" ></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}back-to-top.js"></script>These eight lines link to your main CSS (style sheets) files and do not need to be moved or changed.
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}owl-carousel/owl-carousel/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}fontawesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}line-icons/line-icons.css" />
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}fancybox/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="{#CMSLITE_TEMPLATE_PATH#}{$StyleName}/css/{$StyleSheet}" />
<link rel="stylesheet" type="text/css" href="{#CMSLITE_TEMPLATE_PATH#}{$StyleName}/css/custom.css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="images/fav.png" rel="shortcut icon" />That is the end of this section...
{:EuCookie:}
If turned in your admin settings this section will display to the user that the site uses cookies and they need to confirm if the wish to carry on...
{:EuCookie:}
<script type="text/javascript" src="{#CMS_COMMON_JS#}eu_cookies.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").acceptCookies({
position: 'top',
notice: '{{NOTICE}}<br />{{NOTICE1}}',
accept: '{{ACCEPT_COOKIES}}',
decline: '{{DECLINE_COOKIES}}',
decline_t: '{{DECLINE_REDIRECT}}',
whatc: '{{WHAT_COOKIES}}'
})
});
</script>
{:/EuCookie:}{:End:}
The "end" section finishes the header part of the html and starts the body section.
{:End:}
</head>
<body>
{:/End:}{:Disable:}
The "Disable" section alerts the administrator of the site that their site has been disabled when they are logged in.
{:Disable:}
<div class="alert alert-warning text-center"><h4>Down for Maintenance</h4>You are Logged in as Admin, the message shown below is being viewed by your site visitors. {$DisableMessage}</div>
{:/Disable:}{:Install:}
The "Install" section informs you thet the install/Upgrade folder is still activated in you site..
{:Install:}
<div class="alert alert-danger text-center"><h4>{{REMOVE_FOLDER}}</h4>{{REMOVE_FOLDER2}}</div>
{:/Install:}The next section is where you can start changing how your site looks, though I could explain how Css and HTML work together in this section I feel there is enough information on the Internet
to explain this in more detail...
{:Start:}
I will try and explain the next few lines in bit more detail
{:Start:}
<div class="wrapper">
<div class="header">
<div class="container">
<a class="logo" href="./">
<img src="{$SiteLogo}" alt="{$SiteName}" class="img-responsive">
</a>
{:/Start:}<div class="wrapper">-- The background color of the site<div class="header">-- The design of where the logo and links are<div class="container">-- How wide the site looks on the monitor full width or a percentage of that.<a class="logo" href="./">-- Where the logo is positioned on the page within the header<img src="{$SiteLogo}" alt="{$SiteName}" class="img-responsive">-- The actual image logo or the alternative if no image is available the site name</a>-- The end of the link back to the home page when someone clicks on the logo
{:LangStart:}
This section is the beginning of the language drop down in the header of your page, do not change the Language Variable unless you are sure you know what you are doing.
{:LangStart:}
<!-- Topbar -->
<div class="topbar">
<ul class="loginbar pull-right">
<li class="hoverSelector">
<i class="fa fa-globe"></i>
<a>{{LANGUAGES}}</a>
<ul id="LangSelect" class="languages hoverSelectorBlock">
{:/LangStart:}{:Loop:}
This part loops through your different languages availabe to your users. As long as the template variable are kept in place this can be changed how ever you wish.
{:Loop:}
<li class="{$active}"><a href="#" data-code="{$Code}">{$Language} {$icon}</a></li>
{:/Loop:}{:LangEnd:}
This part finishes all the code for the Language select again this code can be changed as it just ends the HTML tags..
{:LangEnd:}
</ul>
</li>
</ul>
</div>
</div>
<!-- /Top Bar -->
{:/LangEnd:}{:MenuStart:}
Obviously this where the HTML start for the main site menu, this part<!-- Toggle get grouped for better mobile display -->
of the code is for when you are viewing the site in a mobile device.
The rest styles and designs the menu for this template.
{:MenuStart:}
<!-- Toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<!-- End Toggle -->
</div>
<!--/end container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse navbar-ex1-collapse">
<div class="container">
{:/MenuStart:}{:Menu:}
This part loops through the menu names from your database and displays them as a list. The list is then styled by the class variables surrounding the List.
The menu names are stored in your database
All menu Names are created through PHP
{:Menu:}
<ul id="topMain" class="nav navbar-nav">
{$MenuName}
</ul>
{:/Menu:}{:MenuEnd:}
Closes the HTML tags for the menu
{:MenuEnd:}
</nav>
</div>
{:/MenuEnd:}{:HeadEnd:}
Closes the HTML for the main Header Section Except the Wrapper div as this closes in the Footer.tpl
{:HeadEnd:}
</div> </header>
</div>
{:/HeadEnd:}Index.tpl
The Index.tpl contains only contain two variables as all the content for this page is created within the admin section of youur site
{$PageContent}{$AddonPage}Footer.tpl
Again the footer is quite straight forward it contains Javascript, and end tags for all The HTMl, it also contains the variable for adding your Google Analytics code and the site copyright information
<div class="footer-v1">
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>{{COPYRIGHT}} © {$year} {$SiteName} {{RIGHTSRESERVED}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- end #footer -->
</div>
<!-- /.wrapper -->{$GoogleAnalytics}<script type="text/javascript">
jQuery(document).ready(function() {
FancyBox.initFancybox();
OwlCarousel.initOwlCarousel();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.text_container').addClass("hiddens");
$('.text_container').click(function() {
var $this = $(this);
if ($this.hasClass("hiddens")) {
$(this).removeClass("hiddens").addClass("visibles");
} else {
$(this).removeClass("visibles").addClass("hiddens");
}
});
$('.text_container').click(function() {
var $this1 = $(this);
if ($this1.hasClass("hiddens")) {
$(this).removeClass("hiddens").addClass("visibles");
}
});
});
</script>Design a New Template
When Designing a new template or incorportaion a template that you have bought to use is supposed to quite straight forward with a little html and css Knowledge..
I have a great experiance in designing templates, in addition I have been a web developer for 12 years now and have first class honours degree in web development and design and I personally do not think
I have scratched the surface when I see some of the
amazing designs available today.
So I am Going to write this guide as if you have never seen html and css before and hopefully allow everyone the opportunity to create templates for cmsLite.
We will use the default template "BeLite" for the beginnings of a new template and a template called "BeNew" as our new template..
Clone a Template
Firstly we will start with Ultimate Template Syste (UTC) in the admin section of your site and clone a template
Firstly log in to your site.
Then scroll down to the Template link in your admin section
Once that page has opened click on the right hand links as shown below and click on "Clone Template Settings"
Click on the "Clone Styles" for BeLite
Enter a new name for your template in this case we are using "BeNew" and click on Clone Style.
The Style will be uploaded and installed and is now available in your template folder to be available to edit.
Open yoursite/templates/BeNew and look for a file called "theme_info.cfg" and open it in your text editor.
theme_info.cfg
This file holds all of your new template information which then gets stored into your database and should only be altered if you know what you are doing
<?php
//
// CmsLite auto-generated theme configuration file for BeNew
// Do not change anything in this file unless you know exactly what you are doing!
//
${'BeNew'}[0]['TemplateName'] = "BeNew";
${'BeNew'}[0]['StyleName'] = "BeNew";
${'BeNew'}[0]['StyleSheet'] = "BeNew.css";
${'BeNew'}[0]['Author'] = "BeKirk";
${'BeNew'}[0]['Url'] = "http://www.bekirk.co.uk";
${'BeNew'}[0]['Description'] = "Default theme for CmsLite, clear and clean white style with a touch of blue from our logo. Designed to work on a variety of media keping your content clear and concise for your visitors. Easy to clone and reuse.";
${'BeNew'}[0]['CopyRight'] = "© Bekirk 2016";
${'BeNew'}[0]['Version'] = "1.01";
?>This file does not need any changes made to it once you have made a clone of BeLite.. I have only mentioned it so that you are aware of what it does..
Css Files
CmsLite templates have quite a few style sheets within its file structure but only a couple are required to change how your template looks.
open yoursite/templates/BeNew/css and find "BeNew.css" in your text editor and at the top of the file should look like the one below..
@import url("header.css");
@import url("../../common/styles/blockquote.css");
@import url("../../common/styles/bootstrap-social.css");
@import url("../../common/styles/boxes.css");
@import url("../../common/styles/buttons.css");
@import url("../../common/styles/carousel.css");
@import url("../../common/styles/codeelements.css");
@import url("../../common/styles/color.css");
@import url("../../common/styles/divide.css");
@import url("../../common/styles/essentials.css");
@import url("../../common/styles/headers.css");
@import url("../../common/styles/highliter.css");
@import url("../../common/styles/images.css");
@import url("../../common/styles/label.css");
@import url("../../common/styles/panels.css");
@import url("../../common/styles/tabs.css");
@import url("../../common/styles/text.css");Here is a quick explanation or the code above, these are links to other css files within CmsLite, these are stored in a common folder and are also used for the admin side of the site so do not need to be touched..
when you open the css folder for BeNew the BeNew.css file, Header.css and custom.css these are only files we need to work with.
The "header.css file deals with everything in header part of the page, BeNew.css deals with everything else and the custom.css file is what we are going to work with to make things very easy."
W.G. Piccolo
We are going to use a free bootstrap template for this documentation, the template is called Piccolo and can be found at Wegraphics.net
and a preview demo can be found at Piccolo Demo.
Download a copy if you like and work through the documentation for a better understanding..
This Version of Piccolo is for Bootstrap 2 and CmsLite uses Bootstrap 3, so for this tutorial I updated the index.htm file and the main css file for Piccolo so that is is now works correctly with Bootstrap 3..
So the code for the index file below and later for the css file
will be different to the version you downloaded but I have highlighted where the changes are and they should be possible to see where the differences are..
CSS
Css files add colours and dimensions to web pages and for a quick and easy method of creating a copy of a template we need to include a copy of the template we are copying CSS File into our new Template.
We are going to start with custom.css from BeNew and custom-styles.css from piccolo found in the piccolo css folder.
Copy custom-styles.css to templates/common/styles/custom and open custom.css from your BeNew/css folder in a text editor.
copy this into the file and save it.
@import url("../../common/styles/custom/custom-styles.css");
Open the newly copied (in a text editor like Notepad++) custom-styles.css within BeNew as we need to add a few CSS additions to make it Bootstrap 3 standard.
All text editors have a find feature normally activated by CTN+F (Windows), CMD+F (MAC) copy the code I highlight below find it and change it to the new code I have highlighted below..
Find
Change too
body {background: #f9f9f9 url(../img/page-bg-1.jpg);}body {background: #f9f9f9 url(../../images/page-bg-1.jpg);}.main-container {
height:auto;
height: 100%;
min-height: 100%;
}
.main-container {
height:auto;
height: 100%;
min-height: 100%;
}
ul, ol {
padding: 0;
margin: 0 0 10px 25px;
}
@media (min-width: 1200px) {
.container {
width: 1200px;
} /***** Titles and Headings *****/
h1, h2, h3, h4 , h5, h6 {
font-family: "Oswald", sans-serif;
font-weight: normal;
text-transform:uppercase;
}
h1, h2, h3, h4, h5 {text-shadow: 1px 1px 0 #fdfdfd, 2px 2px 0 rgba(81, 81, 81, 0.5), 0 0 1px #fdfdfd;}
h1.title-bg, h2.title-bg, h3.title-bg, h4.title-bg , h5.title-bg, h6.title-bg {
background:#f8f8f8;
padding:10px 5px;
margin: 0px 0px 20px 0px;
border-bottom: 1px dotted #a9a9a9;
border-top: 1px dotted #a9a9a9;
}/***** Titles and Headings *****/
h1, h2, h3 {
font-family: "Oswald", sans-serif;
font-weight: normal;
text-transform:uppercase;
line-height: 40px;
}
h1, h2, h3, h4, h5 {text-shadow: 1px 1px 0 #fdfdfd, 2px 2px 0 rgba(81, 81, 81, 0.5), 0 0 1px #fdfdfd;}
h1.title-bg,
h2.title-bg,
h3.title-bg,
h4.title-bg,
h5.title-bg,
h6.title-bg {
background:#f8f8f8;
padding:10px 5px;
margin: 0px 0px 20px 0px;
border-bottom: 1px dotted #a9a9a9;
border-top: 1px dotted #a9a9a9;
line-height: 20px;
}h5.title-bg button {
float: right;
text-transform: none;
margin-left:5px;
}h5.title-bg button {
float: right;
text-transform: none;
margin-left:5px;
vertical-align: middle;
display: table-cell;
}/**************************************
/ Header
**************************************/.navbar {
position: relative;
min-height: 0;
margin-bottom: 0;
border: 1px solid transparent;
}
/**************************************
/ Header
**************************************/.logo { margin-top:35px; }
.logo img { padding-right:20px; }
.logo h5 { display: inline-block; }
.logo { margin-top:40px; }
.logo img { padding-right:10px; }
.logo h5 { display: inline-block;
text-shadow: 1px 1px 0 #fdfdfd, 2px 2px 0 rgba(81, 81, 81, 0.5), 0 0 1px #fdfdfd; }.navbar .nav > li > a {
font-family: "Oswald", sans-serif;
font-weight: normal;
text-shadow: none;
text-transform:uppercase;
font-size:12px;
padding: 10px 15px 10px;
}.navbar .nav > li > a {
font-family: "Oswald", sans-serif;
font-weight: normal;
text-shadow: none;
text-transform:uppercase;
font-size:12px;
float: none;
padding: 10px 15px 10px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}.dropdown-menu a {
color: #ababab;
border-bottom:1px solid #474747;
padding: 10px 10px;
margin:0px 10px;
}.dropdown-menu > li > a {
color: #ababab;
border-bottom:1px solid #474747;
padding: 10px 10px;
margin:0px 10px;
}/**************************************
/ Footer
**************************************/
.footer-container {
width:100%;
background:#333;
clear: both;
position: relative;
z-index: 10;
}/**************************************
/ Footer
**************************************/
.footer-container {
width:100%;
background:#333;
clear: both;
position: relative;
}Thats the css done for now we will now move on to changing the HTML code...
Images
We now need to copy over some images from Piccolo to BeNew to create the same kind off Look
Open the images folder in Piccolo and find page-bg-1.jpg copy this image over to your CmsLite/templates/common/images folder
All other images if you require them should go into BeNew/Images Folder
HTML Files
We now need to open Piccolo theme and find the index.html file, open it up in a text editor.
The code below is the header code that we need to transfer into our BeNew header.tpl obviously remembering that our menu is controlled
by our admin set up so we will need to make changes when we get to that point. (I have highlighted changes I have made, so that you are aware of them)
<!-- Color Bars (above header)-->
<div class="color-bar-1"></div>
<div class="color-bar-2 color-bg"></div>
<div class="container">
<div class="row header"><!-- Begin Header -->
<!-- Logo
================================================== -->
<div class="logo col-sm-5 col-md-5"> UPDATED CODE
<a href="index.htm"><img src="img/piccolo-logo.png" alt="" /></a>
<h5>Big Things... Small Packages</h5>
</div>
<!-- Main Navigation
================================================== -->
<div class="navigation col-sm-7 col-md-7"> UPDATED CODE
<div class="navbar hidden-xs"> UPDATED CODE
<ul class="nav navbar-nav"> UPDATED CODE
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="index.htm">Home <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.htm">Full Page</a></li>
<li><a href="index-gallery.htm">Gallery Only</a></li>
<li><a href="index-slider.htm">Slider Only</a></li>
</ul>
</li>
<li><a href="features.htm">Features</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="page-full-width.htm">Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="page-full-width.htm">Full Width</a></li>
<li><a href="page-right-sidebar.htm">Right Sidebar</a></li>
<li><a href="page-left-sidebar.htm">Left Sidebar</a></li>
<li><a href="page-double-sidebar.htm">Double Sidebar</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="gallery-4col.htm">Gallery <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="gallery-3col.htm">Gallery 3 Column</a></li>
<li><a href="gallery-4col.htm">Gallery 4 Column</a></li>
<li><a href="gallery-6col.htm">Gallery 6 Column</a></li>
<li><a href="gallery-4col-circle.htm">Gallery 4 Round</a></li>
<li><a href="gallery-single.htm">Gallery Single</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="blog-style1.htm">Blog <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="blog-style1.htm">Blog Style 1</a></li>
<li><a href="blog-style2.htm">Blog Style 2</a></li>
<li><a href="blog-style3.htm">Blog Style 3</a></li>
<li><a href="blog-style4.htm">Blog Style 4</a></li>
<li><a href="blog-single.htm">Blog Single</a></li>
</ul>
</li>
<li><a href="page-contact.htm">Contact</a></li>
</ul>
</div>
<!-- Mobile Nav
================================================== -->
<form action="#" id="mobile-nav" class="visible-xs">
<div class="mobile-nav-select">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Navigate...</option>
<option value="index.htm">Home</option>
<option value="index.htm">- Full Page</option>
<option value="index-gallery.htm">- Gallery Only</option>
<option value="index-slider.htm">- Slider Only</option>
<option value="features.htm">Features</option>
<option value="page-full-width.htm">Pages</option>
<option value="page-full-width.htm">- Full Width</option>
<option value="page-right-sidebar.htm">- Right Sidebar</option>
<option value="page-left-sidebar.htm">- Left Sidebar</option>
<option value="page-double-sidebar.htm">- Double Sidebar</option>
<option value="gallery-4col.htm">Gallery</option>
<option value="gallery-3col.htm">- 3 Column</option>
<option value="gallery-4col.htm">- 4 Column</option>
<option value="gallery-6col.htm">- 6 Column</option>
<option value="gallery-4col-circle.htm">- Gallery 4 Col Round</option>
<option value="gallery-single.htm">- Gallery Single</option>
<option value="blog-style1.htm">Blog</option>
<option value="blog-style1.htm">- Blog Style 1</option>
<option value="blog-style2.htm">- Blog Style 2</option>
<option value="blog-style3.htm">- Blog Style 3</option>
<option value="blog-style4.htm">- Blog Style 4</option>
<option value="blog-single.htm">- Blog Single</option>
<option value="page-contact.htm">Contact</option>
</select>
</div>
</form>
</div>
</div><!-- End Header -->
Open BeNew/header.tpl in you file editor and look for
{:Start:}
<div class="wrapper">
<div class="header">
<div class="container">
<a class="logo" href="./">
<img src="{$SiteLogo}" alt="{$SiteName}" class="img-responsive">
</a>
{:/Start:}This is where we are going to start to make the changes to html and match from the Piccolo template.. I am going to show the code we need to use in the left box and show in the right box how the code looks in BeNew.
Piccolo
BeNew
The first part of the code we need to look at is simply these two lines from Piccolo which we will add to header.tpl
<div class="color-bar-1"></div>
<div class="color-bar-2 color-bg"></div>The Code added to BeNew
{:Start:}
<div class="color-bar-1"></div> ADDED CODE
<div class="color-bar-2 color-bg"></div> ADDED CODE
<div class="wrapper">
<div class="header">
<div class="container">
<a class="logo" href="./">
<img src="{$SiteLogo}" alt="{$SiteName}" class="img-responsive">
</a>
{:/Start:} Log in to your admin and goto the templates link again and hover over the BeNew screen shot and click on the Live Preview link as seen below.
Now you can view any changes you have made as you do them live just refresh the page each time you save the file.
Now you should see the two different colours at the top of the BeNew template...
Logo
To add the new logo we are going to use the Main Site Logo setting found in your admin/Settings page
Set to yes and click Update Settngs... this will now look fo a logo images iside the images folder of your template..
we need to copy the logo from the Piccolo image folder which is WG Piccolo Theme/img/piccolo-logo.png and copy it too BeNew/images.
We also need to rename the image too simply logo.png now refresh your page for BeNew and you should now see the Piccolo logo
( Normally we would use your own logo
(but I thought it best to show how this can be done.)
We are now going to quickly copy code over from Piccolo to BeNew and Delete some of the old code from BeNew
Piccolo
Copy over into {:Start:}
BeNew
Delete and Paste new Code
<div class="container">
<div class="row header"><!-- Begin Header --><div class="wrapper">
<div class="header">
<div class="container">
<a class="logo" href="./">
<img src="{$SiteLogo}" alt="{$SiteName}" class="img-responsive">
</a>Copy over into {:MenuStart:}
<!-- Toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<!-- End Toggle -->
<div class="logo col-sm-5 col-md-5">
<a href="./"><img src="{$SiteLogo}" alt="{$SiteName}"></a>
<h5>Big Things... Small Packages</h5>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navigation col-sm-7 col-md-7">
<div class="navbar hidden-xs">
<nav class="collapse navbar-collapse navbar-ex1-collapse">Delete and Paste new Code
<!-- Toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<!-- End Toggle -->
</div>
<!--/end container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse navbar-ex1-collapse">
<div class="container">Copy over into {:MenuEnd:}
</nav>
</div>
</div>
<!--/.navbar-collapse-->Delete and Paste new Code
</div>
<!--/.container-->
</nav>
<!--/.navbar-collapse-->Copy over into {:HeadEnd:}
</div>
<!--/.header-->
</div>
<!--/.container-->Delete and Paste new Code
</div>
<!--/.header-->Your finished Header.tpl file should look like this.
{:HeadStart:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{$PageTitle}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{$KeyWords}" />
<meta name="description" content="{$MetaDesc}" />
<script type="text/javascript" src="{#CMS_COMMON_JS#}jquery-latest.min.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}jquery-migrate.min.js"></script>
<script type="text/javascript" src="{#CMS_COMMON#}bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{#CMS_COMMON#}owl-carousel/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}owl-carousel.js"></script>
<script type="text/javascript" src="{#CMS_COMMON#}fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}fancy-box.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}js.cookie.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}example.js"></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}general.js" ></script>
<script type="text/javascript" src="{#CMS_COMMON_JS#}back-to-top.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}owl-carousel/owl-carousel/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}fontawesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}line-icons/line-icons.css" />
<link rel="stylesheet" type="text/css" href="{#CMS_COMMON#}fancybox/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="{#CMSLITE_TEMPLATE_PATH#}{$StyleName}/css/{$StyleSheet}" />
<link rel="stylesheet" type="text/css" href="{#CMSLITE_TEMPLATE_PATH#}{$StyleName}/css/custom.css" />
<link href="images/fav.png" rel="shortcut icon" />
{:/HeadStart:}
{:EuCookie:}
<script type="text/javascript" src="{#CMS_COMMON_JS#}eu_cookies.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").acceptCookies({
position: 'top',
notice: '{{NOTICE}}<br />{{NOTICE1}}',
accept: '{{ACCEPT_COOKIES}}',
decline: '{{DECLINE_COOKIES}}',
decline_t: '{{DECLINE_REDIRECT}}',
whatc: '{{WHAT_COOKIES}}'
})
});
</script>
{:/EuCookie:}
{:End:}
</head>
<body>
{:/End:}
{:Disable:}
<div class="alert alert-warning text-center"><h4>Down for Maintenance</h4>You are Logged in as Admin, the message shown below is being viewed by your site visitors. {$DisableMessage}</div>
{:/Disable:}
{:Install:}
<div class="alert alert-danger text-center"><h4>{{REMOVE_FOLDER}}</h4>{{REMOVE_FOLDER2}}</div>
{:/Install:}
{:Start:}
<div class="color-bar-1"></div>
<div class="color-bar-2 color-bg"></div>
<div class="container">
<div class="row header">
{:/Start:}
{:LangStart:}
<!-- Topbar -->
<div class="topbar">
<ul class="loginbar pull-right">
<li class="hoverSelector">
<i class="fa fa-globe"></i>
<a>{{LANGUAGES}}</a>
<ul id="LangSelect" class="languages hoverSelectorBlock">
{:/LangStart:}
{:Loop:}
<li class="{$active}"><a href="#" data-code="{$Code}">{$Language} {$icon}</a></li>
{:/Loop:}
{:LangEnd:}
</ul>
</li>
</ul>
</div>
<!-- End Topbar -->
{:/LangEnd:}
{:MenuStart:}
<!-- Toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<!-- End Toggle -->
<div class="logo col-sm-5 col-md-5">
<a href="./"><img src="{$SiteLogo}" alt="{$SiteName}"></a>
<h5>Big Things... Small Packages</h5>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navigation col-sm-7 col-md-7">
<div class="navbar hidden-xs">
<nav class="collapse navbar-collapse navbar-ex1-collapse">
{:/MenuStart:}
{:Menu:}
<ul id="topMain" class="nav navbar-nav">
{$MenuName}
</ul>
{:/Menu:}
{:MenuEnd:}
</nav>
</div>
</div>
<!--/.navbar-collapse-->
{:/MenuEnd:}
{:HeadEnd:}
</div>
<!--/.header-->
</div>
<!--/.container-->
{:/HeadEnd:}
We do not need to touch the Index.tpl file so we will next look at the Footer.tpl file
I have removed part of the footer code from the index file as it is not actully needed in CmsLite but you can play around with it if you wish to have extra information.
Copy over
<!-- Begin Footer -->
<div class="footer-container">
<div class="container">
<!-- Begin Sub Footer -->
<div class="row footer-row">
<div class="col-lg-12 footer-col footer-sub">
<div class="row no-margin">
<div class="col-lg-6"><span class="left">{{COPYRIGHT}} © {$year} {$SiteName} {{RIGHTSRESERVED}}</span></div>
</div>
</div>
</div>
<!-- End Sub Footer -->
</div>
</div>
<!-- end #footer -->Delete and Paste new Code
<div class="footer-v1">
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>{{COPYRIGHT}} © {$year} {$SiteName} {{RIGHTSRESERVED}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- end #footer -->
</div>
<!-- /.wrapper -->Thats it for this part of the Tutorial I will add more to this when I have the time if there are any questions or I have missed anything please contact me at the address above...
I will only answer questions to customers who have purchased CmsLite and have their Code Canyon purchase code included in the email..
If you have any pre-sale questions please you thecomments section at Code Canyon