Family - One page HTML template

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 - Thanks so much!

Theme related issues take priority over modification and if you have some questions related to basic HTML, JavaScript or CSS editing please, use Google search or visit first. You will need at least basic knowledge of HTML/CSS to edit this theme.

This template is based on a responsive structure that looks nice on any PC or mobile device.
It has the flexibility to go mobile like a champ. You can really easily customize all parts of your website or build your own.
You don't need to start from scratch. Just use an existing page I have created and modify it to fit your needs.
This simple documentation will help you to find the answers quickly. Perform a browser search by pressing "ctrl+F5". Paste what you are looking for into a "Find in Page" field and click "Enter".
Trying to locate/replace text, styles or code in a theme? Use "Find in Files" search command that is commonly persist in any decent text editor. It will save you hours of searching.
Get an error message? Don't worry and try a Google search for a quick fix. It's very possible that someone else has already faced with it too and provided a solution.
In most cases plug-ins are the culprits when a website is down or doesn't work as expected. Always disable third-party plug-ins in the first turn, if you encounter an error you can't solve.
Don't forget to re-check our live demo for layouts, usage ideas and sample code


General content structure

Our template uses Waypoints jQuery plug-in to navigate between content sections.

General content structure should be:


    <section data-hash="section_name">...</section>


Page loading

We suggest you to keep page loading markup for every page. You can delete or comment it out in case it doesn't fit your needs. No modifications in JavaScript are required.


<div class="loader"><div class="bar"><strong>FAMILY</strong><span class="progress"><span>loading...</span></span></div></div>


Main menu and sections

Every section has data attribute "data-hash", so the main menu can locate it

   <section data-hash="anchor_name"></div>

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><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>
         <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>



Every section that needs a logical waypoint for deep linking should have a class "waypoint".


Content Animation

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

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.


Contact form

This template includes AJAX contact form. You need to edit next file inc/send.php to apply recipient's e-mail.


Google Map

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"


Twitter feed

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


Revolution slider

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.

HTML Markup:

<section class="parallax-section">
  <div class="parallax-holder">
    <div class="paralayer" style="background-image:url('img/parallax.jpg')" data-paraspeed="0.5"></div>
   <div>...content here...</div>



List of CSS files with short description:

  1. bootstrap.css - main CSS file for Bootstrap framework
  2. styles.css - main CSS file containing page elements.
  3. font-awesome.min.css - scalable vector icons
  4. magnific-popup.css -  CSS styles for Responsive jQuery Lightbox Plug-in
  5. retina.css - CSS styles of graphics for HDPI devices
  6. media.css - media queries CSS styles for devices
  7. animated.min.css - CSS animation framework


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.


All CSS files are well commented.

This template  imports 20 Javascript files:

  1. modernizr.min.js - JavaScript library that detects HTML5 and CSS3 features in user’s browser.
  2. jquery.min.js - is a JavaScript library that is greatly reduces the amount of code that you must write. For more information, please visit
  3. script.js - main JavaScript file with all init functions.
  4. isotope.min.js - includes filterable and sortable portfolio layouts.
  5. jquery.themepunch.revolution.min.js & - slider Revolution Responsive jQuery plug-in.
  6. jquery.magnific-popup.min.js - light and responsive lightbox script with focus on performance.
  7. jquery.flexslider-min.js - responsive jQuery slider plug-in
  8. jquery.cycle2.min.js & jquery.cycle2.swipe.min.js - versatile slideshow plug-in for jQuery.
  9. jquery.validate.min.jsjQuery plug-in that makes simple client side form validation trivial, while offering lots of options for customization.
  10. jquery.velocity.min.js - Accelerated JavaScript animation.
  11. parallax.min.js - custom parallax jQuery plug-in
  12. smoothScroll.min.js - smooth window scroll library for some browsers.
  13. superfish.min.js - jQuery plug-in for drop-down menus.
  14. tweets.min.js -  Twitter JavaScript functions.
  15. waypoints.min.js - jQuery plug-in that helps easily execute a function whenever you scroll to an element.
  16. bootstrap.min.js - some Bootstrap JavaScript modules.
  17. imagesloaded.pkgd.min.js - Detects when images have been loaded with JavaScript.
  18. jquery.countTo.min.js -  jQuery plug-in that will count up (or down) to a target number.


You can edit array of loading JavaScript files at top of script.js . Loader supports relative and absolute path for files. 

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.

Text change

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 change

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.

Link layers

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.

Duplicate layer

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.

  1. jQuery
  2. Modernizr
  3. Waypoints
  4. Cycle2
  5. Flexslider
  6. Isotope
  7. Velocity
  8. Superfish
  9. Validate
  10. Bootstrap
  11. Font awesome
  12. Animate.css

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 -

Once again, thank you so much for purchasing this theme. Hope, you will enjoy it!

Olegnax Team