HTML Structure

Setting the panel

Scripts and styles responsible for the output and settings of the the panel:
directory site.../custom_tools/css/colorpicker.css
directory site.../custom_tools/js/jquery.cookie.js
directory site.../custom_tools/js/colorpicker.js
directory site.../custom_tools/js/custom-block.js

Adding the panel:
directory site.../js/_front.js - line 2 

jQuery(document).ready(function(){
//include Custom.JS
    jQuery('head').append('<link rel="stylesheet" type="text/css" media="all" href="custom_tools/css
    /colorpicker.css">');
    jQuery('head').append('<script type="text/javascript" src="custom_tools/js/jquery.cookie.js">
    </script>');
    jQuery('head').append('<script type="text/javascript" src="custom_tools/js/colorpicker.js">
    </script>');
    jQuery('head').append('<script type="text/javascript" src="custom_tools/js/custom-block.js">
    </script>');
});

Background and color

You can change the background by adding class into the tag <body> 

<body class="pattern_1">
<body class="pattern_2">
<body class="pattern_3">
<body class="pattern_4">
<body class="pattern_5">

To edit basic Zen color scheme you need to add style table before closing tag </head>, as well as in "custom.css" you need to replace the initial color #dedede with the color you need. 

<link rel="stylesheet" href="css/custom.css" type="text/css" media="all" />

Parallax blocks bacground

You can change block background by adding class into the tag <div class="parallax"> (where "parallax" is originally present) 

<div class="parallax_1">
<div class="parallax_2">
<div class="parallax_3">
<div class="parallax_4">
<div class="parallax_5">
<div class="parallax_6">
<div class="parallax_7">
<div class="parallax_8">
<div class="parallax_9">
<div class="parallax_10">

Social icons

href="#" - a link to your social page <a href="http://facebook.com/themerex"> 

<ul class="soc_list">
    <li>
        <a href="https://www.facebook.com/themerex">
            <img src="images/icon_facebook.png" title="Facebook">
        </a>
    </li>

    ...

</ul>

Social Share icons

To link up the sharing social buttons, you must change the text in the link. <a id="ssba_twitter_share" target="_blank" href="https://twitter.com/share?text=TEXT-EXAMPLE"> 

<div id="ssba">
    <a id="ssba_google_share" href="https://plusone.google.com/_/+1/confirm?url=http://test.com/page1"
    target="_blank">
        <img class="ssba" title="Google+" src="images/soc_icons/icon-gplus.png" alt="Google+">
    </a>

    ...

</div>

Sidebar widget example

<aside class="widget widget_recent_comments">
    <h3 class="widget_title">Recent Comments</h3>
    <ul id="recentcomments" class="no_bull">
        <li>
            <div class="user_avatar">
                <img alt="" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=60">
            </div>
            <div class="extra">
                <a class="url" href="author-page.html" rel="external nofollow">Mark Chapman</a>
                <span class="op">on</span>
                <div class="post_title">
                    <a href="post-standart.html">Bold & useful</a>
                </div>
            </div>
        </li>

        ...

    </ul>
</aside>

Single post example

<article class="post type-post format-standard hentry shown">
    <div class="additional">
        <div class="post_format">
            <span class="icon-doc-text"></span>
        </div>
        <div class="post_comments">
            <span class="icon icon-chat-1"></span>
            <span class="counter">0</span>
        </div>
    </div>
    <div class="extra_wrap">
        <div class="post_thumb">
            <a href="post-standart.html">
                <img alt="Standard post with image." src="images/post_img/blog_4.jpg">
            </a>
        </div>
        <h2 class="post_title">
            <a href="post-standart.html">Standard post with image.</a>
        </h2>
        <div class="post_info">
            <span class="post_date">October 21, 2013</span>
            <span class="label_by">by</span>
            <a class="post_author" href="author-page.html">Miki Williams</a>
                <span class="post_cats">
                    in<a href="categories.html">Uncategorized</a>
                </span>
        </div>
        <div class="post_content">
            <p>We have broadened options of the standard post, having made it’s heading completely
                customisable. You can choose tag cover (h1-h6) for post page heading, set font
                settings or set any content as a heading.
            </p>
            <p>
                <strong>Character Design by</strong>
                <a href="author-page.html">Mario Aguirre </a>
            </p>
            <div class="readmore">
                <a class="more-link" href="post-standart.html">
                    <span class="readmore">Read more</span>
                </a>
            </div>
        </div>
    </div>
</article>

Typography

Image size can be changed by adding one of the classes "thumbnail", "medium", "large"; for alignement (positioning) it would be "alignleft", "alignright", "aligncenter", "alignnone". 

<figure class="sc_image alignright medium">
    <img src="images/post_img/img_2.jpg" alt="img_2">
</figure>

Highlight

For light effect we should use classes "sc_highlight_style_1", "sc_highlight_style_2". 

<p>
    Ut enim ad minim veniam,
    <span class="sc_highlight_style_1"> quis nostrud exercitation ullamco</span>
    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 cupidatat
    non proident, sunt in culpa qui
    <span class="sc_highlight_style_2"> officia deserunt mollit anim</span>
    id est laborum
</p>

Portfolio example

<div class="type-portfolio hentry sites instock isotope-item flip">
    <a href="post-portfolio.html">
        <div class="portfolio_thumb">
            <img alt="Flip hover" src="images/post_img/portfolio/1.jpg">
        </div>
        <div class="post_info overlay">
            <span class="icon icon-plus"></span>
            <h3 class="portfolio_title">Flip hover</h3>
            <div class="post_cats">Sites</div>
        </div>
    </a>
</div>

Each effect is assigned its own class for wrap when hovering (shift, flip, follow). Also, each portflio element is assigned a class with the name and a category name where it's included (sites, identities, photos) 

<div class="type-portfolio hentry sites instock isotope-item shift"> ... </div>
<div class="type-portfolio hentry identities instock isotope-item flip"> ... </div>
<div class="type-portfolio hentry photos instock isotope-item follow"> ... </div>

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=".sites" will be filtering all the portolio elements that contains class "sites". 

<ul class="iso_filters cats">
    <li>
        <a class="current" data-filter="*" href="#">All</a>
    </li>
    <li>
        <a data-filter=".sites" href="#">Sites</a>
    </li>
    <li>
        <a data-filter=".identities" href="#">Identities</a>
    </li>
    <li>
        <a data-filter=".photos" href="#">Photos</a>
    </li>
</ul>

Skills

To change the appearance, you may change the value data-color="background color'' and data-width="length". 

<div id="mrlytoswjngq" class="sc_skills">
    <h2>Skills</h2>
    <div class="sc_skills_item odd first">
        <div class="sc_skills_progressbar">
            <span class="sc_skills_progress" data-color="#00cbb1" data-width="81%">
                <span class="sc_skills_caption">Web design</span>
                <span class="sc_skills_level">81%</span>
            </span>
        </div>
    </div>

    ...

</div>

To change parameters of the pie chart you need to change values "value"and "color". directory site...js/_front.js, line 12: 

var doughnutData = [{value:81, color: "#00cbb1"},{value:91, color: "#00e3b6"},
{value:85, color: "#00b4a5"},{value:75, color: "#20f5b1"},{value:60, color: "#00958c"}];

To change background color of chart list blocks you should change the value data-color="background color". 

<ul class="skills_list">
    <li>
        <span class="color" data-color="#00cbb1"></span>
        <span class="skill_name">Web Design</span>
    </li>

    ...

</ul>

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/_front.js, line 10: 

var googleMaps = '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:
    • Raleway (non standard)
    • Fontello (non standard, icons set)
    • Arial (standard)

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