HTML Structure
Setting the panel
Scripts and styles responsible for the output and settings of the the panel:
directory site.../custom_tools/css/custom_tools.css
directory site.../custom_tools/js/jquery.cookie.js
directory site.../custom_tools/js/custom_tools.js
directory site.../custom_tools/js/customizer.js
Adding the panel:
directory site.../custom_tools/js/custom_tools_init.js
jQuery(document).ready(function(){
//include Custom.JS
jQuery('head').append('<link rel="stylesheet" type="text/css" media="all"
href="custom_tools/css/custom_tools.css">');
jQuery('body').append('<script type="text/javascript"
src="custom_tools/js/custom_tools.js"></script>');
jQuery('body').append('<script type="text/javascript"
src="custom_tools/js/customizer.js"></script>');
jQuery('body').append('<script type="text/javascript"
src="custom_tools/js/jquery.cookie.js"></script>');
});
Background and color
You can change the background by adding class into the tag <body>
<body class="bg_pattern_0">
<body class="bg_pattern_1">
<body class="bg_pattern_2">
<body class="bg_pattern_3">
<body class="bg_pattern_4">
<body class="bg_pattern_5">
<body class="bg_pattern_6">
<body class="bg_pattern_7">
<body class="bg_pattern_8">
<body class="bg_pattern_9">
To edit basic Kinder color scheme you need to add style table before closing tag </head>, as well as in "kinder.css" you need to replace the initial color #069eed with the color you need.
<link rel="stylesheet" href="css/kinder.css" type="text/css" media="all" />
Image background
You can change the background by adding class into the tag <body>
<body class="bg_image_1">
<body class="bg_image_2">
<body class="bg_image_3">
<body class="bg_image_4">
<body class="bg_image_5">
<body class="bg_image_6">
Sidebar widget example
<aside class="widgetWrap hrShadow widget widget_categories">
<h3 class="title">Categories</h3>
<ul>
<li class="cat-item">
<a href="categories_slider.html">Categories slider</a>
</li>
<li class="cat-item">
<a href="gallery_demo.html">Gallery demo</a>
</li>
</ul>
</aside>
Single post example
<article class="hrShadow post margin_bottom_small">
<h2 class="post_title text-center">
<a href="blog_post_review_with_sidebar.html">Unique Blog Style!</a>
</h2>
<div class="sc_section sc_aligncenter col-sm-8 post_thumb thumb margin_bottom_small">
<a href="blog_post_review_with_sidebar.html">
<img alt="Unique Blog Style!" src="img/9435123826_a4c3b35c08_o-714x402.jpg">
</a>
</div>
<div class="postStandard">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat </p>
</div>
<div class="postSharing">
<ul>
<li class="squareButton light ico">
<a class="fa-link" title="More"
href="blog_post_review_with_sidebar.html">More</a>
</li>
<li class="squareButton light ico">
<a class="fa-eye" title="Views - 805"
href="blog_post_review_with_sidebar.html">805</a>
</li>
<li class="squareButton light ico">
<a class="fa-comment" title="Comments - 4"
href="blog_post_review_with_sidebar.html#comments">4</a>
</li>
<li class="squareButton light ico">
<a class="fa-star" title="Rating - 61.8"
href="blog_post_review_with_sidebar.html">61.8</a>
</li>
<li class="squareButton light ico likeButton like" data-postid="34"
data-likes="26" data-title-like="Like" data-title-dislike="Dislike">
<a class="fa-heart" title="Like - 26" href="#">
<span class="likePost">26</span>
</a>
</li>
</ul>
</div>
<div class="post_info infoPost">
Posted
<a href="blog_post_review_with_sidebar.html"
class="post_date">February 25, 2014</a>
<span class="separator">|</span>
by <a href="#" class="post_author">John Doe</a>
<span class="separator">|</span>
<span class="post_cats">
in
<a class="cat_link" href="features_post_formats.html">Post Formats</a>
</span>
</div>
</article>
Typography
Alignement (positioning) can be changed by adding one of the classes "sc_alignleft", "sc_alignright", "sc_aligncenter", "sc_alignnone".
<div class="sc_section sc_alignright">
<figure class="sc_image sc_image_shape_square">
<img src="img/clock_light.png" alt="">
<figcaption>
<span>This image aligned right</span>
</figcaption>
</figure>
</div>
Highlight
For light effect we should use classes "sc_highlight_style_1", "sc_highlight_style_2".
Eum, explicabo sapiente debitis consequuntur veniam dolorem fuga ipsa corrupti quod adipisci voluptatum aliquid <span class="sc_highlight sc_highlight_style_1"> dolores voluptatibus id magni impedit quis et</span> odit provident molestiae deleniti nisi repellat pariatur tenetur ad. Quaerat, animi, officia tenetur tempore accusantium architecto at voluptatibus repudiandae iusto rem possimus doloremque officiis quos eum inventore odio velit? Dolor, sequi, cumque, eum, dolorum fugiat minima ex consequuntur <span class="sc_highlight sc_highlight_style_2">dolore molestiae voluptatum</span> aperiam id vel qui a omnis debitis dolorem corporis?
Portfolio example
<article class="isotopeElement hover_Cube isotopeElementShow">
<div class="hover hoverCubeShow">
<div class="thumb">
<img alt="Maecenas tristique sem ante"
src="img/portfolio/masonry6-383x245.jpg">
</div>
<div class="folioShowBlock">
<div class="folioContentAfter">
<h4>
<a href="#">Maecenas tristique sem ante</a>
</h4>
<p>Maecenas tristique sem ante. Donec imperdiet pretium sodales.
Sed in eros fermentum, facilisis magna eu, tempus mauris. Curabitur
mollis lacus ac... </p>
<div class="masonryInfo">
Posted
<a href="#" class="post_date">March 16, 2014</a>
<span class="separator">|</span>
<span class="post_cats">
<a class="cat_link" href="#">1 columns,</a>
<a class="cat_link" href="#">2 columns,</a>
<a class="cat_link" href="#">3 columns,</a>
<a class="cat_link" href="#">4 columns,</a>
<a class="cat_link" href="#">Portfolio Grid</a>
</span>
</div>
</div>
</div>
</div>
</article>
Portfolio category
Filtration in portfolio block is performed in case if the filter is assigned a class of portfolio element's block you need. data-filter=".flt_65" will be filtering all the portolio elements that contains class "flt_65".
<div class="isotopeFiltr">
<ul>
<li class="squareButton active">
<a href="#" data-filter="*">All</a>
</li>
<li class="squareButton">
<a href="#" data-filter=".flt_65">clear</a>
</li>
<li class="squareButton">
<a href="#" data-filter=".flt_36">Design</a>
</li>
<li class="squareButton">
<a href="#" data-filter=".flt_66">exclusive</a>
</li>
</ul>
</div>
Skills
To change color of the pie chart you need to change "data-color" in html.
... data-color="#069eed" ...
Contact form
An e-mail of a message receiver from the contact form can be specified in the filedirectory site...include/sendmail.php, line 9:
$contact_email = 'your_mail@mail.com';
Google Map
Address for the map should be specified in site...js/map.js, line 11:
"address=san francisco, CA 94102, US"
PSD Files
You will find PSD folder in our archive. PSD fiels will help change design or you may use them at your discretion.
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:
- Open Sans (non standard)
- Fontello (non standard, icons set)
All non-standard fonts are from Google Web Fonts and Fontello icons set
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.
Additional information from ThemeREX:
“Theme Rex” support team is happy to greet you here! Our operators and developers are always glad to help our customers. Should you have any questions, you may contact us for support:
10.00 – 19.00 (CET), Monday till Friday.
What is important to know about ThemeREX Support Policy
- To get a pre-purchase advice, you may post in the theme’s forum
- To get a response more promptly, you are recommended to use our Ticket-system (just click on banner “Support Sys” on the item page) Important! For correct work of Ticket-system, you mustn’t switch cookies in your browser off
- We try to answer your questions within 5-10 hours. However, if any delay occurs it doesn’t mean that we forgot about you. Some of the issues require testing and analyzing, so we could help you more profoundly
We love to intercommunicate with our customers from all over the world. We always love to explain how our themes work. However, sometimes we have to say No:
- Please, note! We do not support queries if you do not have a purchase code
- Item support does not include:
- Customization and installation services
- Support for third party software and plug-ins
How to find a purchase key (see the screenshot):
- open the ‘downloads’ tab in your account on ThemeForest
- find our theme in the list of products
- click ‘download’ button, and in the drop down meny select “license sertificate & purchase code”
Social icons
href="#" - a link to your social page <a href="http://facebook.com/themerex">
<div class="socPage"> <ul> <li> <a class="social_icons social_facebook" target="_blank" href="http://facebook.com"> <span></span> </a> </li> <li> <a class="social_icons social_twitter" target="_blank" href="http://twitter.com"> <span></span> </a> </li> </ul> </div>Social Share icons
To link up the sharing social buttons, you must change <... onclick="window.open('#'); ...> to
<... onclick="window.open('https://twitter.com/share?text=TEXT-EXAMPLE'); ...>
<a class="fa-share-alt shareDrop" title="Share" href="#">Share</a> <ul class="share-social shareDrop" style=""> <li> <a href="#" class="share-item" onclick="window.open('#');"> <img src="img/social/twitter_color.png" alt="twitter">Twitter </a> </li> <li> <a href="#" class="share-item" onclick="window.open('#');"> <img src="img/social/facebook_color.png" alt="facebook">Facebook </a> </li> <li> <a href="#" class="share-item" onclick="window.open('#');"> <img src="img/social/pinterest_color.png" alt="pinterest">Pinterest </a> </li> </ul>