Mobel - Theme documentation
Version 2.2.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="screen" href="css/bootstrap.css" />
<link rel="stylesheet" media="screen" href="css/animate.css" />
<link rel="stylesheet" media="screen" href="css/font-awesome.css" />
<link rel="stylesheet" media="screen" href="css/furniture-icons.css" />
<link rel="stylesheet" media="screen" href="css/linear-icons.css" />
<link rel="stylesheet" media="screen" href="css/magnific-popup.css" />
<link rel="stylesheet" media="screen" href="css/owl.carousel.css" />
<link rel="stylesheet" media="screen" href="css/theme.css" />

Xmas & new year theme

Update/copy your css folder in the current one. Please check that you have included the file: /css/img/xmas

Xmas theme needs to be the last one included, so it will overwrite all styles with the new one.
Check file index-xmas.html 

            <!--Xmas Theme Styles-->
<link rel="stylesheet" media="screen" href="css/theme-xmas.css" />

RTL Support

RTL support is now available in version 2.2

Include theme-rtl.css in page header to enable RTL direction for arabic languages, or check index-rtl.html to see an example. 

            <!--RTL Support -->
<link rel="stylesheet" media="all" href="css/theme-rtl.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/jquery.bootstrap.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.owl.carousel.js"></script>
<script src="js/jquery.ion.rangeSlider.js"></script>
<script src="js/jquery.isotope.pkgd.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>

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

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="content-slider">
    <div class="owl-slider"> <!-- for full screen slider use additional class 'owl-slider-fullscreen' --> 
        <!-- slide item -->
        <article style="background-image:url(assets/images/gallery-1.jpg)">
            <figure>
                <div class="container">
                    <h2 class="title animated h1" data-animation="fadeInDown">Title goes here...</h2>
                    <div class="desc animated" data-animation="fadeInUp">Content goes here...</div>
                    <div class="animated" data-animation="fadeInUp">
                        <a href="#" class="btn btn-main"><i class="icon icon-cart"></i> Button text</a>
                    </div>
                </div>
            </figure>
        </article>
    </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) {

        $(n).owlCarousel({
            autoHeight: false,
            navigation: true,
            navigationText: arrowIcons,
            items: 1,
            singleItem: true,
            addClassActive: true,
            transitionStyle: "fadeUp",
            afterMove: animatetCaptions,
            autoPlay: 8000,
            stopOnHover: false
        });

        animatetCaptions();

        function animatetCaptions(event) {
            "use strict";
            var activeItem = $(n).find('.owl-item.active'),
            timeDelay = 100;
            $.each(activeItem.find('.animated'), function (j, m) {
                var item = $(m);
                item.css('animation-delay', timeDelay + 'ms');
                timeDelay = timeDelay + 180;
                item.addClass(item.data('animation'));
                setTimeout(function () {
                    item.removeClass(item.data('animation'));
                }, 2000);
            });
        }

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

Furniture icon slider

Markup example of slider

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

            <div class="owl-icons-wrapper owl-icons-frontpage">
    <div class="container">
        <div class="owl-icons">
            <!-- === icon item === -->
            <a href="#">
                <figure>
                    <i class="f-icon f-icon-sofa"></i>
                    <figcaption>Sofa</figcaption>
                </figure>
            </a>
        </div> 
    </div> 
<div>

Initalize the plugin

            arrowIcons = [
    '<span class="icon icon-chevron-left"></span>',
    '<span class="icon icon-chevron-right"></span>'
];
$.each($(".owl-icons"), function (i, n) {
    $(n).owlCarousel({
        autoHeight: false,
        pagination: false,
        navigation: true,
        navigationText: arrowIcons,
        items: 6,
        itemsDesktop: [1199, 5],
        itemsDesktopSmall: [979, 5],
        itemsTablet: [768, 4],
        itemsTabletSmall: false,
        itemsMobile: [479, 3],
        addClassActive: true,
        autoPlay: 5500,
        stopOnHover: true
    });
});

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

Stretcher widget

Stretcher widget is custom made grid stretcher, and it support only 4 elements for inline display.

Markup

            <section class="stretcher-wrapper">
    <!-- === stretcher === -->
    <ul class="stretcher">
        <!-- === stretcher item === -->
        <li class="stretcher-item" style="background-image:url(...);">
            <!--logo-item-->
            <div class="stretcher-logo">
                <div class="text">
                    <span class="f-icon f-icon-bedroom"></span>
                    <span class="text-intro">...</span>
                </div>
            </div>
            <!--main text-->
            <figure>
                <h4>Your title ...</h4>
                <figcaption>Description ...</figcaption>
            </figure>
            <!--anchor-->
            <a href="#">Anchor link (this text will not be visable)</a>
        </li>
        <li>
            ...
        </li>
        <!-- === stretcher item more=== -->
        <li class="stretcher-item more">
            <div class="more-icon">
                <span data-title-show="Show more" data-title-hide="+"></span>
            </div>
            <a href="#"></a>
        </li>
    </ul>
</section>

Javascript:

                // Strecher accordion
    // ----------------------------------------------------------------

    var $strecherItem = $('.stretcher-item');
    $strecherItem.bind({
        mouseenter: function (e) {
            $(this).addClass('active');
            $(this).siblings().addClass('inactive');
        },
        mouseleave: function (e) {
            $(this).removeClass('active');
            $(this).siblings().removeClass('inactive');
        }
    });

Tabsy (image gallery tabs)

Markup content

Tabsy gallery can be applied on any framework (with grid items) or it can be used as it is

            <!-- ========================  Tabsy wrapper ======================== -->

<section class="tabsy-wrapper">

    <div class="container">

        <!--User main image on "tabsy" as background image-->

        <div class="tabsy" style="background-image:url(...)">

            <!-- === tabsy images === -->

            <div class="tabsy-images">

                <!-- Image -->

                <div id="id-1">
                    <img src="..." alt="" />
                </div>

                <!-- Image -->

                <div id="id-2">
                    <img src="..." alt="" />
                </div>

            </div>

            <!-- === tabsy links === -->

            <div class="tabsy-links">

                <div class="row">

                    <!-- figure "data-image" needs to have same value as tabsy-images > div ID -->
                    <!-- use current class to set default item -->

                    <!--tab item-->

                    <figure class="col-sm-3 col-md-3 current" data-image="id-1">
                        <a href="#" class="link">Anchor link (this text is now visable)</a>
                        <figcaption>
                            <span class="date">Date...</span>
                            <span class="h4 title">Title ...</span>
                            <span class="desc">Description ...</span>
                        </figcaption>
                    </figure>

                    <!--tab item-->

                    <figure class="col-sm-3 col-md-3" data-image="id-2">
                        ...
                    </figure>

                </div> <!--/row-->
            </div> <!--/tabsy-links-->
        </div> <!--/tabsy-->
    </div> <!--/container-->
</section>

Markup tabsy frontpage

We have two examples for tabsy gallery, can be nice replacement for some frontpage header slider (extra class: "tabsy-wrapper-frontpage"), or just it can be used as section.

            <section class="tabsy-wrapper tabsy-wrapper-frontpage">
    ...
</section>

Javascript:

                // Tabsy images
    // ----------------------------------------------------------------

    var tabsyImg = $('.tabsy .tabsy-images > div'),
        tabsyLink = $('.tabsy .tabsy-links figure');

    // apply images to parent background
    tabsyImg.each(function (i, n) {
        $(n).css('background-image', 'url(' + $(n).find('img').attr('src') + ')');
    });

    tabsyLink.bind('mouseenter mouseleave', function () {
        var self = $(this),
            tabID = self.attr('data-image');
        tabsyLink.removeClass('current');
        tabsyImg.removeClass('current');
        self.addClass('current');
        self.closest('.tabsy').find("#" + tabID).addClass('current');
    });

Blog listing articles

Markup - Blog Blocks

            <!-- ========================  Blog Block ======================== -->

<section class="blog blog-block">

    <div class="container">

        <div class="row">

            <!-- === blog item === -->

            <div class="col-sm-4">
                <article>
                    <a href="article.html">
                        <div class="image">
                            <img src="assets/images/project-1.jpg" alt="" />
                        </div>
                        <div class="entry entry-block">
                            <div class="date">Date ....</div>
                            <div class="title">
                                <h2 class="h3">Title ...</h2>
                            </div>
                            <div class="description">
                                <p>
                                    Description ...
                                </p>
                            </div>
                        </div>
                        <div class="show-more">
                            <span class="btn btn-main btn-block">Read more</span>
                        </div>
                    </a>
                </article>
            </div>

            <!-- === blog item === -->

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


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

Markup - Blog simple

            <!-- ========================  Blog ======================== -->

<section class="blog">

    <div class="container">

        <div class="row">

            <!-- === blog item === -->

            <div class="col-sm-4">
                <article>
                    <a href="article.html">
                        <div class="image" style="background-image:url(...)">
                            <img src="..." alt="" />
                        </div>
                        <div class="entry entry-table">
                            <div class="date-wrapper">
                                <div class="date">
                                    <span>MAR</span>
                                    <strong>08</strong>
                                    <span>2017</span>
                                </div>
                            </div>
                            <div class="title">
                                <h2 class="h5">Title ...</h2>
                            </div>
                        </div>
                        <div class="show-more">
                            <span class="btn btn-main btn-block">Link ...</span>
                        </div>
                    </a>
                </article>
            </div>

            <!-- === blog item === -->

            ...

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

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

Product listing articles

Markup product grid

            <!-- ========================  Products widget ======================== -->

<section class="products">

    <div class="container">

        <div class="row">

            <!-- === product-item === -->

            <div class="col-md-4 col-xs-6">

                <article>

                    <!--add to favorite & quick look-->

                    <div class="info">
                        <span class="add-favorite added">
                            <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>

                    <!--add to cart icon-->

                    <div class="btn btn-add">
                        <i class="icon icon-cart"></i>
                    </div>

                    <!--product specifications use "figure-grid" -->

                    <div class="figure-grid">

                        <!--product image-->

                        <div class="image">
                            <a href="#productid1" class="mfp-open">
                                <img src="assets/images/product-1.png" alt="" width="360" />
                            </a>
                        </div>

                        <!--product text-->

                        <div class="text">
                            <h2 class="title h4"><a href="$">...</a></h2>

                            <!--old price-->
                            <sub>$ 1499,-</sub>

                            <!--new price-->

                            <sup>$ 1099,-</sup>

                            <span class="description clearfix">Desciption ...</span>
                        </div>
                    </div>
                </article>
            </div>

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

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

Markup product list

            <!-- ======================== Products ======================== -->

<section class="products">

    <div class="container">

        <div class="row">

            <!-- === product-item === -->

            <div class="col-md-12">
                <article>

                    <!--add to favorite & quick look-->

                    <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>

                    <!--add to cart icon-->

                    <div class="btn btn-add">
                        <i class="icon icon-cart"></i>
                    </div>

                    <!--product specifications use "figure-list" -->

                    <div class="figure-list">

                        <!--product image-->

                        <div class="image">
                            <a href="#productid1" class="mfp-open">
                                <img src="assets/images/product-1.png" alt="" width="360" />
                            </a>
                        </div>

                        <!--product text-->

                        <div class="text">
                            <h2 class="title h4"><a href="product.html">...</a></h2>

                            <!--old price-->

                            <sub>$ 1499,-</sub>

                            <!--new price-->

                            <sup>$ 1099,-</sup>

                            <span class="description clearfix">Description ....</span>
                        </div>
                    </div>
                </article>
            </div>

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

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

Product Quick view markup

            <!-- ========================  Product info popup - quick view ======================== -->
<div class="popup-main mfp-hide" id="productid1">
    <!-- === product popup === -->
    <div class="product">
        <!-- === popup-title === -->
        <div class="popup-title">
            <div class="h1 title">
                Laura
                <small>product category</small>
            </div>
        </div>
        <!-- === product gallery === -->
        <div class="owl-product-gallery">
            <img src="assets/images/product-1.png" alt="" width="640" />
            <img src="assets/images/product-2.png" alt="" width="640" />
            <img src="assets/images/product-3.png" alt="" width="640" />
            <img src="assets/images/product-4.png" alt="" width="640" />
        </div>
        <!-- === product-popup-info === -->
        <div class="popup-content">
            <div class="product-info-wrapper">
                <div class="row">
                    <!-- === left-column === -->
                    <div class="col-sm-6">
                        <div class="info-box">
                            <strong>Maifacturer</strong>
                            <span>Brand name</span>
                        </div>
                        <div class="info-box">
                            <strong>Materials</strong>
                            <span>Wood, Leather, Acrylic</span>
                        </div>
                        <div class="info-box">
                            <strong>Availability</strong>
                            <span><i class="fa fa-check-square-o"></i> in stock</span>
                        </div>
                    </div>
                    <!-- === right-column === -->
                    <div class="col-sm-6">
                        <div class="info-box">
                            <strong>Available Colors</strong>
                            <div class="product-colors clearfix">
                                <span class="color-btn color-btn-red"></span>
                                <span class="color-btn color-btn-blue checked"></span>
                                <span class="color-btn color-btn-green"></span>
                                <span class="color-btn color-btn-gray"></span>
                                <span class="color-btn color-btn-biege"></span>
                            </div>
                        </div>
                        <div class="info-box">
                            <strong>Choose size</strong>
                            <div class="product-colors clearfix">
                                <span class="color-btn color-btn-biege">S</span>
                                <span class="color-btn color-btn-biege checked">M</span>
                                <span class="color-btn color-btn-biege">XL</span>
                                <span class="color-btn color-btn-biege">XXL</span>
                            </div>
                        </div>
                    </div>
                </div> <!--/row-->
            </div> <!--/product-info-wrapper-->
        </div> <!--/popup-content-->
        <!-- === product-popup-footer === -->
        <div class="popup-table">
            <div class="popup-cell">
                <div class="price">
                    <span class="h3">$ 1999,00 <small>$ 2999,00</small></span>
                </div>
            </div>
            <div class="popup-cell">
                <div class="popup-buttons">
                    <a href="product.html"><span class="icon icon-eye"></span> <span class="hidden-xs">View more</span></a>
                    <a href="javascript:void(0);"><span class="icon icon-cart"></span> <span class="hidden-xs">Buy</span></a>
                </div>
            </div>
        </div>
    </div> <!--/product-->
</div> <!--popup-main-->

Initalize Popup

            // Main popup
// ----------------------------------------------------------------

$('.mfp-open').magnificPopup({
    type: 'inline',
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: 'auto',
    closeBtnInside: true,
    preloader: false,
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-zoom-in',
    callbacks: {
        open: function () {
            // wait on popup initalization
            // then load owl-carousel
            $('.popup-main .owl-carousel').hide();
            setTimeout(function () {
                $('.popup-main .owl-carousel').slideDown();
            }, 500);
        }
    }
});

Product filters with Isotope

Initalize filters

            
$(function () {
    var price = 0;
    var $products = $("#products");
    var $checkboxes = $("#filters input");
    var $sortPrice = $("#sort-price");
    var filters = [];

    $(".item").addClass("show-me");
    filters.push(".show-me");

    // Sort products
    // --------------------------------------

    $products.isotope({
        itemSelector: '.item',
        getSortData: {
            number: '.price parseInt'
        },
        sortBy: 'number'
    });

    // Checkboxes & radiobuttons
    // --------------------------------------

    $sortPrice.on('change', function () {
        var order = $('option:selected', this).attr('data-option-value');
        var valAscending = (order == "asc");

        $products.isotope({
            itemSelector: '.item',
            getSortData: {
                number: '.price parseInt'
            },
            sortBy: 'number',
            sortAscending: valAscending,
            filter: filters
        });

    });

    // Checkboxes & radiobuttons
    // --------------------------------------

    $checkboxes.on('change', function () {
        filters = [];
        filters.push(".show-me");
        $checkboxes.filter(':checked').each(function () {
            filters.push(this.value);
        });

        filters = filters.join('');
        $products.isotope({
            filter: filters
        });

    });

    // Range slider
    // --------------------------------------

    $("#range-price-slider").ionRangeSlider({
        type: "double",
        min: 0,
        max: 4000,
        from: 150,
        to: 3800,
        prefix: "$",
        onChange: function (data) {

            $(".item").each(function () {

                price = parseInt($(this).find(".price").text(), 10);

                if (data.from <= price && data.to >= price) {
                    $(this).addClass('show-me');
                }
                else {
                    $(this).removeClass('show-me');
                }
            });

            $products.isotope({
                itemSelector: '.item',
                filter: filters
            });
        }
    });

});

Isotope

Product filters are now working with Ispotope plugin. For more documentation about Istotope filtering visit this page.

Contact form

On line 29 set receipt email in sendmail.php file

                <?php
// Receiving variables
@$pfw_ip= $_SERVER['REMOTE_ADDR'];
@$Name = addslashes($_POST['Name']);
@$Email = addslashes($_POST['Email']);
@$Subject = addslashes($_POST['Subject']);
@$Comment = addslashes($_POST['Comment']);

// Name validation
if (strlen($Name) == 0 ){
header("Location: contact-failed.html");
exit;
}
// Email validation
if (strlen($Email) == 0 ){
header("Location: contact-failed.html");
exit;
}
// Comment validation
if (strlen($Comment) == 0 ){
header("Location: contact-failed.html");
exit;
}

// Sending Email to form owner
$form_header = "From: $Name\n $Email\n"
 . "Reply-To: $Email\n";

// This is subject
$form_subject = "$Subject\n";

// Add receipt email
$form_emailto = "EMAIL@DOMAIN.COM"; //  < ====== add your email

 // Email content
$form_message = "Visitor's IP: $pfw_ip\n"
. "\n"
. "Name:\n"
. "$Name\n"
. "\n"
. "Email:\n"
. "$Email\n"
. "\n"
. "Comment:\n"
. "$Comment\n";

// Generate email
@mail($form_emailto, $form_subject ,$form_message ,$form_header ) ;

// Redirect to success page
header("Location: contact-success.html");
// end
?>

Setup success & failed messages

Use contact-success.html & contact-failed.html to edit alerts.

Note: Mail cannot be sent from your local machine. Upload all files on your hosting account.

Credits

Images

jQuery

CSS