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 via our ThemeForest account. Thanks so much!
This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support section.
After unzipping the download pack, you'll find a template folder with all the files.
You can view this template in any browser, you can display or edit the Template without an internet connection.
Now open your FTP Client (like Filezilla) or directly through cpanel, upload the content of the Template on your server root.
Once the files are done uploading go to www.yourdomainname.com/index1.html
All products shortcodes, banners shortcodes, typography, buttons, all form elements, counters, empty spaces, follow icons, examples of opening product popup directly from document or dynamically with ajax requests - are presented for your convenience in elements.html page. Feel free to use the to cinfigure your pages.
This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about this visit Bootstrap.
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
For a simple two column layout, create a .container and add the appropriate number of .col-md* columns.
Given this example, we have .col-md-4 and .col-md-8, making for 12 total columns and a complete row
<div class="container"> <div class="col-md-4">...</div> <div class="col-md-8">...</div> </div>
To nest your content with the default grid, add a new .container and set of .col-md* columns within an existing .col-md* column. Nested rows should include a set of columns that add up to the number of columns of its parent.
<div class="container"> <div class="row"> <div class="col-md-9"> Level 1 column <div class="row"> <div class="col-md-8">Level 2 column</div> <div class="col-md-4">Level 2 column</div> </div> </div> <div class="col-md-3"> Level 1 column </div> </div> </div>
CSS files, that load in <head> section of page in current template are following:
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="css/bootstrap.extension.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/swiper.css" rel="stylesheet" type="text/css" /> <link href="css/sumoselect.css" rel="stylesheet" type="text/css" /> <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Javascript files, that load right before closing <body> tag of page in current template are following:
<script src="js/jquery-2.2.4.min.js"></script> <script src="js/swiper.jquery.min.js"></script> <script src="js/global.js"></script> <!-- styled select --> <script src="js/jquery.sumoselect.min.js"></script> <!-- counter --> <script src="js/jquery.classycountdown.js"></script> <script src="js/jquery.knob.js"></script> <script src="js/jquery.throttle.js"></script>
in portfolio pages there is Isotope sorting/filtration library connected.
$(window).load(function(){
var $container = $('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: '.grid-sizer'
}
});
$('.sorting-menu a').click(function() {
if($(this).hasClass('active')) return false;
$(this).parent().parent().find('.active').removeClass('active');
$(this).addClass('active');
$(this).closest('.sorting-menu').find('.tabulation-title').text($(this).text());
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
});
});
First library is connected, second - it is initialized with click on filtartion links provided.
Range slider (from-to, example is available in product detail page sidebar) is connected as following:
<!-- range slider -->
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script>
$(document).ready(function(){
var minVal = parseInt($('.min-price').text());
var maxVal = parseInt($('.max-price').text());
$( "#prices-range" ).slider({
range: true,
min: minVal,
max: maxVal,
step: 5,
values: [ minVal, maxVal ],
slide: function( event, ui ) {
$('.min-price').text(ui.values[ 0 ]);
$('.max-price').text(ui.values[ 1 ]);
}
});
});
</script>
The most common sliders can be found in elements.html page. Base html structure looks like this:
<div class="swiper-container">
<div class="swiper-button-prev swiper-button"></div>
<div class="swiper-button-next swiper-button"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide content
</div>
<div class="swiper-slide">
Slide content
</div>
<div class="swiper-slide">
Slide content
</div>
<div class="swiper-slide">
Slide content
</div>
</div>
<div class="swiper-pagination"></div>
</div>
There are few options you can modify by adding some data-attributes to "<div class="swiper-container">". For custom homepage intro sliders we recommend change just attributes for speed, autoplay, mousewheel.
- change speed of slider (default - 500ms)
<div class="swiper-container" data-speed="1000">
- change number of slides (default - 1)
<div class="swiper-container" slides-per-view="2">
- responsive number of slides (4 - default, xs-slides - phones, sm-slides - tablets, md-slides - small desktops, lt-slides - laptops)
<div class="swiper-container" data-slides-per-view="4" data-breakpoints="1" data-xs-slides="1" data-sm-slides="2" data-md-slides="3" data-lt-slides="3">
- enable mousewheel
<div class="swiper-container" data-mousewheel="1">
- enable autoplay (miliseconds)
<div class="swiper-container" data-autoplay="5000">
- enable autoheight of slides:
<div class="swiper-container" data-auto-height="1">
- enable loop mode (recommended for sliders with one slide per view only):
<div class="swiper-container" data-loop="1">
- set active slide (index number of slide)
<div class="swiper-container" data-ini="3">
Javascripts required to display Google map on your page:
<!-- MAP --> <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="js/map.js"></script>
Pay attention, that Google has changed its api policy, and for newly registered domains or localhost on your machine map may require special api access key. Instructions how to obtain it are here - https://www.latecnosfera.com/2016/06/google-maps-api-error-missing-keymap-error-solved.html
In HTML Google map looks like this.
<div class="map-wrapper">
<div id="map-canvas" class="full-width" data-lat="34.0151244" data-lng="-118.4729871" data-zoom="14"></div>
</div>
<div class="addresses-block hidden">
<a class="marker" data-lat="34.0151244" data-lng="-118.4729871" data-string="1. Here is some address or email or phone or something else..."></a>
</div>
div class="addresses-block" contains a list of <a> tags. Each one is your marker on map and has following attributes:
Tabs example:
<div class="tabs-block"> <div class="row"> <div class="col-lg-4 col-xs-b15 col-lg-b0"> <div class="h4">best proposes</div> </div> <div class="col-lg-8"> <div class="tabulation-menu-wrapper col-lg-text-right"> <div class="tabulation-title simple-input">all</div> <ul class="tabulation-toggle"> <li><a class="tab-menu active">all</a></li> <li><a class="tab-menu">featured</a></li> <li><a class="tab-menu">on sale</a></li> <li><a class="tab-menu">top rated</a></li> </ul> </div> </div> </div> <div class="empty-space col-xs-b15 col-sm-b30"></div> <div class="tab-entry" style="display: block;"> content </div> <div class="tab-entry"> content </div> <div class="tab-entry"> content </div> <div class="tab-entry"> content </div> </div>
Javascript for contact forms:
<!-- CONTACT --> <script src="js/contact.form.js"></script>
All contact fields are necessary, except subject.
In contact.form.js file you can modify validation messages:
- this is how error message will look.
msg = 'The following fields should be filled:'
- and this is how "thank you" message will look after successfull validation:
successMessage = "Your email is very important to us. One of our representatives will contact you at first chance."
After form is successfully validated, php action file send_mail.php sends email. Here are two variables which you may like to change.
$mail_to = "yourpersonalemail@gmail.com"; $mail_from = "webmaster@example.com";
$mail_to - your email address, where all messages will be sent.
$mail_from - will display some address in your mail agent, from where message was sent.
You have custom made example of empty-space block. It is used to make different vertical margins between elements. It works perfectly with responsive design, as you can combine any margins for popular devices. Examples of this shortcode are provided in elements.html page.
Classes start width "col-", than resolution is specified as in bootstrap "-xs" or "-sm" or "-md" or "-lg", than "-b" which means "bottom" and actual number of pixels. You can use from 0 to 100 with step 5. If you use classes on "empty-space" block - they mean height of this transparent block. If you use them on any other divs - they mean margin-bottom from that div. Let's look at exaples of elements page:
Block has 20px height on phones, 40 on tablets, 60 on small desktops, 100 on widescreens.
<div class="h5 small"><b>PHONE - 20PX, TABLET - 40PX, DESKTOP - 60PX, WIDESCREEN - 100PX</b></div> <div class="empty-space col-xs-b20 col-sm-b40 col-md-b60 col-lg-b100" style="background: #989898;"></div>
<div class="h5 small"><b>PHONE - 0PX, TABLET - 0PX, DESKTOP - 0PX, WIDESCREEN - 100PX (visible only on widescreens)</b></div> <div class="empty-space col-lg-b100" style="background: #989898;"></div>
<div class="h5 small"><b>PHONE - 0PX, TABLET - 40PX, DESKTOP - 60PX, WIDESCREEN - 0PX (visible only on tablets and small desktops)</b></div> <div class="empty-space col-sm-b40 col-md-b60 col-lg-b0" style="background: #989898;"></div>
<div class="h5 small"><b>PHONE - 20PX, TABLET - 0PX, DESKTOP - 0PX, WIDESCREEN - 0PX (visible only on phones)</b></div> <div class="empty-space col-xs-b20 col-sm-b0" style="background: #989898;"></div>
Typically popup structure look like this:
<div class="popup-wrapper"> <div class="bg-layer"></div> <div class="popup-content" data-rel="1"> <div class="layer-close"></div> <div class="popup-container size-1"> content <div class="button-close"></div> </div> </div> <div class="popup-content" data-rel="2"> <div class="layer-close"></div> <div class="popup-container size-1"> content <div class="button-close"></div> </div> </div> </div>
Every popup has its unique data-rel attribute, so any button on your page can be connected to specific popup to open it. It looks like this:
<a class="open-popup" data-rel="1"><b>login</b></a>
It means that popup with data-rel="1" attribute will be opened after click on that button.
Video popup in html looks like following (placed same as other popups in the same wrapper - examples are in blog and blogdetail pages):
<div class="popup-content video-popup"> <div class="layer-close"></div> <div class="popup-container size-4"> <div class="embed-responsive embed-responsive-16by9 popup-iframe"> </div> <div class="button-close"></div> </div> </div>
Button to open such popup looks like this:
<span class="play-button open-video" data-src="https://www.youtube.com/embed/kQT2y3UiosQ?autoplay=1&loop=1&modestbranding=1&rel=0&showinfo=0&color=white&theme=light&wmode=transparent"></span>
Class "play-button" makes it look like styled play button. Class "open-video" allows it to open video popup. Data-src - simple iframe src obtained from youtube for example to paste inside video popup.
Product popup can be reviewed in elements.html page for better understanding. There are 2 buttons provided at the top of the page. First one opens static popup, as described above, with unique data-rel attribute. The other one - which is supposed to be the most common way to use this popup - calls ajax, and such popup is created dynamically. It is not presented in code when page loads, but loads into it on your demand.
<a class="open-popup-ajax" href="_ajax_product.html">...</a>
Href attribute refers ajax request to html page, which contains just popup code. After database connected it can be obtained from it.
Similar logic of opening popups was used in gallery pages. We've provided to you ajax example page called "_ajax_gallery.html". So many images and galleries are not recommended to load at once.
Remember that ajax requests work on server only, and not on your local machine.
All fonts, images, icons used in this template are free for commercial use.
Once again, 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 via our ThemeForest account.