Getting started

General Information

Thank you for purchasing our theme. We are happy that you are one of our customers and we assure you won't be disappointed. We do our best to produce top notch themes with great functionality, premium designs and human readable code. Before you get started we highly encourage you to get familiar with this documentation file. Spending half an hour reading the manual may save a lot of your time and avoid questions with obvious answers.

This theme was built with Bootstrap v3.3.5. Check js/vendor/bootstrap.min.js file for more information.

If you have any questions that are beyond the scope of this help file, feel free to post them on our support forum at https://themerex.ticksy.com/.

PLEASE NOTE! Our support covers getting setup, trouble using any features, and any bug fixes that may arise. Unfortunately, we cannot provide support for customizations or 3rd party plugins. If you need help with customizations of your theme, then you should ask for help from a developer.

HTML Structure

Customizer panel



Files responsible for the output, styles and settings of the Customizer panel can be found here:

root directory.../custom_tools/js/_customizer.js
root directory.../custom_tools/css/custom_tools.css

The lines below are responsible for Customizer panel functioning. It can be found in your index.html file. It can also be added to any file you want your Customizer panel to appear.

<script type='text/javascript' src='custom_tools/js/_customizer.js'></script> <link rel='stylesheet' href='custom_tools/css/custom_tools.css' type='text/css' media='all'/> IMPORTANT: Changes made via Customizer panel will be active until you refresh the page. To save the changes you'd need to edit the source files. Such "on-the-go" customization functionality was made for a demonstration purposes only.

Background Images

To change the background image add one of the classes (choose any figure from 1 to 6 for the bg_image_ attribute) below into the <body> tag:

<body class="home page wild top_panel_above top_panel_opacity_transparent theme_skin_general usermenu_show custom_menu_show boxed bg_image_6" style="cursor: auto;">



To see the image in higher resolution right click on it and choose "Open image in new tab" option in the context menu.

To edit basic SmartSeo color scheme you need to edit styles in the main_style.css file and the rest of the .css related ones.

Background Patterns

To change the background pattern add of one the classes (choose any figure from 1 to 10 for the bg_image_6 attribute) below into the <body> tag:

<body class="home page wild top_panel_above top_panel_opacity_transparent theme_skin_general usermenu_show custom_menu_show boxed bg_pattern_9" style="cursor: auto;">



Social icons

To add a link to your social icon paste the necessary URL into the <a href=> tag. See the example below:

<ul class="sc_social">
<li>
<a class="social_icons social_facebook" target="_blank" href="http://facebook.com"> </a>
</li>


Social Share icons

To add a link to your social sharing buttons paste the necessary URL into the <a href=> tag. See the example below:

<a href="#" class="share-item" onclick="window.open('http://pinterest.com/', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;">
<img src="images/pinterest_color.png" alt="pinterest">Pinterest</a>


Widgets sidebar

This is how the standard widgets sidebar looks like.



