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.

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://axiom.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 fullscreen top_panel_above sidemenu_left usermenu_show boxed bg_image_1">



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 HouseRepair 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 0 to 9 for the bg_pattern_9 attribute) below into the <body> tag:

<body class="home page fullscreen top_panel_above sidemenu_left usermenu_show boxed bg_pattern_9">



Social icons

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

<a class="social_icons icon-facebook" target="_blank" href="http://facebook.com"> </a>

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 social_icons icon-vimeo" onclick="window.open('', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;">vimeo</a>

Widgets sidebar

This is how the standard widgets sidebar looks like.



<div id="sidebar_main" class="widget_area sidebar_main sidebar" role="complementary"> <aside class="widgetWrap hrShadow widget widget_archive"> <h3 class="title">Archive</h3> <ul> <li> <a href="#">February <span>2015</span></a> </li> <li> <a href="#">September <span>2014</span></a> </li> <li> <a href="#">August <span>2014</span></a> </li> <li> <a href="#">July <span>2014</span></a> </li> <li> <a href="#">June <span>2014</span></a> </li> <li> <a href="#">May <span>2014</span></a> </li> <li> <a href="#">April <span>2014</span></a> </li> <li> <a href="#">January <span>2012</span></a> </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="2" title="View posts for February 2015"></a> </div> </th> <th class="curMonth" colspan="5"> <a href="#" title="View posts for November 2015">November <span>2015</span> </a> </th> <th class="nextMonth">&nbsp;</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="6" class="pad">&nbsp;</td> <td>1</td> </tr> <tr> <td>2</td> <td class="today">3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> </tr> <tr> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> </tr> <tr> <td>30</td> <td class="pad" colspan="6">&nbsp;</td> </tr> </tbody> </table> </div> </aside> <aside class="widgetWrap hrShadow widget widget_categories"> <h3 class="title">Categories</h3> <ul> <li class="cat-item"> <a href="#">Certificates</a> (5) </li> <li class="cat-item"> <a href="#">House Maintenance</a> (1) </li> <li class="cat-item"> <a href="#">Main Page</a> (3) </li> <li class="cat-item dropMenu"> <a href="#">Post formats &amp; All widgets</a> (12) <ul class="children"> <li class="cat-item"> <a href="#">Post formats fullwidth</a> (12) </li> </ul> </li> <li class="cat-item"> <a href="#">Posts slider</a> (5) </li> <li class="cat-item"> <a href="#">Projects</a> (6) </li> <li class="cat-item"> <a href="#">Skin Default</a> (15) </li> <li class="cat-item"> <a href="#">Timeline example</a> (16) </li> <li class="cat-item"> <a href="#">Uncategorized</a> (19) </li> </ul> </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 class="page_item"> <a href="projects_1_column.html">1 column</a> </li> <li class="page_item"> <a href="projects_2_columns.html">2 columns</a> </li> <li class="page_item"> <a href="projects_3_columns.html">3 columns</a> </li> <li class="page_item"> <a href="features_pages_about_us.html">About Us</a> </li> <li class="page_item"> <a href="appointment.html">Appointments</a> </li> <li class="page_item"> <a href="blog_without_sidebar.html">Blog streampage</a> </li> <li class="page_item"> <a href="contacts.html">Contact Us</a> </li> <li class="page_item"> <a href="features_pages_faq.html">FAQ</a> </li> <li class="page_item"> <a href="projects_4_columns.html">Four columns</a> </li> <li class="page_item"> <a href="index.html">Home 1 (HR)</a> </li> <li class="page_item"> <a href="index2.html">Home 2 (HR)</a> </li> <li class="page_item"> <a href="index3.html">Home 3 (HR)</a> </li> <li class="page_item"> <a href="features_shop.html">Homepage E-Commerce</a> </li> <li class="page_item"> <a href="features_pages_handyman.html">Our Staff Member%u2019s Page</a> </li> <li class="page_item"> <a href="features_pages_page_404.html">Page 404</a> </li> <li class="page_item"> <a href="pricing.html">Pricing Tables</a> </li> <li class="page_item"> <a href="features_pages_protected_page.html">Protected Page</a> </li> <li class="page_item"> <a href="features_pages_service.html">Service / Department Page</a> </li> <li class="page_item"> <a href="features_typography.html">Typography</a> </li> <li class="page_item"> <a href="features_pages_under_construction.html">Under Construction</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">John Doe</span> on <a href="#">Kitchen Design Ideas</a> </li> <li class="recentcomments"> <span class="comment-author-link"> <a href="#" rel="external nofollow" class="url">Team | House Repair</a> </span> on <a href="#">Our Staff Member's Page</a> </li> <li class="recentcomments"> <span class="comment-author-link">admin</span> on <a href="#">Luxury Vinyl Tile Installation</a> </li> <li class="recentcomments"> <span class="comment-author-link">admin</span> on <a href="#">Deck Rescue: Renew Your Deck</a> </li> <li class="recentcomments"> <span class="comment-author-link">John Doe</span> on <a href="#">High Tech Faucet</a> </li> </ul> </aside> <aside class="widgetWrap hrShadow widget widget_recent_entries"> <h3 class="title">Recent posts</h3> <ul> <li> <a href="#">Living Room Staircases</a> <span class="post-date">February 25, 2015</span> </li> <li> <a href="#">Kitchen Design Ideas</a> <span class="post-date">February 25, 2015</span> </li> <li> <a href="#">10 Design Lessons</a> <span class="post-date">February 25, 2015</span> </li> <li> <a href="#">Exterior Design Ideas</a> <span class="post-date">February 25, 2015</span> </li> <li> <a href="#">Interior Design Ideas</a> <span class="post-date">February 25, 2015</span> </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">aside post</a> <a href="#" title="1 topic">audio post</a> <a href="#" title="1 topic">buildings</a> <a href="#" title="3 topics">business</a> <a href="#" title="4 topics">carpentry</a> <a href="#" title="1 topic">chat post</a> <a href="#" title="1 topic">clear</a> <a href="#" title="4 topics">creative</a> <a href="#" title="4 topics">design</a> <a href="#" title="1 topic">events</a> <a href="#" title="6 topics">exterior</a> <a href="#" title="1 topic">exterior design</a> <a href="#" title="2 topics">insurance</a> <a href="#" title="1 topic">interior</a> <a href="#" title="2 topics">kitchens</a> <a href="#" title="1 topic">link post</a> <a href="#" title="4 topics">living rooms</a> <a href="#" title="2 topics">plumbing</a> <a href="#" title="12 topics">post formats</a> <a href="#" title="5 topics">posts slider</a> <a href="#" title="5 topics">press releases</a> <a href="#" title="1 topic">print</a> <a href="#" title="8 topics">print publications</a> <a href="#" title="1 topic">quote post</a> <a href="#" title="3 topics">repair</a> <a href="#" title="31 topics">shortcodes</a> <a href="#" title="2 topics">social</a> <a href="#" title="1 topic">status post</a> <a href="#" title="2 topics">toys</a> <a href="#" title="3 topics">Trial</a> <a href="#" title="2 topics">typography</a> <a href="#" title="11 topics">video</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

<article class="post_content"> <div class="post_info infoPost"> Posted <a href="#" class="post_date date updated" itemprop="datePublished" content="2014-09-15">September 15, 2014</a> <span class="separator">|</span> by <span class="vcard" itemprop="author"> <a href="#" class="post_author fn" rel="author">John Doe</a> </span> <span class="separator">|</span> <span class="post_cats"> in <a class="cat_link" href="#">Skin Default</a> </span> </div> <div class="sc_section columns1_2 post_thumb thumb"> <img class="wp-post-image" width="1150" alt="Deck Rescue: Renew Your Deck" src="images/projects-6.jpg" itemprop="image"> </div> <h1 itemprop="name" class="post_title entry-title">Single post without sidebar</h1> <div class="post_text_area" itemprop="articleBody"> <p>Aenean convallis elementum sollicitudin. Duis suscipit ex eget sagittis finibus. Pellentesque in eleifend enim, eget sagittis erat. Nulla vestibulum lorem elit. Integer eget porttitor felis. Vestibulum sit amet justo urna. Sed quis libero pharetra, fringilla lorem nec, lobortis tortor. Sed aliquet mauris at dolor placerat, quis cursus eros consectetur. Sed ultrices rhoncus metus eget porttitor. Sed vitae tortor ut nisl posuere pharetra ac eget erat.</p> <p>Nulla tempus massa libero, at luctus lorem sagittis sit amet. Maecenas faucibus dapibus nisl, in euismod nunc efficitur vitae. Mauris blandit ut tellus ac eleifend. Maecenas sit amet neque nibh. Donec euismod vestibulum scelerisque. Nunc a mi porta, dignissim lacus eget, vestibulum nisi. Pellentesque tempor massa est. Nam semper sem non mauris posuere feugiat. Donec interdum pretium sapien quis finibus. Pellentesque ultricies elit nec velit vehicula pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae quam justo. Vestibulum eget accumsan est. Nunc nec aliquet velit.</p> <p>&nbsp;</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 social_icons icon-vimeo" onclick="window.open('', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;">vimeo</a> </li> <li> <a href="#" class="share-item social_icons icon-tumblr" onclick="window.open('', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;">tumblr</a> </li> <li> <a href="#" class="share-item social_icons icon-twitter" onclick="window.open('', '_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="share-item social_icons icon-skype-1" onclick="window.open('', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;">skype-1</a> </li> <li> <a href="#" class="share-item social_icons icon-gplus" onclick="window.open('', '_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="share-item social_icons icon-behance" onclick="window.open('', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=480, height=400, toolbar=0, status=0'); return false;">behance</a> </li> </ul> </li> <li class="squareButton light ico"> <a class="icon-eye" title="Views - 337" href="#">337</a> </li> <li class="squareButton light ico"> <a class="icon-comment-3" title="Comments - 1" href="#comments">1</a> </li> <li class="squareButton light ico likeButton like" data-postid="1511" data-likes="0" data-title-like="Like" data-title-dislike="Dislike"> <a class="icon-heart-1" title="Like - 0" href="#"> <span class="likePost">0</span> </a> </li> </ul> </div> <div class="infoPost"> Tags: <a class="tag_link" href="#">press releases,</a> <a class="tag_link" href="#">video</a> </div> </div> </div> </article>

Typography

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

<div class="sc_section sc_alignright columns1_2 margin_bottom_small">
<div class="sc_section sc_alignleft columns1_2 margin_bottom_small">

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 "3 columns" (Projects tab) page.
Please note that animation effects are made with Isotope script. See the screenshots below for more information.







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

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.../contacts.html

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

class="sc_googlemap sc_googlemap_style_2"

<div class="columns1_2 sc_column_item sc_column_item_1 odd first"> <div id="sc_googlemap_2061796807" class="sc_googlemap sc_googlemap_style_2" data-address="San Francisco, CA 94102, US" data-latlng="" data-zoom="16" data-style="default" data-point="" data-description="San Francisco, CA 94102, US" ></div> </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 root directory.../js/vendor/rs-plugin/... folder.

Check the index.html file for more information. Lines #499-#563.



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.





TOC



Check the index3.html file for more information. Lines #26, #28, #29.





Countdown Counter



Files responsible for both Countdown counters (Home 3 page and Under Construction page) functionality:

root directory.../js/vendor/flipclock/...
root directory.../js/vendor/jquery.countdown.min.js
root directory.../js/vendor/jquery.countdown-plugin.min.js
root directory.../index3.html root directory.../features_pages_under_construction.html





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:
    • Rufina, Sintony. Check the style.css file 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://Axiomthemes.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.

Axiomthemes