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