Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us.
Files Structure
- assets/css (Template CSS)
- assets/ico (Favicon and apple touch icon)
- assets/img (All Images)
- assets/js (Template JS)
- assets/php (Registration/Contact Form php files)
- assets/plugins (All external libs. We keep all of them in this folder to make updates easily.)
HTML Structure
The template is based on Bootstrap Framework - http://getbootstrap.com/
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport.
Below 480px viewports, the columns become fluid and stack vertically.
Create a .row and add the appropriate number of .col-sm-* columns.
jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
All the JavaScript libraries and files are included at the bottom of every HTML page like this:
The initializations and parameters (sliders, effects, etc.) are contained in assets/js/theme.js
Fonts
To change the embedded font, please take a look in the head part of assets/css/theme.css:
By default social media icons goes in hexagon and you can change it to circle if you need.
Social icons line in hexagon:
Social icons line without hexagon:
Social icons line in circle:
Secton title icon also goes in hexagon by default and you can change it to circle or without hexagon if you need.
Change the class 'rhex' for 'fa-stack-2x' to 'wohex' or 'crcle'. See the code below for example.
Main slider has id "main-slider" and each slide divided by html comment '<!-- Slide -->' for easy find where slide html code start, also each slide container has css class 'slide0, slide1, slide2 ...'
To change the text in each slide, you need to find 'h2' html tag with class 'caption-title' and 'h3' tag with class 'caption-subtitle' in div with 'caption' class
If you wont remove some slide just remove div with all content like this '<div class="item page text-center slide1">'
If you wont change option for main slider you need to open assets/js/theme.js and find 'initMainSlider' function and set true/false for option what you wont to change
autoplay: true, - set autoplay for slider
nav: false, - hide navigation arrow
dots: true, - show dots navigation
By default speaker image goes in hexagon and you can change it to circle or without hexagon version. See code below.
Speaker image - hexagon version
...
...
Speaker image - circle version
...
...
Speaker image - without hexagon version
...
...
Price Tables
Price tables main wrapper has 'price-tables' class and 3 columns. If you wont 2 or 4 columns you need understanding bootstrap 3 grid system http://getbootstrap.com/css/#grid
Notes for price
to markup price with 'Best' add class 'featured' to price table wrapper '<div class="price-table featured">'
<h2 class="price-label-title"> - label for the price
<span class="price-number"> - price amount
<span class="price-unit"> - price currency
<div class="price-table-row"> - wrapper for each feature of price
Open assets/js/theme.js and find function initGoogleMap and set your coordinates for map and marker.
in line: center: new google.maps.LatLng(40.9807648, 28.9866516) past your coordinates for map
example: center: new google.maps.LatLng(your coordinates goes here)
in line: position: new google.maps.LatLng(41.0096559,28.9755535), past your coordinates for marker
example: position: new google.maps.LatLng(your coordinates goes here)
If you wont change icon for marker replace 'icon-google-map.png' by your icon in 'assets/img/' folder
// Google map
initGoogleMap: function() {
var map;
var marker;
var image = 'assets/img/icon-google-map.png'; // marker icon
function initialize() {
var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(40.9807648, 28.9866516) // map coordinates
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(41.0096559,28.9755535), // marker coordinates
map: map,
icon: image,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
PHP Scripts
Registration Form
For Registration Form to work only thing you need to do is to setup your email address and your name.
To do this, please open "assets/php/registration-form.php" file and change these lines:
$to = 'you@domain.com';
$toname = 'Your Name';
One notice: this will be functional only on your server, php files can not be executed on your local computer.
Social Media - Icons
We are using FontAwesome for social media icons in this template. Insert icons like this:
Here's the complete list of available icons from FontAwesome docs:
Theme Config
Template has buit-in styles:
light / dark version
wide / boxed layout
ltr / rtl direction
color variation
To change this you need need find 'body' tag in html and change/add correct css class
here are default setting example:
<body id="home" class="wide body-light"> ...
if you wont site dark version just change 'body-light' to 'body-dark'
<body id="home" class="wide body-dark"> ...
for boxed view change 'wide' class to 'boxed'
<body id="home" class="boxed body-dark"> ...
same for rtl arabic language just add class 'rtl'
<body id="home" class="boxed body-dark rtl"> ...
Predefined colors theme list:
theme-blue-1.css
theme-blue-2.css
theme-cumin.css
theme-green-1.css
theme-green-2.css
theme-orange-1.css
theme-orange-2.css
theme-pink.css
theme-purple-1.css
theme-purple-2.css
theme-red-1.css
theme-red-2.css
theme-yellow-1.css
theme-yellow-2.css
by default set red color 'theme-red-1.css' and if you wont color use theme-blue-1 you need find this code below change 'theme-red-1.css' to 'theme-blue-1.css'
You can enable/disable theme config panel by commenting this code at the end of the html
The countdown is driven by the jQuery Countdown script
You can set you date by open assets/js/theme.js file and change it this code below
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
A note on Date - the JavaScript Date constructor expects the year, month, and day as parameters. However, the
month ranges from 0 to 11. To make explicit what date is intended (does a month of 3 mean March or April?) I
specify the month from 1 to 12 and manually subtract the 1. Thus the following denotes 25 December, 2015.
To change vodeo background you need open index-video.html and find this code:
<!-- Background Video Starts -->
<div class="video-warp">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/9hUIxyE2Ns8?autoplay=1" id="bgvid" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Background Video Ends -->
and set the path to your youtube video
Donation button
To adjust donation button with your settings you need find in html code below and replace yourpaypalemail@domain.com with your business paypal email, also for donation amount and currency.
Social Media - Icons
We are using FontAwesome for social media icons in this template. Insert icons like this:
Here's the complete list of available icons from FontAwesome docs: