Tips

Some very useful Tips how to work better with the Theme, please read!

Do not start from scratch, use an existing page from the demo files and modify it to learn how the Theme works
Explore the live demo for page ideas and sample code
Use Firebug or Chrome Developer Tools to detect Classes and Javascript Conflicts

File Structure of the Theme

Within the download you'll find the following directories and files.

							
HOME_STYLE
│
├─  SCSS
│  │
│  └──  variables
│
├─  CSS
│  │
│  ├──  assets
│  │   │ 
│  │   └──  img
│  │       │ 
│  │       ├──  blue
│  │       │ 
│  │       ├──  orange-cyan
│  │       │ 
│  │       └──  orange-cyan-2
│  │
│  ├──  bbpress
│  │
│  ├──  colorbox
│  │
│  ├──  compare
│  │
│  └──  fonts
│  │ 
│  └──  images
│  │   │ 
│  │   └──  colorbox
│  │   │ 
│  │   └──  icons
│  │
│  ├──  js_composer
│  │
│  ├──  owl-carousel
│  │
│  ├──  sw_core
│  │   │ 
│  │   └──  fancy
│  │
│  ├──  sw_woocommerce
│  │
│  ├──  theme
│  │
│  ├──  woocommerce
│  │
│  └─  other-files.css
│
├─  ajax
│  │
│  └─  fancybox
│
├─  icons
│
├─  images
│
├─  js
│  │
│  ├─  bootstrap
│  │
│  └─  colorbox
│  │
│  ├─  jquery-blockui
│  │
│  ├─  owl-carousel
│  │
│  ├─  prettyPhoto
│  │
│  ├─  select2
│  │
│  ├─  sw_core
│  │
│  └─  sw_woocommerce
│  │
│  └─  woocommerce
│  │
│  └─  other-files.js
│
└─  other-files.html

HTML Structure

The template is based on Bootstrap 3 Framework - http://getbootstrap.com 

<div class="row">
  <div class="col-md-12">
    Level 1 column
    <div class="row">
      <div class="col-md-6">Level 2</div>
      <div class="col-md-6">Level 2</div>
    </div>
  </div>
</div>
Please note: You can use all Classes and Scripts from Bootstrap 3, they will all work! Not only the grid!

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. If you need more information about the Main Grid, please visit this site: http://getbootstrap.com/css/#grid

CSS Structure

The organization of the CSS is one of our priorities. These are the CSS file we're using in the template.

Content of the Folder css

Please note: all of these files below are required and always needed.

							
 bootstrap
   This is the Main CSS File from Bootstrap3

 font-awesome
   This is the css file that will take care of the SHOPPY STORE icons buil with Fontawesome.

 js_composer
   Here you'll find the CSS Files for js_composer css
   
 app-blue.css
   This is the Main CSS File for the SHOPPY STORE Theme with all necessary Styles and Overrides. For Colors of the Theme use "theme-orange.css" or "theme-orange-cyan.css".

 app-responsive.css
   This is the css file form Responsive
Use Firebug or Chrome Developer Tools to detect the CSS Classes

SCSS Structure

These are the SCSS file we're using in the template.

Content of the Folder SCSS

Please note: all of these files below are required and always needed.


 variables
   Here you'll find the Variables files for Home_Style pages.
   
 _color.css
   This is the Color Variables File. 

 theme.css
   This is the Main SCSS File for Home_Style pages.
Use Firebug or Chrome Developer Tools to detect the CSS Classes

Javascript Structure

jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit jQuery.com.

The initialization of the elements, libs and features is made by the file main.js, in the JS folder.

Content of the Folder js

Please note: one of these files below (bootstrap or bootstrap.min.js) are required and always needed.

							
 Bootstrap
   This is the Main jQuery File from Bootstrap3

 Countdown
   Here you'll find the jQuery Files for the Countdown plugin

 owl-carousel
   Here you'll find the jQuery Files for the Owl Carousel plugin

 Slick
   Here you'll find the jQuery Files for the Slick plugin

 Fancybox
   Here you'll find the jQuery Files for the Fancybox plugin

 Jquery-ui
   Here you'll find the jQuery Files for the jquery-ui plugin

 ColorBox
   Here you'll find the jQuery Files for the ColorBox plugin

Content of the Folder themejs

Please note: most of these files below are optional and not needed if you decide to drop one of these Features.

							
 main.js
   VERY IMPORTANT: all jQuery Plugins are initialised within this File!

 pathLoader.js
   jQuery File for the PathLoader
   
 megamenu.js
   jQuery File for the Megamenu
Use Firebug or Chrome Developer Tools to detect jQuery Errors

Customization and Styles

General

This Theme has various Style options for different Kinds of Layouts.

Market comes with 5 predefined color schemes. Default color scheme already included in theme.css. If you want to change scheme, then you should include one of CSS files from home_style/css/theme/ into your markup: 

<!-- styles Default = Blue -->
<link rel="stylesheet" href="home_style/css/theme/app-blue.css">

<!-- make sure that color scheme file new alternative main styles file -->
<link rel="stylesheet" href="home_style/css/theme/app-orange-cyan.css">

Also you can create your own scheme. To do that you need to create a copy one of the color scheme files ( html/scss/variables/) and edit it by replacing color to another one.

Fonts

To use another Font, please choose your new Font at the Google Font Site, include the given Style Tag inside the Head Section of the Theme.

In the default Theme we have used this Code for example:

<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

Styles

We have 5 styles. See demo for example: home_style\home_style_2.html

Pages

We have added a lot of Sample Pages. Please see the different HTML Pages.

Source and Credits

We have used the following Recources and Scripts:

General

Scripts and CSS