First of all, we want to say thanks you! We are very grateful that you have chosen our mega menu for your website. We will do everything we can to provide you the best support possible. Feel free asking us if you need more help.
This document covers the Galio - Bootstrap Responsive Template structure, set up, and use of this template and provides answers and solutions to common problems and issues - we encourage you to 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 ask support. (Support)
/* ========================================= === Main Slider ==== ============================================ */ $('#ma-inivoslider-banner7').nivoSlider({ effect: 'random', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 1000, pauseTime: 6000, startSlide: 0, controlNav: false, controlNavThumbs: false, pauseOnHover: true, manualAdvance: false, prevText: 'Prev', nextText: 'Next', afterLoad: function(){ }, beforeChange: function(){ }, afterChange: function(){ } });
/* ======================================== === Owl Carousel/ Slider/ New Arrival === ======================================== */ $("#featured-products .owl").owlCarousel({ autoPlay : false, items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [991,2], itemsTablet: [767,2], itemsMobile : [480,1], slideSpeed : 3000, paginationSpeed : 3000, rewindSpeed : 3000, navigation : true, stopOnHover : true, pagination : false, scrollPerPage:true, });
In contact.html there you can edit google map address.
/* ============================================== Google Maps =============================================== */ $(document).ready(function(){ createMarker(latitude,longitude); });
The template is build on Bootstrap 3.3.4 the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web..
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Create a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding, then create .row and add columns with appropriate device name (xs, sm, md, lg) and grid number (2, 4, 6, 12).
For full documentation, please visit Bootstrap 3 site: http://getbootstrap.com/css/
<!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <div class="container"> <div class="row"> <div class="col-lg-6"> ... </div> <div class="col-lg-6"> ... </div> </div> </div>
CSS folder and files struture Well organized.
These are the CSS file you're be using in the template:
bootstrap.css (Bootstrap Original file of 3.2.0 Don't touch this file) style.css (All custom elements in this file)
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/
The initialization of the elements, libs and features is made by the file scripts.js, in the js folder. Take a look at the "build" function to see what it does.
<!-- Custom Functions --> <script src="js/custom.js" typr="text/javascript"></script>
In Galio - Bootstrap Responsive Template we used FontAwesome icons. Which is more user friendly and 350+ icons avaiable.
You can find all icon classes here : FontAwesome.Use of icons :
<i class="fa fa-star"><i>
In Galio Bootstrap Responsive Template we used Nivo Slider for main slider. Which is more user friendly and supports all major browsers.
Main Slider :
<div class="flexslider ma-nivoslider"> <div class="ma-loading"></div> <div id="ma-inivoslider-banner7" class="slides"> <img src="images/slider/slide-01.jpg" class="dn" alt="" title="#banner7-caption1" /> <img src="images/slider/slide-02.jpg" class="dn" alt="" title="#banner7-caption2" /> </div> <div id="banner7-caption1" class="banner7-caption nivo-html-caption nivo-caption"> <div class="timethai"></div> <div class="banner7-content slider-1"> <div class="title-container"> <h1 class="title1">headphones az12</h1> <h2 class="title2" >Typi non habent claritatem insitam; est usus legentis</h2> </div> <div class="banner7-des"> <div class="des"> <h1>sale up to!</h1> <h2>30% off</h2> <div class="check-box"> <ul class="list-unstyled"> <li>With all products in shop</li> <li>All combos $69.96</li> </ul> </div> </div> </div> <img class="img1" src="images/slider/img-04.png" alt="" /> </div> </div> <div id="banner7-caption2" class="banner7-caption nivo-html-caption nivo-caption"> <div class="timethai"></div> <div class="banner7-content slider-2"> <div class="title-container"> <h1 class="title1">Samsung s5</h1> <h2 class="title2" >Typi non habent claritatem insitam; est usus legentis</h2> </div> <div class="banner7-des"> <div class="des"> <h1>sale up to!</h1> <h2>50% off</h2> </div> </div> <img class="img1" src="images/slider/img-05.png" alt="" /> </div> </div> </div><!-- /.flexslider -->
Nivo Slider Activation
$(window).load(function() { $(document).off('mouseenter').on('mouseenter', '.pos-slideshow', function(e){ $('.ma-banner7-container .timethai').addClass('pos_hover'); }); $(document).off('mouseleave').on('mouseleave', '.pos-slideshow', function(e){ $('.ma-banner7-container .timethai').removeClass('pos_hover'); }); }); $(window).load(function() { $('#ma-inivoslider-banner7').nivoSlider({ effect: 'random', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 1000, pauseTime: 6000, startSlide: 0, controlNav: false, controlNavThumbs: false, pauseOnHover: true, manualAdvance: false, prevText: 'Prev', nextText: 'Next', afterLoad: function(){ }, beforeChange: function(){ }, afterChange: function(){ } }); });
In Galio Bootstrap Responsive Template we used OwlCarousel for all slider. Which is more user friendly and supports all major browsers.
Featured Slider :
<div id="featured-products" class="owl-container"> <div class="owl"> <div class='productslider-item item'> <div class="item-inner"> <div class="images-container"> <div class="product_icon"> <div class='new-icon'><span>new</span></div> </div> <a href="#" title="Nunc facilisis" class="product-image"> <img src="images/products/8.jpg" alt="Nunc facilisis" /> </a> <div class="box-hover"> <ul class="add-to-links"> <li><a href="#" class="link-quickview">Quick View</a></li> <li><a href="#" class="link-wishlist">Add to Wishlist</a></li> <li><a href="#" class="link-compare">Add to Compare</a></li> <li><a href="#" class="link-cart">Add to Cart</a></li> </ul> </div> </div> <div class="des-container"> <h2 class="product-name"><a href="#" title="Nunc facilisis">Nunc facilisis</a></h2> <div class="price-box"> <p class="special-price"> <span class="price-label">Special Price</span> <span class="price">$169.99</span> </p> <p class="old-price"> <span class="price-label">Regular Price: </span> <span class="price">$189.00</span> </p> </div> <div class="ratings"> <div class="rating-box"> <div class="rating" style="width:67%"></div> </div> <span class="amount"><a href="#">3 Review(s)</a></span> </div> </div> </div> </div> </div> </div>
Owl Carousel Activation
/* ======================================== === Owl Carousel/ Slider/ New Arrival === ======================================== */ $("#featured-products .owl").owlCarousel({ autoPlay : false, items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [991,2], itemsTablet: [767,2], itemsMobile : [480,1], slideSpeed : 3000, paginationSpeed : 3000, rewindSpeed : 3000, navigation : true, stopOnHover : true, pagination : false, scrollPerPage:true, });
In Galio Bootstrap Responsive Template we used BxSlider and Cloud Zoom for product detail.
BxSlider & Cloud Zoom :
<div class="product-img-box"> <p class="product-image"> <a href="images/products/1.jpg" class="cloud-zoom" id="ma-zoom1"> <img src="images/products/1.jpg" alt="Fusce aliquam" title="Fusce aliquam" /> </a> </p> <div class="more-views thumbnail-container"> <ul class="bxslider"> <li class="thumbnail-item"> <a href="images/products/1.jpg" class="cloud-zoom-gallery" title="" name="images/products/1.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/1.jpg'"> <img src="images/products/1.jpg" alt="" /> </a> </li> <li class="thumbnail-item"> <a href="images/products/2.jpg" class="cloud-zoom-gallery" title="" name="images/products/2.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/2.jpg'"> <img src="images/products/2.jpg" alt="" /> </a> </li> <li class="thumbnail-item"> <a href="images/products/3.jpg" class="cloud-zoom-gallery" title="" name="images/products/3.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/3.jpg'"> <img src="images/products/3.jpg" alt="" /> </a> </li> <li class="thumbnail-item"> <a href="images/products/4.jpg" class="cloud-zoom-gallery" title="" name="images/products/4.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/4.jpg'"> <img src="images/products/4.jpg" alt="" /> </a> </li> <li class="thumbnail-item"> <a href="images/products/5.jpg" class="cloud-zoom-gallery" title="" name="images/products/5.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/5.jpg'"> <img src="images/products/5.jpg" alt="" /> </a> </li> <li class="thumbnail-item"> <a href="images/products/6.jpg" class="cloud-zoom-gallery" title="" name="images/products/6.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/6.jpg'"> <img src="images/products/6.jpg" alt="" /> </a> </li> </ul> </div> </div>
BxSlider Activation
$('.thumbnail-container .bxslider').bxSlider({ slideWidth: 94, slideMargin: 5, minSlides: 4, maxSlides: 4, pager: false, speed: 500, pause: 3000 });
Galio - Bootstrap Responsive Template ---------------------------------------------------- 10/08/2015 - Version 1.0 - RELEASE
Free fonts:
All images have been used for demonstration purposes only and are not included in the template.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating this template. No guarantees, but I'll do my best to assist. If you have any suggestions on how to improve our templates or documentation please share them!