<div id="sidebar_main" class="widget_area sidebar_main sidebar"> <aside class="widgetWrap hrShadow widget widget_archive"> <h3 class="title">Archives</h3> <ul> <li> <a href="#">September <span>2014</span></a>&nbsp;(1) </li> <li> <a href="#">August <span>2014</span></a>&nbsp;(21) </li> <li> <a href="#">July <span>2014</span></a>&nbsp;(12) </li> <li> <a href="#">June <span>2014</span></a>&nbsp;(35) </li> <li> <a href="#">May <span>2014</span></a>&nbsp;(1) </li> <li> <a href="#">April <span>2014</span></a>&nbsp;(2) </li> </ul> </aside> <aside class="widgetWrap hrShadow widget widget_calendar"> <h3 class="title">Calendar</h3> <div id="calendar_wrap"> <table class="sc_calendar"> <thead> <tr> <th class="prevMonth"> <div class="left roundButton"> <a href="#" data-type="post" data-year="2015" data-month="8" title="View posts for August 2015"> </a> </div> </th> <th class="curMonth" colspan="5"> <a href="#" title="View posts for September 2015"> September <span>2015</span> </a> </th> <th class="nextMonth"> <div class="right roundButton"> <a href="#" data-type="post" data-year="2015" data-month="10" title="View posts for October 2015"></a> </div> </th> </tr> <tr> <th scope="col" title="Monday">M</th> <th scope="col" title="Tuesday">T</th> <th scope="col" title="Wednesday">W</th> <th scope="col" title="Thursday">T</th> <th scope="col" title="Friday">F</th> <th scope="col" title="Saturday">S</th> <th scope="col" title="Sunday">S</th> </tr> </thead> <tbody> <tr> <td colspan="3" class="pad">&nbsp;</td> <td><a href="#" title="Installation">1</a></td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td><a href="#" title="Installation">6</a></td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td><a href="#" title="Installation">13</a></td> <td>14</td> <td class="today">15</td> <td>16</td> <td>17</td> <td>18</td> </tr> <tr> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td class="pad" colspan="1">&nbsp;</td> </tr> </tbody> </table> </div> </aside> <aside class="widgetWrap hrShadow widget widget_meta"> <h3 class="title">Meta</h3> <ul> <li> <a href="#">Log in</a> </li> <li> <a href="#"> Entries RSS </a> </li> <li> <a href="#"> Comments RSS </a> </li> </ul> </aside> <aside class="widgetWrap hrShadow widget widget_pages"> <h3 class="title">Pages</h3> <ul> <li> <a href="features_pages_about_us.html">About Us</a> </li> <li class="current_page_parent"> <a href="#">Blog streampage</a> </li> <li> <a href="features_pages_contact_us.html">Contact Us</a> </li> <li> <a href="features_pages_faq.html">FAQ</a> </li> <li> <a href="index.html">Homepage (seo)</a> </li> <li> <a href="features_pages_404.html">Page 404</a> </li> <li> <a href="pricing.html">Pricing</a> </li> <li> <a href="services.html">Tools</a> </li> <li> <a href="features_tools_typography.html">Typography</a> </li> <li> <a href="features_pages_under_constraction.html">Under Constraction</a> </li> </ul> </aside> <aside class="widgetWrap hrShadow widget widget_recent_comments"> <h3 class="title">Recent comments</h3> <ul id="recentcomments"> <li class="recentcomments"> <span class="comment-author-link">TRX_admin</span> on <a href="#comment-1">Improving SEO Rankings with Google Plus</a> </li> <li class="recentcomments"> <span class="comment-author-link">TRX_admin</span> on <a href="#comment-4">Quote post</a> </li> <li class="recentcomments"> <span class="comment-author-link">Miki Williams</span> on <a href="#comment-6">Link post</a> </li> <li class="recentcomments"> <span class="comment-author-link">Miki Williams</span> on <a href="#comment-3">Theme Slider instead of Gallery</a> </li> <li class="recentcomments"> <span class="comment-author-link">TRX_admin</span> on <a href="#comment-5">Status post</a> </li> </ul> </aside> <aside class="widgetWrap hrShadow widget widget_recent_entries"> <h3 class="title">Recent posts</h3> <ul> <li> <a href="#">Interior Design Website</a> <span class="post-date">August 29, 2014</span> </li> <li> <a href="#">Online Education Website</a> <span class="post-date">August 29, 2014</span> </li> <li> <a href="#">Legal Help Website</a> <span class="post-date">August 29, 2014</span> </li> <li> <a href="#">Beauty Salon Website</a> <span class="post-date">August 29, 2014</span> </li> <li> <a href="#">Online Clothing Shop</a> <span class="post-date">August 29, 2014</span> </li> </ul> </aside> <aside class="widgetWrap hrShadow widget widget_rss"> <h3 class="title"> <a class="rsswidget" href="#"> <img src="images/rss.png" alt="RSS"> </a> <a class="rsswidget" href="#">RSS</a> </h3> <ul> <li> <a class="rsswidget" href="#">How good (or bad) is your employer's health plan?</a> <span class="rss-date">October 14, 2015</span> <div class="rssSummary"> NEW YORK (Reuters) - When it comes to employee benefits, perks like free snacks in the break room might do a lot for employee morale, but nothing beats a generous health plan for keeping workers... </div> </li> <li> <a class="rsswidget" href="#">After T-Mobile breach, millennials may care about ID theft</a> <span class="rss-date">October 14, 2015</span> <div class="rssSummary"> NEW YORK (Reuters) - Jihan Antoine is fed up. The 28-year-old social media publicist, a T-Mobile customer, found out last week that her data may have been compromised in a breach, and she immediately... </div> </li> </ul> </aside> <aside class="widgetWrap hrShadow widget widget_search"> <h3 class="title">Search</h3> <form role="search" method="get" class="search-form" action="#"> <input type="text" class="search-field" placeholder="Search %u2026" value="" name="s" title="Search for:"> <span class="search-button squareButton light ico"> <a class="search-field icon-search" href="#"> </a> </span> </form> </aside> <aside class="widgetWrap hrShadow widget widget_tag_cloud"> <h3 class="title">Tags</h3> <div class="tagcloud"> <a href="#" title="1 topic">adwords</a> <a href="#" title="1 topic">aside post</a> <a href="#" title="1 topic">audio post</a> <a href="#" title="4 topics">business</a> <a href="#" title="1 topic">chat post</a> <a href="#" title="4 topics">conversion</a> <a href="#" title="4 topics">creative</a> <a href="#" title="3 topics">design</a> <a href="#" title="2 topics">events</a> <a href="#" title="1 topic">keywords</a> <a href="#" title="1 topic">link post</a> <a href="#" title="1 topic">marketing</a> <a href="#" title="10 topics">post formats</a> <a href="#" title="3 topics">posts slider</a> <a href="#" title="1 topic">print</a> <a href="#" title="1 topic">quote post</a> <a href="#" title="2 topics">seo</a> <a href="#" title="31 topics">shortcodes</a> <a href="#" title="1 topic">status post</a> <a href="#" title="1 topic">typography</a> <a href="#" title="1 topic">video post</a> <a href="#" title="3 topics">gallery</a> </div> </aside> <aside class="widgetWrap widget widget_text"> <h3 class="title">Custom text</h3> <div class="textwidget"> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p> </div> </aside> </div>

