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 panel can be found here:

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

Below are the lines (#1283, #1297, #1298) of code responsible for Customizer panel functioning. They can be found in your index.html file.

<script type="text/javascript" src="js/custom/custom_menu.js"></script>
<script type="text/javascript" src="custom_menu/js/_customizer.js"></script>
<script type="text/javascript" src="custom_menu/js/custom_tools.js"></script>
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 below into the <body> tag:

<body class="home page themerex_body fullscreen top_panel_above theme_skin_general usermenu_show boxed bg_image_1">

<body class="home page themerex_body fullscreen top_panel_above theme_skin_general usermenu_show boxed bg_image_2">

<body class="home page themerex_body fullscreen top_panel_above theme_skin_general usermenu_show boxed bg_image_3">


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 QuickSale 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 below into the <body> tag:

<body class="home page themerex_body fullscreen top_panel_above theme_skin_general usermenu_show boxed bg_pattern_1">

<body class="home page themerex_body fullscreen top_panel_above theme_skin_general usermenu_show boxed bg_pattern_2">

<body class="home page themerex_body fullscreen top_panel_above theme_skin_general usermenu_show boxed bg_pattern_3">



Social icons

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

<li class="">
<a class="social_icons icon-twitter" target="_blank" href="https://twitter.com/Theme_REX"></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:

<li>
<a href="#" class="icon-twitter social_icons 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;">Twitter</a>
</li>


Widgets sidebar

This is how the standard widgets sidebar looks like.



<div id="sidebar_main" class="widget_area sidebar_main sidebar sidebarStyleDark" role="complementary"> <aside class=" widgetWrap widget widget_categories"> <h5 class="title">Categories</h5> <ul> <li class="cat-item current-cat-parent dropMenu"> <a href="blog-classic-style-1-columns.html">Classic Style</a> (14) <ul class="children"> <li class="cat-item"> <a href="blog-classic-style-1-columns.html">1 Column</a> (9) </li> <li class="cat-item"> <a href="blog-classic-style-2-columns.html">2 Columns</a> (11) </li> <li class="cat-item current-cat"> <a href="blog-classic-style-2-columns-sidebar.html">2 Columns sidebar</a> (11) </li> <li class="cat-item"> <a href="blog-classic-style-3-columns.html">3 Columns</a> (10) </li> <li class="cat-item"> <a href="blog-classic-style-3-columns-sidebar.html">3 Columns sidebar</a> (11) </li> <li class="cat-item"> <a href="blog-classic-style-4-columns.html">4 Columns</a> (10) </li> </ul> </li> <li class="cat-item"> <a href="blog-classic-style-large.html">Classic Style Large</a> (13) </li> <li class="cat-item"> <a href="blog-classic-style-small.html">Classic Style Small</a> (12) </li> <li class="cat-item"> <a href="contemporary.html">Contemporary</a> (15) </li> <li class="cat-item"> <a href="cottage.html">Cottage</a> (5) </li> <li class="cat-item"> <a href="gallery-grid-alternative.html">Grid Alternative</a> (22) </li> <li class="cat-item dropMenu"> <a href="blog-masonry-style-2-columns.html">Masonry demo</a> (18) <ul class="children"> <li class="cat-item"> <a href="blog-masonry-style-2-columns.html">2 Columns</a> (17) </li> <li class="cat-item"> <a href="blog-masonry-style-2-columns-sidebar.html">2 Columns sidebar</a> (17) </li> <li class="cat-item"> <a href="blog-masonry-style-3-columns.html">3 Columns</a> (17) </li> <li class="cat-item"> <a href="blog-masonry-style-3-columns-sidebar.html">3 Columns sidebar</a> (13) </li> <li class="cat-item"> <a href="blog-masonry-style-4-columns.html">4 Columns</a> (16) </li> </ul> </li> <li class="cat-item dropMenu"> <a href="gallery-classic-style-1-column.html">Portfolio Classic</a> (22) <ul class="children"> <li class="cat-item"> <a href="gallery-classic-style-1-column.html">1 Column</a> (22) </li> <li class="cat-item"> <a href="gallery-classic-style-1-column-sidebar.html">1 Column sidebar</a> (22) </li> <li class="cat-item"> <a href="gallery-classic-style-2-columns.html">2 Columns</a> (22) </li> <li class="cat-item"> <a href="gallery-classic-style-2-columns-sidebar.html">2 Columns sidebar</a> (22) </li> <li class="cat-item"> <a href="gallery-classic-style-3-columns.html">3 Columns</a> (22) </li> <li class="cat-item"> <a href="gallery-classic-style-3-columns-sidebar.html">3 Columns sidebar</a> (22) </li> <li class="cat-item"> <a href="gallery-classic-style-4-columns.html">4 Columns</a> (22) </li> </ul> </li> <li class="cat-item dropMenu"> <a href="gallery-grid-style-2-columns.html">Portfolio Grid</a> (22) <ul class="children"> <li class="cat-item"> <a href="gallery-grid-style-2-columns.html">2 Columns</a> (22) </li> <li class="cat-item"> <a href="gallery-grid-style-2-columns-fullscreen.html">2 Columns fullscreen</a> (22) </li> <li class="cat-item"> <a href="gallery-grid-style-3-columns.html">3 Columns</a> (22) </li> <li class="cat-item"> <a href="gallery-grid-style-3-columns-fullscreen.html">3 Columns fullscreen</a> (22) </li> <li class="cat-item"> <a href="gallery-grid-style-4-columns.html">4 Columns</a> (22) </li> <li class="cat-item"> <a href="gallery-grid-style-4-columns-fullscreen.html">4 Columns fullscreen</a> (22) </li> </ul> </li> <li class="cat-item dropMenu"> <a href="gallery-masonry-style-2-columns.html">Portfolio Masonry</a> (12) <ul class="children"> <li class="cat-item"> <a href="gallery-masonry-style-2-columns.html">2 Columns</a> (11) </li> <li class="cat-item"> <a href="gallery-masonry-style-2-columns-sidebar.html">2 Columns sidebar</a> (12) </li> <li class="cat-item"> <a href="gallery-masonry-style-3-columns.html">3 Columns</a> (12) </li> <li class="cat-item"> <a href="gallery-masonry-style-3-columns-sidebar.html">3 Columns sidebar</a> (12) </li> <li class="cat-item"> <a href="gallery-masonry-style-4-columns.html">4 Columns</a> (12) </li> </ul> </li> <li class="cat-item"> <a href="gallery-grid-alternative.html">Projects</a> (9) </li> </ul> </aside> <aside class="widgetWrap widget widget_recent_comments"> <h5 class="title">Recent Comments</h5> <ul> <li class="recentcomments"> <span class="comment-author-link">Admin</span> on <a href="#">Is Condo Life For You?</a> </li> <li class="recentcomments"> <span class="comment-author-link">Admin</span> on <a href="#">New Post With Image</a> </li> <li class="recentcomments"> <span class="comment-author-link">Admin</span> on <a href="#">House Market Indicators</a> </li> </ul> </aside> <aside class="widgetWrap widget widget_archive"> <h5 class="title">Archives</h5> <ul> <li> <a href="#">January <span>2015</span></a>&nbsp;(3) </li> <li> <a href="#">December <span>2014</span></a>&nbsp;(59) </li> <li> <a href="#">November <span>2014</span></a>&nbsp;(3) </li> <li> <a href="#">September <span>2014</span></a>&nbsp;(1) </li> <li> <a href="#">August <span>2014</span></a>&nbsp;(1) </li> <li> <a href="#">July <span>2014</span></a>&nbsp;(2) </li> <li> <a href="#">May <span>2014</span></a>&nbsp;(5) </li> <li> <a href="#">February <span>2014</span></a>&nbsp;(1) </li> </ul> </aside> <aside class="widgetWrap widget widget_search"> <form role="search" method="get" class="search-form" action="index.html"> <input type="text" class="search-field" placeholder="Search" value="" name="s" title="Search for:"> <span class="search-button light ico"> <a class="search-field icon-search" href="#"></a> </span> </form> </aside> <aside class="widgetWrap widget widget_calendar"> <div id="calendar_wrap"> <table class="calendar"> <thead> <tr> <th class="curMonth" colspan="7"> <a href="#" title="View posts for August 2015">August</a> </th> </tr> <tr> <th scope="col" title="Monday">Mon</th> <th scope="col" title="Tuesday">Tue</th> <th scope="col" title="Wednesday">Wed</th> <th scope="col" title="Thursday">Thu</th> <th scope="col" title="Friday">Fri</th> <th scope="col" title="Saturday">Sat</th> <th scope="col" title="Sunday">Sun</th> </tr> </thead> <tbody> <tr> <td colspan="1" class="pad">&nbsp;</td> <td> <span>1</span> </td> <td> <span>2</span> </td> <td> <a href="#" title="Post Formats %u2013 Chat">3</a> </td> <td> <span>4</span> </td> <td> <a href="#" title="Vimeo Video Post">5</a> </td> <td> <span>6</span> </td> </tr> <tr> <td> <span>7</span> </td> <td> <a href="#" title="What Is Housing %u0421ooperative">8</a> </td> <td> <span>9</span> </td> <td> <a href="#" title="Post format %u2013 Aside">10</a> </td> <td> <span>11</span> </td> <td> <span>12</span> </td> <td> <span>13</span> </td> </tr> <tr> <td> <a href="#" title="Post formats %u2013 Link">14</a> </td> <td> <a href="#" title="Audio Post">15</a> </td> <td> <span>16</span> </td> <td> <span>17</span> </td> <td> <a href="#" title="Gallery Post Format">18</a> </td> <td> <a href="#" title="Post With Image">19</a> </td> <td> <span>20</span> </td> </tr> <tr> <td> <span>21</span> </td> <td> <span>22</span> </td> <td> <a href="#" title="Post Without Image">23</a> </td> <td> <span>24</span> </td> <td> <span>25</span> </td> <td> <a href="#" title="Status">26</a> </td> <td> <span>27</span> </td> </tr> <tr> <td> <span>28</span> </td> <td class="today"> <span>29</span> </td> <td> <span>30</span> </td> <td class="pad" colspan="4">&nbsp;</td> </tr> </tbody> <tfoot> <tr> <th colspan="4" class="prevMonth"> <div class="left"> <a href="#" data-type="post" data-year="2014" data-month="7" title="View posts for July 2015">Jul</a> </div> </th> <th colspan="3" class="nextMonth"> <div class="right"> <a href="#" data-type="post" data-year="2015" data-month="9" title="View posts for September 2015">Sep</a> </div> </th> </tr> </tfoot> </table> </div> </aside> <aside class="widgetWrap widget widget_tag_cloud"> <h5 class="title">Tags</h5> <div class="tagcloud"> <a href="#" class="tag-link-12" title="12 topics">Attic</a> <a href="#" class="tag-link-46" title="15 topics">Basement</a> <a href="#" class="tag-link-11" title="11 topics">Bedroom</a> <a href="#" class="tag-link-65" title="8 topics">Driveway</a> <a href="#" class="tag-link-8" title="6 topics">Garage</a> <a href="#" class="tag-link-10" title="9 topics">Kitchen</a> <a href="#" class="tag-link-64" title="9 topics">Living room</a> <a href="#" class="tag-link-9" title="23 topics">Popular</a> </div> </aside> <aside class="widgetWrap widget null-instagram-feed"> <h5 class="title">Instagram</h5> <ul class="instagram-pics"> <li class=""> <a href="#" target="_blank" class=""> <img src="img/instagram/1208235_606138602829355_1872004253_n.jpg" alt="Instagram Image" title="Instagram Image" class=""> </a> </li> <li class=""> <a href="#" target="_blank" class=""> <img src="img/instagram/10724013_849664728400826_1089527905_n.jpg" alt="Instagram Image" title="Instagram Image" class=""> </a> </li> <li class=""> <a href="#" target="_blank" class=""> <img src="img/instagram/10005306_1518043688438328_2045272490_n.jpg" alt="Instagram Image" title="Instagram Image" class=""> </a> </li> <li class=""> <a href="#" target="_blank" class=""> <img src="img/instagram/10731433_566339430132701_1314107546_n.jpg" alt="Instagram Image" title="Instagram Image" class=""> </a> </li> <li class=""> <a href="#" target="_blank" class=""> <img src="img/instagram/10724812_711840602224115_2085011690_n.jpg" alt="Instagram Image" title="Instagram Image" class=""> </a> </li> <li class=""> <a href="#" target="_blank" class=""> <img src="img/instagram/10723875_1488936244696244_469967380_n.jpg" alt="Instagram Image" title="Instagram Image" class=""> </a> </li> </ul> <p class="clear"> <a href="#" rel="me" target="_blank">Follow Us</a> </p> </aside> </div>

Standard Blog Post

<div class="post postLeft hrShadow"> <article class="post_content"> <div class="sc_section post_thumb thumb"> <img alt="House Market Indicators" src="img/blog/home-10-1170x778.jpg"> </div> <h1 class="post_title entry-title">House Market Indicators</h1> <div class="post_info infoPost"> <span class="authorPost"> <a href="#" class="post_author fn" rel="author">Admin</a> </span> <span class="datePost"> <a href="#" class="post_date">December 10, 2014</a> </span> <span class="likePost icon-heart-4">2</span> <span class="commentPost"> <a class="icon-comment-3" title="Comments - 1" href="#comments">1</a> </span> </div> <div class="post_text_area"> <p>ThemeRex is a studio that aims to make their users%u2019 experience easier and much more pleasant. You probalby won%u2019t have a better opportunity to make sure of their competence, as well as friendliness towards their customers. Vast experience and understanding of each product%u2019s peculiarities let ThemeRex create outstanding business solutions. </p> <blockquote class="sc_quote margin_bottom_mini sc_quote_style_1"> <p>Always bear in mind that your own resolution to succeed is more important than any other.</p> </blockquote> <p>ThemeRex is doing their best to grant each owner of their themes with maximum opportunities to present their individuality, show their achievements, and establish the best contact with their audience. Using their rich experience, world%u2019s innovations and their own web solutions the ThemeRex team creates templates that will solve your business%u2019s tasks at maximum degree.</p> <h4>High Professionalism</h4> <p>Many year experience and hundreds of successful projects have made ThemeRex a professional on the web area. Within this period of time, the company has gone through a serious evolution from amateurs to leaders. We create templates for your websites that will increase your reputation and highlight your professionalism and leadership. </p> <div class="sc_section sc_alignleft col-sm-6"> <figure class="sc_image sc_image_shape_square"> <img src="img/blog/home-m-3.jpg" alt=""> <figcaption> <span>Title of Image</span> </figcaption> </figure> </div> <p>Purchasing products from ThemeRex means entrusting your reputation to one of the best web-studios. ThemeRex company does its work with its customer in mind. That is why you are getting the best product that will perfectly suit your needs.</p> <p>Not only does ThemeRex create bright, eye-catching designs and do premium quality code, they provide great support to their customers. ThemeRex technical support is always there to assist their users with all their technical questions regarding ThemeRex products. We speak clear language understood by everyone. You need our assistance %u2013 we happily help you. Use comments to ask pre-sale questions, and Ticket System to get any help with our products. Our support team is always happy to help our customers. Whether it is assistance with installation or just configuration, we are here to help.</p> <div class="tagsWrap"> <span class="post_cats"> Categories: <a class="cat_link" href="#">1 Column,</a> <a class="cat_link" href="#">2 Columns,</a> <a class="cat_link" href="#">2 Columns sidebar,</a> <a class="cat_link" href="#">3 Columns,</a> <a class="cat_link" href="#">3 Columns sidebar,</a> <a class="cat_link" href="#">4 Columns,</a> <a class="cat_link" href="#">Classic Style,</a> <a class="cat_link" href="#">Classic Style Large,</a> <a class="cat_link" href="#">Classic Style Small,</a> <a class="cat_link" href="#">Contemporary,</a> <a class="cat_link" href="#">Cottage</a> </span> <div class="postSharing inited"> <ul> <li class="likeButton like" data-postid="525" data-likes="5" data-title-like="Like" data-title-dislike="Dislike"> <a class="icon-heart" title="Like - 5" href="#"> <span class="likePost">Like</span> </a> </li> <li class="share"> <a class="icon-share shareDrop" title="Share" href="#">Share</a> <ul class="share-social shareDrop inited" style=""> <li> <a href="#" class="icon-twitter social_icons 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;">Twitter</a> </li> <li> <a href="#" class="icon-facebook social_icons 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;">Facebook</a> </li> <li> <a href="#" class="icon-gplus social_icons share-item" onclick="window.open('https://plus.google.com/', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;">Gplus</a> </li> <li> <a href="#" class="icon-pinterest social_icons 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;">Pinterest</a> </li> </ul> </li> </ul> </div> <div class="post_tags"> Tags: <a class="tag_link" href="#">Bedroom</a> </div> </div> </div> </article> </div>

Typography

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

<div class="sc_section margin_bottom_mini sc_alignleft col-sm-6">
<div class="sc_section margin_bottom_mini sc_alignright 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">velit esse cillum</span>
<span class="sc_highlight sc_highlight_style_5">vitae dicta sunt</span>

Portfolio

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



The snippet below belongs to Grid Alternative page which can be found in root directory.../gallery-grid-alternative.html file. Lines #446 - #721.

<div class="portfolioWrap NOspacing"> <div class="isotopeFiltr"></div> <div class="masonry grid portfolioNOspacing isotope"> <article data-width="1" data-height="1" class="ellNOspacing isotopeElement flt_64"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Moving House</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Moving House" href="img/isotope/home-13.jpg"> </a> </span> </div> <img alt="Moving House" src="img/isotope/home-13-420x420.jpg"> </div> </div> </article> <article data-width="1" data-height="1" class="ellNOspacing isotopeElement flt_65"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Renting to Own</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Renting to Own" href="img/isotope/home-12.jpg"> </a> </span> </div> <img alt="Renting to Own" src="img/isotope/home-12-420x420.jpg"> </div> </div> </article> <article data-width="2" data-height="1" class="ellNOspacing isotopeElement flt_46 flt_64"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Buy or Sell First?</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Buy or Sell First?" href="img/isotope/home-11.jpg"> </a> </span> </div> <img alt="Buy or Sell First?" src="img/isotope/home-11-840x420.jpg"> </div> </div> </article> <article data-width="2" data-height="1" class="ellNOspacing isotopeElement flt_11 flt_8"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Cash Vs. Mortgage</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Cash Vs. Mortgage" href="img/isotope/home-10.jpg"> </a> </span> </div> <img alt="Cash Vs. Mortgage" src="img/isotope/home-10-840x420.jpg"> </div> </div> </article> <article data-width="2" data-height="2" class="ellNOspacing isotopeElement flt_65 flt_10"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">First Property Search</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="First Property Search" href="img/isotope/home-9.jpg"> </a> </span> </div> <img alt="First Property Search" src="img/isotope/home-9-840x840.jpg"> </div> </div> </article> <article data-width="1" data-height="1" class="ellNOspacing isotopeElement flt_65"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">The Home Inspection</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="The Home Inspection" href="img/isotope/home-8.jpg"> </a> </span> </div> <img alt="The Home Inspection" src="img/isotope/home-8-420x420.jpg"> </div> </div> </article> <article data-width="1" data-height="1" class="ellNOspacing isotopeElement flt_11"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Buying Hints &amp; Insights</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Buying Hints &amp; Insights" href="img/isotope/home-3.jpg"> </a> </span> </div> <img alt="Buying Hints &#038; Insights" src="img/isotope/home-3-420x420.jpg"> </div> </div> </article> <article data-width="2" data-height="1" class="ellNOspacing isotopeElement flt_8"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Working With A Realtor</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Working With A Realtor" href="img/isotope/home-6.jpg"> </a> </span> </div> <img alt="Working With A Realtor" src="img/isotope/home-6-840x420.jpg"> </div> </div> </article> <article data-width="2" data-height="1" class="ellNOspacing isotopeElement flt_10"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Home For The 1st Time</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Home For The 1st Time" href="img/isotope/home-5.jpg"> </a> </span> </div> <img alt="Home For The 1st Time" src="img/isotope/home-5-840x420.jpg"> </div> </div> </article> <article data-width="1" data-height="1" class="ellNOspacing isotopeElement flt_64"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Step-by-Step Buying</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Step-by-Step Buying" href="img/isotope/home-4.jpg"> </a> </span> </div> <img alt="Step-by-Step Buying" src="img/isotope/home-4-420x420.jpg"> </div> </div> </article> <article data-width="1" data-height="1" class="ellNOspacing isotopeElement flt_8"> <div class="isotopePadding"> <div class="thumb hoverIncreaseOut"> <span class="hoverShadow"> </span> <div class="wrap_hover"> <div class="portfolioInfo"> <h4> <a href="#">Tips For Buying a House</a> </h4> <span class="datePost"> <a href="#" class="post_date" itemprop="datePublished" content="2014-12-12"> December 12, 2014</a> </span> </div> <span class="hoverIcon"> <a title="Tips For Buying a House" href="img/isotope/home-7.jpg"> </a> </span> </div> <img alt="Tips For Buying a House" src="img/isotope/home-7-420x420.jpg"> </div> </div> </article> </div> <div id="viewmore" class="squareButton pagination_viewmore"> <a href="#" id="viewmore_link" class="theme_button view_more_button"> <span class="icon-spin3 viewmore_loading"></span> <span class="viewmore_text_1">View more</span> <span class="viewmore_text_2">Loading ...</span> </a> </div> </div>



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

File responsible for the Isotope script can be found here:
root directory...js/custom/_packed.js
Line #470.

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_total" data-start="0" data-stop="85" data-step="1" data-max="100" data-speed="12" data-duration="1020" data-ed="%">85%</div>

Contact form



There are several files 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 = 'your@email.net';

Google map



Files responsible for Google map functionality:

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

root directory...js/custom/core.googlemap.js

root directory...js/shortcodes_init.js

root directory...pages-tools-shortcodes.html

Address/coordinates should be specified in shortcodes.html file.

<div id="sc_googlemap_shortcodes" class="sc_googlemap" data-address="San Francisco, CA 94102, US" data-latlng="" data-zoom="14" data-style="style1" data-point="img/icon/google_map_marker.png" data-title="San Francisco" data-description="San Francisco, CA 94102, US"></div>

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

Revolution Slider

Homepage Default



Fullpage Slider



Menu Center



Files responsible for the Revolution Slider functionality:

root directory...js/custom/_main.js
root directory...js/vendor/revslider/js/jquery.themepunch.revolution.min.js
root directory...js/revslider/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 #428-#612.



Swiper Slider



Files responsible for the Swiper Slider functionality:

root directory...js/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 #708-#801.



Functionality Features

In this section we will describe some features that will or will not be available on mobile devices.

  • PLEASE NOTE! Effects marked on the screenshot below won't be available on mobile devices.



  • PLEASE NOTE! Video header (Video Tour page) marked on the screenshot below won't be playing on mobile devices.



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:
    • Hind, Ubuntu, Roboto, Montserrat. Check the main_style.css file and font folder 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