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 (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:
Main slider has id "main-slider" and each slide divided by html comment '<!-- Slide 1 -->' for easy find where slide html code start, also each slide container has css class 'slide1, slide2, slide3 ...'
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 slide1">'
...
...
...
Find Your Property! Rent A Property
Vivamus in est sit amet risus rutrum facilisis sed ut mauris. Aenean aliquam ex ut sem aliquet, eget vestibulum erat pharetra. Maecenas vel urna nulla. Mauris non risus pulvinar.
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
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:
wide / boxed layout
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"> ...
for boxed view change 'wide' class to 'boxed'
<body id="home" class="boxed"> ...
Predefined colors theme list:
theme-blue-1.css
theme-blue-2.css
theme-cumin.css
theme-gold.css
theme-gray.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 green color 'theme-green-1.css' and if you wont color use theme-blue-1 you need find this code below change 'theme-green-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, 2014.
...
...
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: