Divano - Theme documentation
Version 1.1.0

Stylesheets

First of all, you need to include all needed css files. Make sure that the main theme css " theme.css" is the last one, it will apply all basic theme files. Media queries for responsive preview are included!

            <link rel="stylesheet" media="all" href="css/bootstrap.css" />
<link rel="stylesheet" media="all" href="css/animate.css" />
<link rel="stylesheet" media="all" href="css/font-awesome.css" />
<link rel="stylesheet" media="all" href="css/ion-range-slider.css" />
<link rel="stylesheet" media="all" href="css/linear-icons.css" />
<link rel="stylesheet" media="all" href="css/magnific-popup.css" />
<link rel="stylesheet" media="all" href="css/owl.carousel.css" />
<link rel="stylesheet" media="all" href="css/theme.css" />
                    

Javascript

Add all main .js files to your document. Options and initalizations are in " main.js"

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ion.rangeSlider.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/tilt.jquery.js"></script>
<script src="js/jquery.easypiechart.js"></script>
<script src="js/bigtext.js"></script>
<script src="js/main.js"></script>
    

Page loader

Page loader markup needs to be firs element after "body" tag.

Markup of loader

<div class="page-loader">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

Loader javascript

Be sure that $(window).bind("load", function () {...} cannot be inside $(function() {...}) shorthand for $( document ).ready()

$(window).on("load", function () {
    setTimeout(function () {
        $('.page-loader').addClass('loaded');
    }, 1000);
})

Navigation

Markup

First of all, you need to include all needed css files. Make sure that the main theme css " theme.css" is the last one, it will apply all basic theme files. Media queries for responsive preview are included!

            
<nav>

    <div class="container">

        <a href="index.html" class="logo"><img src="assets/images/divano-logo.svg" alt="" width="130" height="55" /></a>

        <!-- ==========  Top navigation ========== -->

        <div class="navigation navigation-top clearfix">
            <ul>

                <!--add active class for current page-->

                <li class="left-side"><a href="index.html" class="logo-icon"><img src="assets/images/divano-logo.svg" alt="Alternate Text" width="150" height="34" /></a></li>

                <!--add new item-->

                <li class="left-side"><a href="#">Your item</a></li>

                <!--login, search & cart mobile triggers-->

                <li><a href="javascript:void(0);" class="open-login"><i class="icon icon-user"></i></a></li>
                <li><a href="javascript:void(0);" class="open-search"><i class="icon icon-magnifier"></i></a></li>
                <li><a href="javascript:void(0);" class="open-cart"><i class="icon icon-cart"></i> <span>4</span></a></li>
            </ul>
        </div>

        <!-- ==========  Main navigation ========== -->

        <div class="navigation navigation-main">

            <!--login, search & cart desktop triggers-->

            <a href="#" class="open-login"><i class="icon icon-user"></i></a>
            <a href="#" class="open-search"><i class="icon icon-magnifier"></i></a>
            <a href="#" class="open-cart"><i class="icon icon-cart"></i> <span>4</span></a>
            <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>

            <div class="floating-menu">

                <!--mobile toggle menu trigger-->

                <div class="close-menu-wrapper">
                    <span class="close-menu"><i class="icon icon-cross"></i></span>
                </div>

                <!--menu list-->

                <ul>

                    <!--single dropdown example-->

                    <li>

                        <a href="#">Home <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>

                        <!--dropdown-->

                        <div class="navbar-dropdown navbar-dropdown-single">
                            <div class="navbar-box">
                                <div class="box-full">
                                    <div class="box clearfix">
                                        <ul>
                                            <li class="label">Label</li>
                                            <li><a href="#">Submenu item</a></li>
                                            <li>...</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>

                    <!--megadropdown boxed example-->

                    <li>
                        <a href="#">Boxmenu  <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>

                        <!--megadropdown-->

                        <div class="navbar-dropdown">
                            <div class="navbar-box">

                                <!--left side dropdown-->

                                <div class="box-lg">
                                    <div class="box clearfix">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <ul>
                                                    <li class="label">Label</li>
                                                    <li><a href="#">Submenu item</a></li>
                                                    <li>...</li>
                                                    <!--add link-->
                                                    <li class="more"><a href="#"><i class="icon icon-chevron-right"></i> More</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--right side dropdown-->

                                <div class="box-sm">
                                    <div class="image">
                                        <!--your image goes here-->
                                    </div>
                                    <div class="box">
                                        <!--your content goes here-->
                                    </div>
                                </div>

                            </div>
                        </div>
                    </li>

                    <!--megadropdown full example-->

                    <li>
                        <a href="#">Megamenu <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>
                        <div class="navbar-dropdown">
                            <div class="navbar-box">
                                <div class="box-full">
                                    <div class="box clearfix">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <ul>
                                                    <li>...</li>
                                                </ul>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <!--currency navbar-->

                    <li class="nav-settings">
                        <a href="javascript:void(0);"><span class="nav-settings-value">CURRENCY</span> <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>
                        <div class="navbar-dropdown navbar-dropdown-single">
                            <div class="navbar-box">
                                <div class="box-full">
                                    <div class="box clearfix">
                                        <ul class="nav-settings-list">
                                            <li><a href="javascript:void(0);">...</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <!--language navbar-->

                    <li class="nav-settings">
                        <a href="javascript:void(0);"><span class="nav-settings-value">LANGUAGE</span> <span class="open-dropdown"><i class="fa fa-angle-down"></i></span></a>
                        <div class="navbar-dropdown navbar-dropdown-single">
                            <div class="navbar-box">
                                <div class="box-full">
                                    <div class="box clearfix">
                                        <ul class="nav-settings-list">
                                            <li><a href="javascript:void(0);">...</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- ==========  Search wrapper ========== -->

        <div class="search-wrapper">
            <input class="form-control" placeholder="Search..." />
            <button class="btn btn-outline-dark btn-sm">Search now</button>
        </div>

        <!-- ==========  Login wrapper ========== -->

        <div class="login-wrapper">
            <div class="h5">Sign in</div>
            <form>
                <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <a href="#forgotpassword" class="open-popup btn btn-main btn-sm">Forgot password?</a>
                    <a href="#createaccount" class="open-popup btn btn-main btn-sm">Don't have an account?</a>
                </div>
                <button type="submit" class="btn btn-block btn-outline-primary">Submit</button>
            </form>
        </div>

        <!-- ==========  Cart wrapper ========== -->

        <div class="cart-wrapper">
            <div class="checkout">
                <div class="clearfix">

                    <div class="row">

                        <!--cart item-->

                        <div class="cart-block cart-block-item clearfix">
                            <div class="image">
                                <a href="product.html"><img src="assets/images/item-1.jpg" alt="" /></a>
                            </div>
                            <div class="title">
                                <div><a href="product.html"><!--Product item--></a></div>
                                <small><!-->Product category--></small>
                            </div>
                            <div class="quantity">
                                <input type="number" value="2" class="form-control form-quantity" />
                            </div>
                            <div class="price">
                                <span class="final"><!--Final price--></span>
                                <span class="discount"><!--Old price--></span>
                            </div>
                            <!--delete-this-item-->
                            <span class="icon icon-cross icon-delete"></span>
                        </div>

                        <!--cart item-->

                        <div class="cart-block cart-block-item clearfix">
                            ...
                        </div>


                    </div>

                    <hr />

                    <!--cart prices -->

                    <div class="clearfix">

                        <div class="cart-block cart-block-footer clearfix">
                            <div>
                                <strong><!--Discount--></strong>
                            </div>
                            <div>
                                <span><!--Price--></span>
                            </div>
                        </div>

                        <div class="cart-block cart-block-footer clearfix">
                            ...
                        </div>

                    </div>

                    <hr />

                    <!--cart final price -->

                    <div class="clearfix">
                        <div class="cart-block cart-block-footer clearfix">
                            <div>
                                <strong><!--Total--></strong>
                            </div>
                            <div>
                                <div class="h4 title"><!--$ 1259,00--></div>
                            </div>
                        </div>
                    </div>


                    <!--cart navigation -->

                    <div class="cart-block-buttons clearfix">
                        <div class="row">
                            <div class="col-sm-6">
                                <a href="products-grid.html" class="btn btn-outline-info"><!--Continue shopping--></a>
                            </div>
                            <div class="col-sm-6 text-right">
                                <a href="checkout-1.html" class="btn btn-outline-warning"><span class="icon icon-cart"></span> <!--Checkout--></a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</nav>

                    
            

Call javascript

The functions are triggers login, searchbar or cart items. Mobile events are included too.

            
// Main navigation & mega menu
// ----------------------------------------------------------------

// Global menu variables

var objSearch = $('.search-wrapper'),
    objLogin = $('.login-wrapper'),
    objCart = $('.cart-wrapper'),
    objMenu = $('.floating-menu'),
    objMenuLink = $('.floating-menu a'),
    $search = $('.open-search'),
    $login = $('.open-login'),
    $cart = $('.open-cart'),
    $menu = $('.open-menu'),
    $openDropdown = $('.open-dropdown'),
    $close = $('.close-menu'),
    $settingsItem = $('.nav-settings .nav-settings-list li');

// Open/close login

$login.on('click', function () {
    toggleOpen($(this));
    objLogin.toggleClass('open');
    closeSearch();
    closeCart();
});

// Open/close search bar

$search.on('click', function () {
    toggleOpen($(this));
    objSearch.toggleClass('open');
    objSearch.find('input').focus();
    closeLogin();
    closeCart();
});

// Open/close cart

$cart.on('click', function () {
    toggleOpen($(this));
    objCart.toggleClass('open');
    closeLogin();
    closeSearch();
});

// Settings language & currency dropdown

$settingsItem.on('click', function () {
    var $value = $(this).closest('.nav-settings').find('.nav-settings-value');
    $value.text($(this).text());
});


// Mobile menu open/close

$menu.on('click', function () {
    objMenu.addClass('expanded');
    closeSearch();
    closeLogin();
    closeCart();
});

// Floating menu hyperlink
if ($('nav').hasClass('navbar-single-page')) {
    objMenuLink.on('click', function () {
        objMenu.removeClass('expanded');
    });
}

// Open dropdown/megamenu

$openDropdown.on('click', function (e) {

    e.preventDefault();

    var liParent = $(this).parent().parent(),
        liDropdown = liParent.find('.navbar-dropdown');

    liParent.toggleClass('expanded');

    if (liParent.hasClass('expanded')) {
        liDropdown.slideDown();
    }
    else {
        liDropdown.slideUp();
    }
});

// Close menu (mobile)

$close.on('click', function () {
    $('nav').find('.expanded').removeClass('expanded');
    $('nav').find('.navbar-dropdown').slideUp();
});

// Global functions

function toggleOpen(el) {
    $(el).toggleClass('open');
}

function closeSearch() {
    objSearch.removeClass('open');
    $search.removeClass('open');
}
function closeLogin() {
    objLogin.removeClass('open');
    $login.removeClass('open');
}
function closeCart() {
    objCart.removeClass('open');
    $cart.removeClass('open');
}
                
            

Frontpage slider

Markup example of slider

Animation are included and it can be called on data-amination attributes. List of supported animations are here

            
<div class="header-content">

    <div class="owl-slider owl-carousel owl-theme">

        <!--Slide item-->

        <div class="item d-flex align-items-center" style="background-image:url(IMAGE_PATH)">

            <div class="container">

                <!--Caption-->

                <div class="caption">
                    <div class="animated" data-start="fadeInUp">
                        <div class="promo pt-3">
                            <div class="title title-sm p-0 m-0"><!--Text--></div>
                        </div>
                    </div>
                    <div class="animated" data-start="fadeInUp">
                        <!--Text-->
                    </div>
                    <div class="animated" data-start="fadeInUp">
                        <div class="pt-3">
                            <a href="#" target="_blank" class="btn btn-outline-warning"><!--Text--></a>
                            <a href="#" target="_blank" class="btn btn-outline-light"> <!--Text--></a>
                        </div>
                    </div>
                    <div class="animated" data-start="fadeInUp">
                        <div class="promo pt-5">
                            <div class="h6 p-0 m-0"><!--Text--></div>
                            <div class="price">
                                <span><!--Text--></span>
                                <span><!--Text--></span>
                            </div>
                            <small><!--Text--></small>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

</div>
                
            

Initalize the plugin

For more documentation please visit Owl Carousel webiste

            
// Frontpage slider
// ----------------------------------------------------------------

var arrowIcons = [
    '<span class="icon icon-chevron-left"></span>',
    '<span class="icon icon-chevron-right"></span>'
];


$.each($(".owl-slider"), function (i, n) {

    var $n = $(n);

    $n.owlCarousel({
        items: 1,
        loop: true,
        // spacing
        margin: 0,
        stagePadding: 0,
        // navigation
        nav: true,
        dots: false,
        navText: arrowIcons,
        // animation effects
        smartSpeed: 950,
        onTranslated: startAnimation,
        onTranslate: resetAnimation,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut'
    });

    resetAnimation(); // reset effects all on initalization
    startAnimation(); // start animation on first slide

    function startAnimation(event) {
        // find active slide
        var activeItem = $(n).find('.owl-item.active'),
            timeDelay = 100;

        $.each(activeItem.find('.animated'), function (j, m) {
            // catch active slide
            var item = $(m);
            item.css('animation-delay', timeDelay + 'ms');
            timeDelay = timeDelay + 180;
            // add animation
            item.removeClass('fadeOut');
            item.addClass(item.data('start'));
        });
    }

    function resetAnimation(event) {
        // catch all slides
        var items = $(n).find('.owl-item');
            // for each add animation end
            $.each(items.find('.animated'), function (j, m) {
                var item = $(m);
                item.removeClass(item.data('start'));
                item.addClass('fadeOut');
            });
    }
    var navHeight = $('nav').height();

    if ($(n).hasClass('owl-slider-fullscreen')) {
        $('.header-content .item').height($(window).height() - navHeight);
    }

});
            
            

Icons slider

Markup example of slider

All furniture icons examples are available in the shorcodes page. Here is an example to generate a markup and initalize javascript function.

Set custom property "data-icons" to show number of icons on desktop

            
<div class="owl-icons-wrapper">
    <div class="container">
        <div class="owl-icons owl-carousel owl-theme" data-icons="8">

            <!--icon item-->

            <a href="#">
                <figure>
                    <div class="image">
                        <img src="IMAGE-PATH" alt="Alternate Text" />
                    </div>
                    <figcaption>Your title</figcaption>
                </figure>
            </a>

        </div> 
    </div>
</div>
                
            

Initalize the plugin

            
$.each($(".owl-icons"), function (i, n) {

    $(n).owlCarousel({
        items: 6,
        loop: true,
        // spacing
        margin: 0,
        stagePadding: 0,
        // navigation
        nav: true,
        dots: false,
        navText: arrowIcons,
        // animation effects
        smartSpeed: 950,
        responsive: {
            0: {
                items: 4,
                nav: true
            },
            600: {
                items: 4,
                nav: false
            },
            1000: {
                items: $(n).data("icons"),
                nav: true,
                loop: false
            }
        }
    });

});
            
            

Don't repeat variable "arrowIcons" if already included.

3D hover cards

Markup example of slider

Display 3d hover effect with data atribute "data-3d"

            
<div class="blog blog-block">
    <div class="container">
        <div class="row text-center">

            <!--Item-->

            <div class="col-md-4">
                <article>
                    <div data-3d>
                        <a href="#">
                            <div class="image">
                                <img src="IMAGE_PATH" alt="" />
                            </div>
                            <div class="entry entry-block">
                                <div class="date">...</div>
                                <div class="title">
                                    <h2 class="h4">...</h2>
                                </div>
                                <div class="description">
                                    <p>...</p>
                                </div>
                            </div>
                            <div class="show-more">
                                <span class="btn btn-clean">...</span>
                            </div>
                        </a>
                    </div>
                </article>
            </div>

        </div>
    </div>
</div>
                
            

Initalize the plugin

            
// hover3d
// ----------------------------------------------------------------

$('[data-3d]').tilt({
    glare: true,
    maxTilt: 3,
    maxGlare: 1
});
            
            

Team figures

Markup example of team

            
<div class="team">
    <div class="container">
        <div class="row">

            <!--Team member-->

            <div class="col-md-3" data-3d>
                <article>
                    <div class="details details-text">
                        <div class="inner">
                            <h5 class="title">...</h5>
                            <h6 class="title">...</h6>
                        </div>
                    </div>
                    <div class="image">
                        <img src="assets/images/person-4.jpg" alt="" />
                    </div>
                    <div class="details details-social">
                        <div class="inner">
                            <a href="#"><i class="fa fa-facebook"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-google-plus"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                        </div>
                    </div>
                </article>
            </div>

        </div>
    </div>
</div>

            

Instagram

Markup example of instagram

            
<div class="instagram">

    <header>
        <h2 class="h6 title">
            Follow us <br>
            <i class="fa fa-instagram fa-3x"></i> <br>
            #Divano
        </h2>
    </header>

    <div class="gallery clearfix">

        <!--item-->

        <a class="item" href="#">
            <img src="IMAGE_PATH" alt="">
        </a>

    </div> 
</div>

            

Product grid

Markup example of product grid

<div class="products">
    <div class="container">
        <div class="row">

            <!--Product item-->

            <div class="col-6 col-lg-3">

                <article>
                    <div class="info">
                        <span class="add-favorite">
                            <a href="javascript:void(0);" data-title="Add to favorites" data-title-added="Added to favorites list">
                                <i class="icon icon-heart"></i>
                            </a>
                        </span>
                        <span>
                            <a href="#productid1" class="mfp-open" data-title="Quick wiew">
                                <i class="icon icon-eye"></i>
                            </a>
                        </span>
                    </div>
                    <div class="btn btn-add">
                        <i class="icon icon-cart"></i>
                    </div>
                    <div class="figure-grid">
                        <span class="badge badge-warning">...</span>
                        <div class="image">
                            <a href="product.html">
                                <img src="IMAGE_PATH alt="" />
                            </a>
                        </div>
                        <div class="text">
                            <h2 class="title h4">
                                <a href="#">...</a>
                            </h2>
                            <sub>...</sub>
                            <sup>...</sup>
                            <span class="description clearfix">
                                ...
                            </span>
                        </div>
                    </div>
                </article>

            </div>

        </div> <!--/row-->
    </div>
</div>

Product list

Markup example of product list

<div class="products">
    <div class="container">
        <div class="row">

            <!--Product item-->

            <div class="col-12">
                <article>
                    <div class="info">
                        <span class="add-favorite">
                            <a href="javascript:void(0);" data-title="Add to favorites" data-title-added="Added to favorites list">
                                <i class="icon icon-heart"></i>
                            </a>
                        </span>
                        <span>
                            <a href="#productid1" class="mfp-open" data-title="Quick wiew">
                                <i class="icon icon-eye"></i>
                            </a>
                        </span>
                    </div>
                    <div class="btn btn-add">
                        <i class="icon icon-cart"></i>
                    </div>
                    <div class="figure-list">
                        <span class="badge badge-warning">...</span>
                        <div class="image">
                            <a href="#">
                                <img src="IMAGE_PATH alt="" />
                            </a>
                        </div>
                        <div class="text">
                            <h2 class="title h4">
                                <a href="#">...</a>
                            </h2>
                            <sub>...</sub>
                            <sup>...</sup>
                            <span class="description clearfix">
                                ...
                            </span>
                        </div>
                    </div>
                </article>
            </div>

        </div> <!--/row-->
    </div>
</div>

Blog grid

Markup example of blog grid

                
<div class="blog blog-category blog-animated pt-4 pt-lg-5">
    <div class="container">
        <div class="row">

            <!--Blog item-->

            <div class="col-sm-6">
                <article>
                    <a href="article.html">
                        <div class="image" style="background-image:url(IMAGE_PATH)">
                            <img src="IMAGE_PATH" alt="" />
                        </div>
                        <div class="entry entry-table">
                            <div class="date-wrapper">
                                <div class="date">
                                    <span>...</span>
                                    <strong>...</strong>
                                    <span>...</span>
                                </div>
                            </div>
                            <div class="title">
                                <h2 class="h5">...</h2>
                            </div>
                        </div>
                    </a>
                </article>
            </div>

        </div>
    </div><!--/container-->
</div>
                
            

Blog list

Markup example of blog list

            
<div class="blog blog-category blog-animated pt-4 pt-lg-5">
    <div class="container">
        <div class="clearfix">

            <!--Blog item-->

            <article class="article-table">
                <a href="article.html">
                    <div class="image" style="background-image:url(IMAGE_PATH)">
                        <img src="IMAGE_PATH" alt="" />
                    </div>
                    <div class="text">
                        <div class="title">
                            <p>...</p>
                            <h2 class="h5">...</h2>
                        </div>
                        <div class="text-intro">
                            <p>...</p>
                        </div>
                    </div>
                </a>
            </article>

        </div>
    </div><!--/container-->
</div>
            
            

Title demo

Markup example of slider

Initalize the plugin

Credits

Images

• Unsplash
• Pexels
• Pixabay
• Morguefile

jQuery

• Owl Carousel
• Magnific popup
• Ion RangeSlider

CSS

• Bootstrap
• Animate.css
• Linear icons
• Montserrat - Google Fonts
• Roboto - Google Fonts