Standard Blog Post

<div class="container"> <div class="row"> <div class="col-sm-12"> <section class="post postAlter hrShadow"> <article class="post_content"> <div class="post_info infoPost"> Posted <a href="#" class="post_date date updated">July 31, 2014</a> <span class="separator">|</span> by <span class="vcard"> <a href="#" class="post_author fn" rel="author">admin</a> </span> <span class="separator">|</span> <span class="post_cats"> in <a class="cat_link" href="#">Blog with sidebar,</a> <a class="cat_link" href="#">Blog without sidebar,</a> <a class="cat_link" href="#">Timeline example</a> </span> </div> <div class="sc_section col-sm-6 post_thumb thumb"> <img alt="How To Get Traffic From Twitter" src="images/1-1150x767.jpg"> </div> <h1 class="post_title entry-title">How To Get Traffic From Twitter</h1> <div class="post_text_area"> <p>Nulla dignissim at dolor quis malesuada. Integer aliquam enim sagittis ante ullamcorper dapibus. Etiam consectetur convallis lorem hendrerit ultricies taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae neque a tortor euismod luctus eget molestie odio. Duis sit amet gravida nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla tempus felis ac ex pharetra, vitae commodo taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos mi vestibulum. Quisque sapien justo, porta id mauris congue, ullamcorper pretium nibh. Duis consequat elit id mi interdum, at varius nulla pulvinar. Suspendisse taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos potenti. Donec vulputate eu massa sit amet aliquam.</p> <div class="tagsWrap"> <div class="postSharing inited"> <ul> <li class="squareButton light ico share"> <a class="icon-share shareDrop" title="Share" href="#">Share</a> <ul class="share-social shareDrop inited" style=""> <li> <a href="#" class="share-item" onclick="window.open('http://pinterest.com/', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;"> <img src="images/pinterest_color.png" alt="pinterest">Pinterest</a> </li> <li> <a href="#" class="share-item" onclick="window.open('https://twitter.com/', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;"> <img src="images/twitter_color.png" alt="twitter">Twitter</a> </li> <li> <a href="#" class="share-item" onclick="window.open('http://www.facebook.com', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;"> <img src="images/facebook_color.png" alt="facebook">Facebook</a> </li> </ul> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 315" href="#">315</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> <li class="squareButton light ico likeButton like" data-postid="1031" data-likes="6" data-title-like="Like" data-title-dislike="Dislike"> <a class="icon-heart-1" title="Like - 6" href="#"> <span class="likePost">6</span> </a> </li> </ul> </div> </div> </div> </article> </section> <section class="author vcard hrShadow"> <h2 class="post_author_title"> About author <span> <a href="#" class="fn">admin</a> </span> </h2> <div class="avatar"> <a href="#"> <img alt="" src="images/no_ava.png" srcset="images/no_ava.png" class="avatar avatar-50 photo" height="50" width="50"> </a> </div> <div class="authorInfo"> <p></p> </div> </section> <section class="relatedWrap hrShadow"> <h2>Related posts</h2> <div class="relatedPostWrap"> <div class="row"> <article class="col-md-4 col-sm-6 column_item_1"> <div class="thumb hoverIncrease inited" data-image="images/11.jpg" data-title="Advanced Guide to Google Penalty Removal"> <img alt="Advanced Guide to Google Penalty Removal" src="images/11-400x277.jpg"> <span class="hoverShadow"></span><a href="images/11.jpg" title="Advanced Guide to Google Penalty Removal" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Advanced Guide to Google Penalty Removal</a> </h4> <p>Many businesses are operated through a separate entity such as a corporation or a partnership (either formed with or without limited liability)...</p> <div class="relatedInfo"> Posted <a href="#" class="post_date">August 20, 2014</a> </div> <div class="relatedMore"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> </article> <article class="col-md-4 col-sm-6 column_item_2"> <div class="thumb hoverIncrease inited" data-image="images/2.jpg" data-title="SEO Musts for Local Business"> <img alt="SEO Musts for Local Business" src="images/2-400x277.jpg"> <span class="hoverShadow"></span><a href="images/2.jpg" title="SEO Musts for Local Business" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">SEO Musts for Local Business</a> </h4> <div class="reviews_summary blog_reviews"> <div class="criteria_summary criteria_row"> <div class="ratingItem" data-mark="90.8"> <div class="starDefault"> <span class="starReview"> </span> <span class="starReview"> </span> <span class="starReview"> </span> <span class="starReview"> </span> <span class="starReview"> </span> </div> <div class="starHover" style="width: 90.8%;"> <span class="starReview"> </span> <span class="starReview"> </span> <span class="starReview"> </span> <span class="starReview"> </span> <span class="starReview"> </span> </div> </div> </div> </div> <p>Hello All, Firstly, thank you so much for the great template! I have spent around 10hrs looking for a good template and yours was the best!</p> <div class="relatedInfo"> Posted <a href="#" class="post_date">August 12, 2014</a> </div> <div class="relatedMore"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> </article> <article class="col-md-4 col-sm-6 column_item_3"> <div class="thumb hoverIncrease inited" data-image="images/6.jpg" data-title="Search Engine Marketing Strategies"> <img alt="Search Engine Marketing Strategies" src="images/6-400x277.jpg"> <span class="hoverShadow"></span><a href="images/6.jpg" title="Search Engine Marketing Strategies" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Search Engine Marketing Strategies</a> </h4> <p>Curabitur a venenatis elit. Proin ac varius ligula. Integer porttitor eleifend euismod. Ut in nulla elementum, lacinia ex ut, egestas lacus...</p> <div class="relatedInfo"> Posted <a href="#" class="post_date">June 6, 2014</a> </div> <div class="relatedMore"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> </article> </div> </div> </section> <section class="formValid no_padding"> <h2>Leave a Reply</h2> <div class="commForm commentsForm"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"> <small> <a rel="nofollow" id="cancel-comment-reply-link" href="#respond">Cancel reply</a> </small> </h3> <p class="must-log-in"> You must be <a href="#">logged in</a> to post a comment. </p> </div> <div class="nav_comments"> </div> </div> </section> </div> </div> </div>

