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">

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>

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 file
directory 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”
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form from our Profile Page on ThemeForest. Thank you so much!

ThemeREX