Galio - Bootstrap Responsive Template Documentation

A Complete Guide of Galio - Bootstrap Responsive Template - Document Version 1.1

Support Item Page Live Demo

General Informations - top

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)


Folder Structure - top

How To? - top

How to Customize Main Slider?

/* =========================================
===  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,
    });


How to change google map address?

In contact.html there you can edit google map address.


/* ==============================================
    Google Maps
=============================================== */
    $(document).ready(function(){
	createMarker(latitude,longitude);
    });

HTML Structure - top

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/

  • css/bootstrap.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 Structure - top

CSS folder and files struture Well organized.
These are the CSS file you're be using in the template:

  • css
bootstrap.css (Bootstrap Original file of 3.2.0 Don't touch this file)
style.css (All custom elements in this file)
	

Java Script - top

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.

  • js/scripts.js
<!-- Custom Functions -->
<script src="js/custom.js" typr="text/javascript"></script>
	


Font Awesome Icon - top

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>

Nivo Slider - top

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,
    });


BxSlider & Cloud Zoom - top

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
    });

Change Log - top
                Galio - Bootstrap Responsive Template
                ----------------------------------------------------
                
                10/08/2015 - Version 1.0
                - RELEASE
			

Sources and Credits - top
I've used the following plugins as listed.

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!