Typography

Image alignment can be changed by adding one of the values into the <div class=> tag:

<div class="sc_section sc_alignright margin_left_small col-sm-6">
<div class="sc_section sc_alignleft margin_right_small col-sm-6">

Highlight



To highlight an element add one of the values below into the <span class=> tag:

<span class="sc_highlight sc_highlight_style_1">dolores voluptatibus id magni impedit quis et</span>

Portfolio

The example of portfolio-like page can be seen on "Masonry 3 columns" page.
Please note that animation effects are made with Isotope script. See the screenshots below for more information.



The snippet below belongs to Masonry 3 columns page which can be found in root directory.../blog_masonry_3_columns.html file..

<div class="col-sm-12"> <div class="masonryWrap no_padding_top"> <div class="isotopeFiltr"> <ul> <li class="squareButton active"> <a href="#" data-filter="*">All</a> </li> <li class="squareButton"> <a href="#" data-filter=".flt_71">business</a> </li> <li class="squareButton"> <a href="#" data-filter=".flt_66">creative</a> </li> <li class="squareButton"> <a href="#" data-filter=".flt_61">design</a> </li> <li class="squareButton"> <a href="#" data-filter=".flt_64">conversion</a> </li> <li class="squareButton"> <a href="#" data-filter=".flt_68">seo</a> </li> <li class="squareButton"> <a href="#" data-filter=".flt_65">adwords</a> </li> <li class="squareButton"> <a href="#" data-filter=".flt_67">keywords</a> </li> </ul> </div> <div class="masonry isotope inited" data-columns="3" style="position: relative; height: 2681px;"> <article class="isotopeElement post_format_standard odd flt_71 flt_66 flt_61 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 0px; top: 0px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/21.jpg" data-title="Interior Design Website"> <img alt="Interior Design Website" src="images/21-714x476.jpg"> <span class="hoverShadow"></span><a href="images/21.jpg" title="Interior Design Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Interior Design Website</a> </h4> <p> Proin dictum tellus magna, id semper elit rhoncus a. Nullam gravida lectus vel nunc sagittis consectetur. Cras dictum, elit sit amet imperdiet posuere, nunc eros cursus tellus, sit amet mollis... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 210" href="#">210</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard flt_71 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 396px; top: 0px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/17.jpg" data-title="Online Education Website"> <img alt="Online Education Website" src="images/17-714x476.jpg"> <span class="hoverShadow"></span><a href="images/17.jpg" title="Online Education Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Online Education Website</a> </h4> <p> Curabitur suscipit est ut orci fringilla condimentum. Praesent id pretium velit. Nunc ullamcorper, augue non tincidunt porta, mauris urna vestibulum eros, vitae gravida tellus ligula quis felis... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 185" href="#">185</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard odd flt_64 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 792px; top: 0px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/91.jpg" data-title="Legal Help Website"> <img alt="Legal Help Website" src="images/91-714x476.jpg"> <span class="hoverShadow"></span><a href="images/91.jpg" title="Legal Help Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Legal Help Website</a> </h4> <p> Aliquam dapibus neque a placerat iaculis. Nulla tellus nisl, tincidunt eu tempor porta, sagittis id neque. Cras nunc diam, vestibulum a pretium at, tristique vitae tortor. Integer eget posuere... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 119" href="#">119</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard flt_71 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 0px; top: 629px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/111.jpg" data-title="Beauty Salon Website"> <img alt="Beauty Salon Website" src="images/111-714x476.jpg"> <span class="hoverShadow"></span><a href="images/111.jpg" title="Beauty Salon Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Beauty Salon Website</a> </h4> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quis porttitor diam. Phasellus semper venenatis nisl, eu fringilla metus vestibulum ut. Proin imperdiet... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 96" href="#">96</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard odd flt_66 flt_61 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 396px; top: 629px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/61.jpg" data-title="Online Clothing Shop"> <img alt="Online Clothing Shop" src="images/61-714x476.jpg"> <span class="hoverShadow"></span><a href="images/61.jpg" title="Online Clothing Shop" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Online Clothing Shop</a> </h4> <p> Fusce egestas dolor vitae velit interdum, eget dictum justo varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse tempor semper molestie... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 115" href="#">115</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard flt_64 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 792px; top: 629px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/51.jpg" data-title="Online Blog"> <img alt="Online Blog" src="images/13-714x714.jpg"> <span class="hoverShadow"></span><a href="images/51.jpg" title="Online Blog" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Online Blog</a> </h4> <p> Donec lacinia elementum nunc, sed condimentum eros dictum ut. Sed pretium lacinia tortor, ac porta sapien congue sed. Morbi quis nisl dolor. Vestibulum a lectus vel orci pulvinar consequat vitae... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 452" href="#">452</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard odd flt_64 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 0px; top: 1258px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/71.jpg" data-title="Photography Website"> <img alt="Photography Website" src="images/71-714x476.jpg"> <span class="hoverShadow"></span><a href="images/71.jpg" title="Photography Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Photography Website</a> </h4> <p> Curabitur auctor adipiscing risus sed ornare. Aliquam a auctor augue. Nullam nisl lorem, sodales sed odio ac, auctor accumsan libero. Ut convallis fringilla velit. Pellentesque auctor lacus eget... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 125" href="#">125</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard flt_66 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 396px; top: 1258px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/101.jpg" data-title="Political Party Website"> <img alt="Political Party Website" src="images/101-714x476.jpg"> <span class="hoverShadow"></span><a href="images/101.jpg" title="Political Party Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Political Party Website</a> </h4> <p> Vestibulum ut lacus et magna consectetur interdum non eget justo. Nam lorem tortor, viverra ut nibh a, feugiat varius mi. Duis eleifend, nisi tincidunt porttitor dignissim, ligula sem luctus... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 83" href="#">83</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_gallery odd flt_68 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 792px; top: 1373px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/81.jpg" data-title="Online Cinema Website"> <img alt="Online Cinema Website" src="images/81-714x476.jpg"> <span class="hoverShadow"></span><a href="images/81.jpg" title="Online Cinema Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Online Cinema Website</a> </h4> <p> Ut a neque tellus. Duis facilisis enim quis tortor pharetra dapibus. Phasellus nunc velit, feugiat sed lobortis in, accumsan facilisis turpis. Vivamus iaculis velit ut risus blandit condimentum... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 66" href="#">66</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard flt_68 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 0px; top: 1887px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/10.jpg" data-title="Pet Care Services Website"> <img alt="Pet Care Services Website" src="images/10-714x476.jpg"> <span class="hoverShadow"></span><a href="images/10.jpg" title="Pet Care Services Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Pet Care Services Website</a> </h4> <p> Proin vel odio eu velit pellentesque rhoncus sed nec lectus. Curabitur in vulputate felis. Fusce id tellus dui. Maecenas a dictum odio, id suscipit lorem. Nam enim libero, imperdiet eget tincidunt... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 69" href="#">69</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard odd flt_65 flt_66 flt_67 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 396px; top: 1887px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/41.jpg" data-title="Home Repair Website"> <img alt="Home Repair Website" src="images/41-714x476.jpg"> <span class="hoverShadow"></span><a href="images/41.jpg" title="Home Repair Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Home Repair Website</a> </h4> <p> Ut vitae lacus pretium, molestie massa a, placerat urna. Donec viverra nisl id nisl accumsan, ac cursus est dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 88" href="#">88</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> <article class="isotopeElement post_format_standard flt_61 flt_64 flt_65 isotopeElementShow" style="opacity: 1; width: 396px; position: absolute; left: 792px; top: 2002px;"> <div class="isotopePadding"> <div class="thumb hoverIncrease inited" data-image="images/32.jpg" data-title="Advertising Website"> <img alt="Advertising Website" src="images/32-714x476.jpg"> <span class="hoverShadow"></span><a href="images/32.jpg" title="Advertising Website" rel="prettyPhoto[slideshow]" class="inited"><span class="hoverIcon"></span></a></div> <h4> <a href="#">Advertising Website</a> </h4> <p> Vivamus pharetra justo eget placerat commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque porttitor sagittis consectetur. Sed quam enim... </p> <div class="masonryInfo">Posted <a href="#" class="post_date">August 29, 2014</a> </div> <div class="masonryMore inited"> <ul> <li class="squareButton light ico"> <a class="icon-link" title="More" href="#">More</a> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 68" href="#">68</a> </li> <li class="squareButton light ico"> <a class="icon-comment-1" title="Comments - 0" href="#comments">0</a> </li> </ul> </div> <span class="inlineShadow"></span> </div> </article> </div> </div> <div id="pagination" class="pagination"> <ul class="pageLibrary"> <li class="pager_pages libPage"> Page <input class="navInput" readonly="readonly" type="text" size="1" value="1"> of 2 <div id="pageNavSlider" class="boxShadow pageFocusBlock navPadding" style=""> <div class="sc_slider sc_slider_swiper sc_slider_controls sc_slider_controls_top sc_slider_nopagination sc_slider_noautoplay swiper-slider-container"> <ul class="slides swiper-wrapper" data-current-slide="1"> <li class="swiper-slide"> <div class="pageNumber"> <table> <tbody> <tr> <td> <a href="#" class="active">1</a> </td> <td> <a href="#">2</a> </td> </tr> </tbody> </table> </div> </li> </ul> </div> <ul class="flex-direction-nav"> <li> <a class="flex-prev" href="#"> </a> </li> <li> <a class="flex-next" href="#"> </a> </li> </ul> </div> </li> <li class="pager_next ico right squareButton light"> <a href="#">Next </a> </li> <li class="pager_last ico right squareButton light"> <a href="#">Last </a> </li> </ul> </div> </div>



