Start



Thank you very much for purchasing our site template. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form.

Back To Top

HTML Structure

Header

Basic Section

Section With Image Background Parallax Effect

Section With Video Background

Footer

Back To Top

CSS Files and Structure

This theme uses style.css file as main CSS file and other additional css files located at css folder.

style.css

Main CSS files in this theme is style.css that contains all of specific stylings for the theme.The file is separated into sections using labels as follows:

/*==========================================================
1. IMPORT FILES
==========================================================*/

{SOME CODES}

/*==========================================================
2. MAIN
==========================================================*/

{SOME CODES}

/*==========================================================
3. HEADER
==========================================================*/

{SOME CODES}

/*==========================================================
4. FOOTER
==========================================================*/

{SOME CODES}

/*==========================================================
6. SLIDESHOW STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
7. SHOP STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
8. PORTFOLIO STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
9. BLOG / PAGE STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
10. SERVICES STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
11. BUTTONS STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
12. ELEMENTS
==========================================================*/

{SOME CODES}

/*==========================================================
13. PAGE STYLE
==========================================================*/

{SOME CODES}

/*==========================================================
14. GALLERY STYLE
==========================================================*/

{SOME CODES}

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

responsive.css

responsive.css contains styling for media queries that allows us to tailor to different resolutions and devices without changing the content. The file is separated into sections as follows:

@media only screen and (min-width: 1024px) and (max-width: 1399px) {
{SOME CODES}
}

@media only screen and (min-width: 980px) and (max-width: 1023px) {
{SOME CODES}
}

@media only screen and (max-width: 980px) {
{SOME CODES}
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
{SOME CODES}
}

@media only screen and (max-width: 767px) {
{SOME CODES}
}

@media only screen and (max-width: 639px) {
{SOME CODES}
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
{SOME CODES}
}

@media only screen and (min-width: 568px) and (max-width: 639px) {
{SOME CODES}
}

@media only screen and (min-width: 480px) and (max-width: 567px) {
{SOME CODES}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
{SOME CODES}
}

@media only screen and (min-width: 240px) and (max-width: 319px) {
{SOME CODES}
}

If you would like to edit styling of the specific device width, simply find the appropriate label in the responsive.css file, and then scroll down until you find the appropriate style that needs to be edited.

Additional css files at css folder

bootstrap.min.css – Twitter Boostrap CSS framework
reset.css – Reset CSS
custom.css – Custom CSS
fancySelect.css – Fancy select style
font-awesome.css – Font Awesome
jquery-ui.css – jQuery UI
main-menu.css – Main menu
mediaelementplayer.css – Html5 player style
owl.carousel.css – Owl Graphic style
prettyPhoto.css – PrettyPhoto Plugin
responsive.css – Resopnsive CSS
rev-settings.css – Slider Revolution setting
star-rating.css – Star rating CSS

Back To Top

JavaScript

This theme imports following Javascript files.

jquery-1.10.2.min.js – Javascript library
jquery-ui.js – jQuery Ui library
jquery.dlmenu.js – Mobile menu
retina.js – Retina display jQuery plugin
owl.carousel.js – Carousel & Gallery
star-rating.js – Rating jQuery plugin
jquery.circliful.min.js – Circle Chart
scrollReveal.js – scrollReveal
mediaelement-and-player.min.js – Html5 player
TimeCircles.js – Countdown
jquery-counterup.js – Counter Up
jquery.fitvids.js – Responsive video
fss.js – Flat Surface Shader effect
jquery.themepunch.revolution.min.js – Slider Revolution
jQuery-scrollnav.js – Onepage navigation scroll
jquery.mb.YTPlayer.js – Youtube background
bootstrap.min.js – Twitter boostrap framework
fancySelect.js – jQuery plugin for custome select box
waypoints.min.js – jQuery plugin for sticky
isotope.pkgd.min.js – An exquisite jQuery plugin for magical layouts
jquery.prettyPhoto.js – Prettyphoto jQuery plugin
main.js – Contain some custom script
http://maps.google.com/maps/api/js?sensor=false – Google map jQuery plugin
Except Main.js, all of the plugins are packed, so you don’t need to manually edit anything in these files. The only necessary thing to know is how to call the method. You can refer to the website of the plugin author I listed in the “Sources and Credits” section to learn more about them.

Main.js contains custom scripts and scripts to call method for above plugin. The file is separated in to sections with appropriate label.

/* =========================================================
********************Comment Form Validation*****************
==========================================================*/

{SOME CODES}

/* =========================================================
******************Progress bar jQuery plugin****************
==========================================================*/

{SOME CODES}

/* =========================================================
***************************Carousel*************************
============================================================ */

{SOME CODES}

/* =========================================================
****************************Isotope*************************
============================================================ */

{SOME CODES}

/* =========================================================
**************************prettyPhoto***********************
==========================================================*/

{SOME CODES}

/* =========================================================
*********************Blog Post Slider***********************
==========================================================*/

{SOME CODES}

/* =========================================================
***************************ToolTip**************************
============================================================ */

{SOME CODES}

/* =========================================================
***********************Show Google Map**********************
============================================================ */

{SOME CODES}

/* =========================================================
*********************************Twitter********************
============================================================ */

{SOME CODES}

/* =========================================================
********************************ColorBox********************
============================================================ */

{SOME CODES}

/* =========================================================
************************Alert box***************************
========================================================= */

{SOME CODES}

/* =========================================================
*********************** Dropdown List **********************
==========================================================*/

{SOME CODES}

/* =========================================================
****************************Tabs****************************
============================================================ */

{SOME CODES}

/* =========================================================
************************Accordion***************************
==========================================================*/

{SOME CODES}

/* =========================================================
************************Toggle Boxes************************
==========================================================*/

{SOME CODES}

/*===========================================================
**************************Google Map*************************
===========================================================*/

{SOME CODES}

Back To Top

Sources and Credits

I’ve used the following images, icons or other files as listed.

If there is still question, please visit our forum for more support.

Hope you enjoy our product!

Back To Top