Contents
1. Welcome
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme.
2. HTML Structure
This Theme has a Responsive layout with a variation of column layouts depending on the page. The general template structure is the same throughout the template. Here is the general structure.
<div class="main">
<!-- TOP BAR
============================================= -->
<div class="b-top-bar">
<div class="layout">
Content...
</div>
</div>
<!-- END TOP BAR
============================================= -->
<!-- HEADER
============================================= -->
<div class="header">
<div class="layout clearfix">
Content...
</div>
</div>
<!-- END HEADER
============================================= -->
<!-- REVOLUTION SLIDER
============================================= -->
<div class="fullwidthbanner-container top-shadow">
<div class="fullwidthbanner">
Content...
</div>
</div>
<!-- END REVOLUTION SLIDER
============================================= -->
<!-- FEATURED CONTENT
============================================= -->
<div class="content-featured">
<div class="layout">
Content...
</div>
</div>
<!-- END FEATURED CONTENT
============================================= -->
<!-- CONTENT
============================================= -->
<div class="content">
<div class="layout">
Content...
</div>
</div>
<!-- END CONTENT
============================================= -->
<!-- FOOTER
============================================= -->
<div class="footer">
<!-- Widget Area -->
<div class="b-widgets">
<div class="layout">
Content...
</div>
</div>
<!-- End Widget Area -->
<!-- Copyright Area -->
<div class="b-copyright">
<div class="layout">
Content...
</div>
</div>
</div>
<!-- END FOOTER
============================================= -->
</div>
<!-- END MAIN
============================================= -->
2.1 Grid
<div class="row">
Columns...
</div>
<div class="row">
<!-- 1/2 column -->
<div class="row-item col-1_2">
Content...
</div>
<!-- 1/3 column -->
<div class="row-item col-1_3">
Content...
</div>
<!-- 1/4 column -->
<div class="row-item col-1_4">
Content...
</div>
<!-- 2/3 column -->
<div class="row-item col-2_3">
Content...
</div>
<!-- 3/4 column -->
<div class="row-item col-3_4">
Content...
</div>
</div>
2.2 Boxed mode
To change the layout mode to add the class "boxed" to the element with the class "main"
<div class="main boxed"></div>
3. CSS Structure
I'm using two main CSS files (main.css and shortcodes.css) in this theme which you are free to modify depending on the customization you require.
Main.css
If you would like to edit a specific section of the site, simply find the appropriate label in the file Main.css, and then scroll down until you find the appropriate style that needs to be edited.
@import 'shortcodes.css'
/* --------------------------------- Base ^ */
/* ------------------------------- Header ^ */
/* ------------------------------- Slider ^ */
/* ------------------------------ Content ^ */
/* ------------------------------- Footer ^ */
/* ---------------------------- Portfolio ^ */
/* --------------------------------- Blog ^ */
Shortcodes.css
If you would like to edit a shortcode element of the site, simply find the appropriate label in the file Shortcodes.css, and then scroll down until you find the appropriate style that needs to be edited.
/* ------------------------- Testimonials ^ */
/* -------------------------------- Icons ^ */
/* -------------------------- Color icons ^ */
/* ----------------------------- Icon box ^ */
/* --------------------------------- Tabs ^ */
/* -------------------------------- Lists ^ */
/* --------------------------------- News ^ */
/* ----------------------------- Messages ^ */
/* -------------------------------- Promo ^ */
/* -------------------------------- Table ^ */
/* ------------------------------ Buttons ^ */
/* -------------------------------- Intro ^ */
/* ------------------------ Social button ^ */
/* ------------------------------- Toggle ^ */
/* ---------------------------- Accordion ^ */
/* ------------------------ Progress Bars ^ */
/* ----------------------------- Tooltips ^ */
/* -------------------------- Element Box ^ */
/* -------------------------------- Forms ^ */
/* ----------------------------- Services ^ */
/* ------------------------------ Top Bar ^ */
/* ----------------------------- Side Nav ^ */
/* ------------------------------ Clients ^ */
/* --------------------------------- Team ^ */
/* -------------------------------- Quote ^ */
/* ---------------------------- Button Up ^ */
/* ------------------------------ Gallery ^ */
/* ----------------------------- Dropcaps ^ */
4. Style Settings
4.1 Color Scheme
You can add or modify colors and include new color file like.
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/color-scheme/turquoise.css"> <!-- color scheme -->
4.2 Main Background
To change the background pattern, you need to add a class to the Body.
<body class="bg-climpek"></body>
bg-wood_pattern
bg-shattered
bg-vichy
bg-random-grey-variations
bg-irongrip
bg-gplaypattern
bg-diamond_upholstery
bg-denim
bg-crissXcross
bg-climpek
5. Elements Settings
5.1 Revolution Slider
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<ul>
<!-- Slide -->
<li data-masterspeed="300" data-slotamount="1" data-transition="fade">
<!-- Main Image -->
<img alt="" src="img/slider/Slider-1.jpg">
<!-- Captions -->
<div class="tp-caption m-text-black sft" data-easing="easeOutExpo" data-speed="700" data-start="1400" data-x="40" data-y="130">
<span>Tempora Incidunt</span>
</div>
</li>
... other slides ...
</ul>
</div>
</div>
For detailed documentation, see the Revolution Slider Documentation.
5.2 Portfolio Filtering
Filters
<ul class="b-filter-list">
<li data-filter="*" class="active">All</li>
<li data-filter=".webdesign">Web Design</li>
<li data-filter=".photography">Photography</li>
<li data-filter=".identity">Identity</li>
<li data-filter=".tehnology">Tehnology</li>
</ul>
<!-- Filter for Mobile View. -->
<div class="b-filter-select">
<div class="filter-current">
All
</div>
<ul>
<li data-filter="*" class="active">All</li>
<li data-filter=".webdesign">Web Design</li>
<li data-filter=".photography">Photography</li>
<li data-filter=".identity">Identity</li>
<li data-filter=".tehnology">Tehnology</li>
</ul>
</div>
Thumbnails
<div class="row-item col-1_2 identity photography tehnology">
<div class="work">
<a href="#" class="work-image">
<img src="img/port/smiling.jpg">
<div class="link-overlay icon-chevron-right"></div>
</a>
<a href="#" class="work-name">Smiling</a>
<div class="tags">Photography, Tehnology</div>
</div>
</div>
5.3 Contact Form
To change email adress, open "contact.php", find and edit code below:
// Configuration option.
// Enter the $email $address that you want to emails to be sent to.
// Example $address = "joe.doe@yourdomain.com";
$address = "mail@example.com";
6. Javascript Settings
Main.js
Here you can modify any settings for ( Navigation Menu, Forms, Tabs, Accordion and more..)
// MENU
// FORMS: SEARCH, COMMENT
// CONTACT FORM
// TABS
// MESSAGES
// SPOILER
// PROGRESS BAR
// TEAM
// PORTFOLIO
// CAROUSEL
// CREATE CONTROLS
// CHANGE ITEM
// AUTO CHANGE
// BUTTON UP
Google Map
Here you can modify settings for Navigation Menu, Forms, Tabs, Accordion and more.
<div class="b-google-map">
<div id="map_canvas" style="width: 100%; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/jquery.gmap.min.js"></script>
<script>
jQuery('#map_canvas').gMap({
maptype: 'ROADMAP',
scrollwheel: false,
zoom: 16,
markers: [
{
address: 'Moscow', // Your Adress Here
html: '',
popup: false,
}
],
});
</script>
</div>
Revolution-slider-options.js
Here you can modify settings for Revolution Slider.
$('.fullwidthbanner').each(function() {
$(this).revolution({
delay:10000,
startwidth:1090,
startheight:440,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:0,
navigationType:"bullet", // bullet, thumb, none
navigationArrows:"solo", // nexttobullets, solo (old name verticalcenteturquoise), none
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"bottom", // Horizontal Align left,center,right
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"on", // Enable Swipe Function : on/off
stopAtSlide:-1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:-1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 // 0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
For detailed documentation, see the Revolution Slider Documentation.
8. Credits
Preview Images:
All images used in the preview are just for demonstration purposes and not included in the Theme.
Fonts:
Scripts:
- jQuery library
- Slider Revolution
- AJAX Contact Form
- Pretty Photo
- Isotope Filtering
- Google Map
- jQuery Tweets