Please take into consideration that filtration in portfolio block works only if an element contains filtering class, for example "flt_71".

File responsible for the Isotope script can be found here:
root directory...js/vendor/_packed.js

Skills

You can customize the skills bar by changing width and data-ed values as well as their styles. Check below screenshot.

<div class="sc_skills_count" style="width: 88%;">
<div class="sc_skills_total" data-start="0" data-stop="98" data-step="1" data-max="100" data-speed="39" data-duration="3822" data-ed="%">88%</div>
</div>


Contact form



Below is the file responsible for contact form functionality:

root directory.../include/contact-form.php

Your email address should be specified in the contact-form.php file. See the code below.

$your_email = [email protected]';

Google map



Files responsible for Google map functionality:

root directory.../js/custom/_googlemap_init.js

root directory.../js/shortcodes_init.js

root directory.../features_tools_shortcodes_google_map.html

Address/coordinates should be specified in features_tools_shortcodes_google_map.html file. It also depends on what Google card your are going to use. Find the id below.

div id="googlemap_0"

<div id="googlemap_0" class="sc_googlemap" data-address="San Francisco, CA 94102, US" data-latlng="" data-zoom="14" data-style="default" data-point="" data-description="San Francisco, CA 94102, US"></div>

File _googlemap_init.js is responsible for the map's initialization.

