HTML Structure
Customization block
Scriptis and styles responsible for customization panel
directory site.../js/custom.js
directory site.../js/jquery.cookie.js
directory site.../style/custom.css
Switching customization block off
directory site.../js/lib.js - line 840
//include Custom.JS
jQuery('head').append('<link rel="stylesheet" href="style/custom.css" type="text/css" media="all">');
jQuery('head').append('<script type="text/javascript" src="js/custom.js"></script>');
jQuery('head').append('<script type="text/javascript" src="js/jquery.cookie.js"></script>');
Main menu
Main menu color schemes
Light color scheme is set as a default one. To change the light color scheme into the dark one, you need to add a class to the menu block.
Black menu - class = navigation-style-2
<div class="headStyleMenu navigation-style-2">
<section class="section-nav">
<nav class="navigation-main" role="navigation">
<ul class="clearboth mainHeaderMenu ">
...
<ul>
<nav>
<section>
<div>
Left & Right sidebar
Left sidebar
<div id="main" class="left_sidebar">
<div class="inner">
<div class="general_content clearboth">
<div class="main_content">
...
<div>
<div>
<div>
<div>
<div id="secondary" class="main_sidebar left_sidebar" role="complementary">
...
<div>
Right sidebar
<div id="main" class="right_sidebar">
<div class="inner">
<div class="general_content clearboth">
<div class="main_content">
...
<div>
<div>
<div>
<div>
<div id="secondary" class="main_sidebar right_sidebar" role="complementary">
...
<div>
Six variants of background
Background change should be done by adding the class you need into the tag <body>
<body class="boxed pattern-1">
<body class="boxed pattern-2">
<body class="boxed pattern-3">
<body class="boxed pattern-4">
<body class="boxed pattern-5">
<body class="boxed pattern-6">
Widget example
<aside class="widget">
<div class="widget_header">
<div class="widget_subtitle"><a href="#" class="lnk_all_posts">All</a></div>
<h3 class="widget_title">Widget title</h3>
</div>
<div class="widget_body">
...
</div>
</aside>
Post example
<article>
<div class="pic"><a class="w_hover img-link img-wrap" href="post-standart.html"><img alt="" src="images_post/images.jpg"><span class="link-icon"></span></a></div>
<h3><a href="post-standart.html">Perfect For Your Business</a></h3>
<div class="post-info"><a class="post_submitted" href="page-author.html">Posted by admin</a><a class="post_date" href="post.html">May 30, 2013</a> <a class="comments_count" href="post.html">0</a></div>
<div class="text">Post text...</div>
<a class="more-link" href="post.html">Read More<span></span></a>
</article>
Shortcodes
Sample Tabs style 1 & Sample Tabs style 2
Tabs style - class = sc_tabs_style_1
Tabs style - class = sc_tabs_style_2
<div class="sc_tabs sc_tabs_style_1 shortTabs">
<ul>
<li><a href="#tabs1">First Tab</a></li>
<li><a href="#tabs2">Second Tab</a></li>
<li><a href="#tabs3">Third Tab</a></li>
<li><a href="#tabs4">Four Tab</a></li>
</ul>
<div class="content" id="tabs1">tab text 1</div>
<div class="content" id="tabs2">tab text 2</div>
<div class="content" id="tabs3">tab text 3</div>
<div class="content" id="tabs4">tab text 1</div>
</div>
Accordion Style 1 & Accordion Style 2
Accordion style - class = sc_accordion_style_1
Accordion style - class = sc_accordion_style_2
<div class="sc_accordion_style_1 accordion">
<h3><span class="button"></span>Accordion title 1</h3>
<div class="content">Accordion text</div>
<h3><span class="button"></span>Accordion title 2</h3>
<div class="content">Accordion text</div>
<h3><span class="button"></span>Accordion title 3</h3>
<div class="content">Accordion text</div>
<h3><span class="button"></span>Accordion title 4</h3>
<div class="content">Accordion text</div>
</div>
Review rating
<div class="rating"><span class="points5 stars"></span></div>
<div class="rating"><span class="points4 stars"></span></div>
<div class="rating"><span class="points3 stars"></span></div>
<div class="rating"><span class="points2 stars"></span></div>
<div class="rating"><span class="points1 stars"></span></div>
Social icons
href="#" - a link to your social page
<a class="fb" href="http://facebook.com/themerex" title="Facebook">Facebook</a>
<ul>
<li><a class="tw" href="#" title="Twitter">Twitter</a></li>
<li><a class="fb" href="#" title="Facebook">Facebook</a></li>
<li><a class="rss" href="#" title="RSS">RSS</a></li>
<li><a class="gplus" href="#" title="Google+">Google+</a></li>
<li><a class="vim" href="#" title="Vimeo">Vimeo</a></li>
<li><a class="tmb" href="#" title="Tumblr">Tumblr</a></li>
<li><a class="pin" href="#" title="Pinterest">Pinterest</a></li>
</ul>
Contacts
An e-mail of a message receiver from the contact form you can specify in the filedirectory site...include/sendmail.php ('assets' folder), line 9:
$contact_email = 'your_mail@mail.com';
Google Map
directory site...js/lib.js - line 396
//google maps
if (jQuery("div").is("#sc_googlemap")) {
googlemap_init(jQuery("#sc_googlemap").get(0), "25 Broadway, NY");
};
PSD Files
You’ll find also PSD folder in our template archive.
Note, that this is our working material and there can be some mismatch with design presented in html / php version. But basically you’ll find lots of styles and graphics to change Increase design or use them on your own.Sources and Credits
This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification.
- Fonts:
- Arial (standard)
- Tahoma (standard)
- Helvetica (standard)
- Times New Roman (standard)
- Courier 10 Pitch (non standard)
- Open Sans(non standard)
- Trebuchet MS(non standard)
All non standard fonts are from Google Web Fonts
We have used the pictures from:
http://www.bigstockphoto.com/
All images are copyrighted to their respective owners and not available for download with this theme.