Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file please, feel free to post your question on our Help forum - http://help.olegnax.com. Thanks so much!
Our template uses Waypoints jQuery plug-in to navigate between content sections.
General content structure should be:
<html> <body> <header>...</header> <section data-hash="section_name">...</section> </body> </html>
<div class="loader"><div class="bar"><strong>FAMILY</strong><span class="progress"><span>loading...</span></span></div></div>
Every section has data attribute "data-hash", so the main menu can locate it
Every menu section has its own anchors.
<ul class="sf-menu superfish-li-relative"> <li class="current-menu-item"> <a href="#welcome">welcome</a> </li> <li><a href="#services">services</a></li> <li class="dropdown"> <a href="#about">about us</a> <ul class="submenu"> <!--First level submenu--> <li><a href="#about">About family</a></li> <li><a href="#meet_team">Meet the team</a></li> <li><a href="#skills">Our skills</a></li> <li><a href="#awards_block">Awards</a></li> </ul> </li> <li><a href="#clients">clients</a></li> <li><a href="#portfolio">portfolio</a></li> <li><a href="#blog">blog</a></li> <li><a href="#contacts">contacts</a></li> <li class="menu-item-border"><a href="#">Purchase</a></li> </ul>
Every section that needs a logical waypoint for deep linking should have a class "waypoint".
Template uses animation.css library for content appearing effects. You can add next attributes for any tag:
data-animation - attribute that contains animation effect and speed. Check author page for list of params http://daneden.github.io/animate.css/
data-delay - attribute with delay value before animation starts. Values range is 0-1
We are using Isotope jQuery plug-in for portfolio . You can check the author's page for details.
We have designed custom AJAX loading for adding more items in a portfolio listing and also for a single portfolio item preview.
You can check our preview as an example.
Testimonials slider is based on a default Cycle2 jQuery plug-in with additional Swipe module. More details can be found on author's page.
Uses Flexslider2 default options. More details can be found on author's page.
This template includes AJAX contact form. You need to edit next file inc/send.php to apply recipient's e-mail.
Google map is pointed to container with id "mapheader". You can set pin address by adding attribute to a map container, for example:
data-address="100 Market St, Sydney NSW, Australia"
You need to edit twitter/gettweets.php file and add valid Twitter OAuth info.
Don't know where to get? Please, visit this link: Authenticating for Twitter
Our template includes famous slider Revolution. You can find additional documentation in a documentation/revslider/index.html file.
We have developed our own parallax jQuery plug-in for smooth and efficacious background parallax effect.
<section class="parallax-section"> <div class="parallax-holder"> <div class="paralayer" style="background-image:url('img/parallax.jpg')" data-paraspeed="0.5"></div> </div> <div>...content here...</div> </section>
List of CSS files with short description:
If you would like to edit a specific section of your website, simply find the appropriate label in a CSS file, then scroll down until you find the appropriate style and change it.
Some Photoshop basics
Scale (size change)
To change size of the buttons, price boxes, etc..., choose layer that should be changed, press "e;ctrl+T"e; and holding left mouse button pressed drag the transformation handles. To change the whole button or pricing plan sizes choose folders. You can change size to all of the buttons and pland at a time if you link them together.
You can click on top of the text with the Type tool (T). You know your cursor is in the right place when the Type tool's cursor changes to an "I-beam." However, if you click in the wrong place, Photoshop will create a new type layer; in this case, press the Escape key to cancel the new layer. You can change text parameters such as size, kerning etc. in "Character" window, Main menu: Window / Character.
Shape is a fill layer linked to a vector mask. You can easily change the fill to a different color, a gradient, or a pattern by editing the shape's fill layer. You can also edit the shape's vector mask to modify the shape outline, and apply a style to the layer.
Visible invisible layers
To hide/unhide layer click on eye icon left to layer name in layers window. To open layers window go main menu at the top of interface Window/Layers.
Add / hide effect
Below the layer name can be effects. If there is arrow right to the layer name that means that this layer has effects. Click on arrow to show/hide effects list.
To hide or show effects on layers click on eye icon left to effect name in layers window.
Linking allow you move and change size of all linked layer at a time. Some layers are linked together. To break link choose layer and then press on chain icon between the eye icon and layer name. Do this to all the layers you want to link or unlink.
Go to your "Layers" palette, and click on the layer that you want to duplicate.
Go to "Layer" and select duplicate layer. In the pop-up window that opens, give the new layer a name. If the layer you are copying is called "My Layer," call the duplicate something that will make it easily identifiable, such as "My Layer Copy." Click "OK."
Multiple layers selection
Press and hold ctrl to select multiple layers.
As it was said at the beginning, we'd be glad to help you with any kind of questions related to this theme. No guarantees, but we'll do our best to assist.
Please, do not hesitate to contact us via our help forum - http://help.olegnax.com.
Once again, thank you so much for purchasing this theme. Hope, you will enjoy it!