Revolution Slider

Homepage



Files responsible for the Revolution Slider functionality can be found in the "revslider" folder:

root directory.../js/vendor/revslider/...
root directory.../js/custom/_main.js
root directory.../js/vendor/revslider/js/jquery.themepunch.revolution.min.js
root directory.../js/vendor/revslider/js/jquery.themepunch.tools.min.js
root directory.../js/vendor/revslider/css/settings.css
root directory.../index.html

Check the index.html file for more information. Lines #270-#399.



Swiper Slider



Files responsible for the Swiper Slider functionality:

root directory...js/vendor/custom/_packed.js
root directory...js/custom/shortcodes_init.js
root directory...css/_packed.css
root directory...index.html

Check the index.html file for more information. Lines #680-#752.





PSD Files

All the related .PSD files can be found in the theme's archive. Otherwise you can always request them by contacting our support team.

Sources and Credits

In this section you can find an additional information regarding fonts and clipart used in this theme.

  • Fonts:
    • Alegreya Sans, Open Sans. Check the style.css file and font & fonts folders for more information.
    • Fontello (non standard, icons set). Specified in every .html file.
  • Clipart:
    • Images were taken from here.

PLEASE NOTE! All the images used in this theme are the property of their respective owners and should be purchased separately.

Support

We are happy that you are one of our customers and we assure you won't be disappointed. If you come up with any questions that are beyond the scope of this help file, feel free to post them on our support forum at https://themerex.ticksy.com/.

We are open from 10am to 7pm (CET), from Monday till Friday.

PLEASE NOTE!
Our support policy covers getting setup, trouble using any features, and any bug fixes that may arise.
Unfortunately, we cannot provide support for installation, any customizations or 3rd party plugins. You also need to have a valid purchase code to request an assistance from our support team.
If you need help with customization of your theme, then you should ask for help from an independent developer (freelancer).

How to find a purchase key (check the screenshot):

  • Log in to your themeForest account.
  • Click on the "Downloads" tab.
  • Find our theme in the products list.
  • Click the "Download" button and select "License certificate & purchase code" in the drop down menu.
Once again, thank you so much for purchasing our theme.

ThemeREX