LifeGuide - Docs

# LifeGuide HTML template

Created: 13.12.2016
By: MWTemplates
Email: support@modernwebtemplates.com

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email us via my user page contact form. Thanks so much!

## Download Package Content

You can find the following folders in the download package

- "documentation" folder contains this documentation.
- "HTML" - folder contains actual template with all of HTML, JS and PHP files. It's content will be displayed below.
- "PSD" folder contains all of PSD files.

### HTML folder content

- "css" folder contains CSS files. You can find out more about CSS files in HTML Structure section of this documentation.
- "fonts" folder has all of the custom fonts that are used in this template, such as icon fonts, font awesome, social icons etc.
- "images" folder contains all of the images that are used on the template pages. It has several subfolders:
  - "events" folder contains images for events page.
  - "gallery" folder contains images for isotope carousel galleries and other subpages.
  - "parallax" folder contains background images for parallax sections.
  - "partners" folder contains images for partners carousel.
  - "shop" folder contains images for shop pages.
  - "team" folder contains photos of team members.
- "img" folder contains all of the images that are used in CSS files for template styling (such as patterns, preloader etc).
- "js" folder contains javascript files that are used in this template. It has "vendor" subfolder that containss all of the thirdpart plugins and libs. Go to Sources and Credits section to get the list of the thirdpart libs and plugins.
- "mailchimp" folder contains PHP scripts for MailChimp subscribe widget.
- "twitter" folder contains JS and PHP scripts for Twitter widget.

## HTML Structure

This HTML Template is based on Twitter Bootstrap v3.3. It is compatible with a IE9 browser and all other modern browsers.

It has several main section classes that may or may not be present on the page (depending on certain page). You can use it depending on your needs. They are:

- "ls" - light_section - section with white background.
- "ls ms" - light_section muted_section - section with light grey background.
- "ds ms" dark_section muted_section - section with dark grey background.
- "ds" - dark_section - section with dark color background.
- "cs" - color_section - section with the main template color background.

Also there are some of predefined unique sections (class and id attributes) that you can use with classes above:

- "page_topline" class - contains some contact information, social icons etc.
- "page_toplogo" class - contains logo in various header layouts.
- "page_header" class - contains site Main Menu.
- "intro_section" class - contains homepage main slider.
- "page_map" class - contains google map.
- "page_breadcrumbs" class section - contains site navigation (breadcrumbs).
- "page_content" class section - used for main content section.
- "page_footer" class section has footer widgets.
- "page_copyright" class section contains copyright information.
- "preloader" div element that is located at the bottom of HTML page is a page preloader. Remove it if you do not need a preloader on your pages.

## CSS Files and Structure

There are four main CSS files in this HTML Template. The first one is a standard Bootstrap v3 CSS file. The second CSS file is "animation.css" library, which contains various animation classes that are used in this template.

The third file is "main.css" and it contains all of the specific stylings for the pages. The file is separated into the following sections:

- bootstrap overrides - Here we override some of the predefined bootstrap styles.
- vertical margins and paddings - Here we set up vertical margins and paddings for the main sections of our HTML Temlpate.
- general styles - In this section we set up a base template styles, such as links color, general section styles.
- icons - styles for icons, inside buttons, headings and paragraphs
- buttons - styles for template buttons.
- common sections styles - common styles for general template sections:
  - light section - .ls
  - grey section - .ls.ms
  - dark section - .ds
  - darkgrey section - .ds.ms
  - color section - .cs
- Subpages - styles for template subpages.
- Boxed layout - styles for boxed version of the template.
- Header - styles for template header.
- Footer - styles for template footer.
- Intro Slider - styles for template header.
- main menu (min 768px) styles - styles for desktop version of the main menu.
- main menu mobile styles - styles for mobile version of the main menu.
- widgets - In this sections we styled all the major widgets.
- shortcodes - In this section we styled all of template's shortcodes.
- utilities - some helper classes for margins and paddings etc.
- plugins - Styles for plugins that we used in our template:
  - Owl Carousel
  - FlexSlider
  - prettyPhoto
  - Easy pieChart
  - toTop
  - Isotope Portfolio

Fourth file is "fonts.css" that has styles for all of our icon fonts that we used in our template.

## Changing template layout

<0p>To change template layout from wide to boxed you need to do two things:

1. add "boxed" class to div with ID "canvas" HTML element
2. add "container" class to div with ID "box_wrapper"

Example:

    <div id="canvas" class="boxed">
    	<div id="box_wrapper" class="container">
    		...
    	</div>
    </div>

To add pattern in boxed layout just add one of the following predefined CSS classes to div with ID "canvas" HTML element:

1. pattern1
2. pattern2
3. pattern3
4. pattern*

Example:

    <div id="canvas" class="boxed pattern2">
    	...
    </div>

To add top and bottom margins for boxed version just add class "top-bottom-margins" for div with id "box_wrapper"

Example:

    <div id="canvas" class="boxed">
    	<div id="box_wrapper" class="container top-bottom-margins">
    		...
    	</div>
    </div>

### Changing the main color

If you want to change the main color for this template, just replace all instances of main color hex code with hex color value that you want inside the "main.css" file.

Also you can change "main.css" to "main2.css" or "main3.css" in your HTML code inside "head" which are the same with the exception of predefined colors within it.

### Changing Light and Dark versions

You can change a class for any section inside "#box_wraper" div to change your template version from light to light grey or dark.

Available section classes are:

- ls - light background section
- ls ms - light section, muted section (light grey background)
- ds - dark background section
- ds ms - dark muted section (dark grey background section)
- cs - background color section

Examples:

    <section class="ls" id="content">
    	...
    </section>

You can change to:

    <section class="ds ms" id="content">
    	...
    </section>

### Changing page preloader

To change page preloader just replace preloader.gif file which is in img directory to any other GIF file.

## JavaScript Files

Following files are located in "js" subfolder

- Plugins:
- modernizr-2.6.2.min.js detecting browsers features.
- jquery-2.2.4.min.js is a popular JavaScript library.
- bootstrap.min.js is a standard Twitter Bootstrap library.
- respond.min.js is required for Twitter Bootstrap v3 work in older browsers.
- html5shiv.min.js adds HTML5 compatibility for older browsers.
- superfish.js is a script that enables a dropdown menu.
- hoverIntent.js is a component for superfish menu.
- jquery.flexslider-min.js is a jQuery plugin for main and bottom sliders.
- jquery.isotope.min.js is a jQuery plugin for filtrable gallery.
- jquery.prettyPhoto.js is a jQuery plugin for displaying lightbox content.
- jquery.ui.totop.js is a jQuery plugin for toTop button.
- jquery.easing.1.3.js is a jQuery plugin for different types of animation
- jquery.scrollTo-min.js and jquery.localscroll-min.js needed for smooth single page navigation.
- jquery.easypiechart.min.js is a jQuery plugin that uses the canvas element to render simple pie charts for single values.
- jquery.jflickrfeed.min.js plugin makes it easy to pull Flickr feeds and display them on your site.
- jquery.tweet.min.js plugin enables a twitter widget on your site.
- owl.carousel.min.js is a jQuery carousel plugin for “partners” section
- jquery.parallax-1.1.3.js is used for parallax backgrounds.
- jquery.appear.js is used to determine whether the HTML element is inside the browser's viewport
- jquery.countTo.js is used for teasers with counter
- jquery.countdown.js is used for "coming soon" counter
- Template Scripts:
- plugins.js contains some of our custom scripts.
- main.js inits all the basic behavior for this template.
- switcher.js has a code for style switcher. Just remove this file from HTML code if you do not need style switcher in your production

All of JS files (except "main.js" file and "switcher.js" file) are compressed in a single "compressed.js" file for best perfomance.

If you do not want to use "compressed.js" file, you can replace following code at the bottom of your page:

    	<script src="js/compressed.js"></script>
    	<script src="js/main.js"></script>

with this one:

    	<script src="js/vendor/jquery-2.2.4.min.js"></script>
    	<script src="js/vendor/bootstrap.min.js"></script>
    	<script src="js/vendor/jquery.appear.js"></script>
    	<script src="js/vendor/jquery.hoverIntent.js"></script>
    	<script src="js/vendor/superfish.js"></script>
    	<script src="js/vendor/jquery.easing.1.3.js"></script>
    	<script src="js/vendor/jquery.ui.totop.js"></script>
    	<script src="js/vendor/jquery.localscroll-min.js"></script>
    	<script src="js/vendor/jquery.scrollTo-min.js"></script>
    	<script src="js/vendor/jquery.parallax-1.1.3.js"></script>
    	<script src="js/vendor/jquery.easypiechart.min.js"></script>
    	<script src="js/vendor/bootstrap-progressbar.min.js"></script>
    	<script src="js/vendor/jquery.countTo.js"></script>
    	<script src="js/vendor/jquery.prettyPhoto.js"></script>
    	<script src="js/vendor/jquery.countdown.min.js"></script>
    	<script src="js/vendor/isotope.pkgd.min.js"></script>
    	<script src="js/vendor/owl.carousel.min.js"></script>
    	<script src="js/vendor/jquery.flexslider-min.js"></script>
    	<script src="js/vendor/jflickrfeed.min.js"></script>
    	<script src="js/vendor/jquery-ui.min.js"></script>
    	<script src="js/vendor/price-slider.min.js"></script>
    	<script src="js/vendor/jquery.cookie.js"></script>
    	<script src="twitter/jquery.tweet.min.js"></script>
    	<script src="js/plugins.js"></script>
    	<script src="js/main.js"></script>

## Setup Widgets and Shortcodes.

### Widgets and Shortcodes that need to be setup are:

- Google Map
- Flickr
- Twitter
- Subscribe
- Contact form
- Search

#### To setup Google Map do the following:

First of all, you need to get a Google map API key by following this link:

Go to https://developers.google.com/maps/documentation/javascript/get-api-key#key,click button "GET A KEY" and follow instructions from Google.

Then scroll to the bottom of your contact page and find this code:

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXX"></script>

and replase existing key with your API key.

To provide a Google map address, title, description and marker image do the following:

- Scroll to section with 'id="map"' or class="page_map" attribute and add or replace value of data-address attribute with your address.
- Then find inside map section div with class "map_marker_description" and edit following tags:
  - Replace "Map title" text in H3 tag to provide map title.
  - Replace "Map description text" text in P tag to provide map description.
  - Replace "src" attribute of IMG tag with class "map_marker_icon" to change a map marker or remove IMG tag if you do not need a custom map marker.

    <section class="page_map" data-address="sydney, australia, Liverpool street">
    	<!-- marker description and marker icon goes here -->
    	<div class="map_marker_description">
    		<h3>Map Title</h3>
    		<p>Map description text</p>
    		<img class="map_marker_icon" src="images/map_marker_icon.png" alt="">
    	</div>
    </section>

#### To setup a Flickr Widget do the following:

- Go to http://idgettr.com/ and search for your Flickr ID
- Edit your "main.js" file. Just replace ID with your Flickr ID

#### To setup a Twitter Widget do the follofing:

- Go to https://dev.twitter.com/apps and register a new application to receive Consumer Key, Consumer Secret Word, User Token and User Secret Word
- Edit lines from 27 to 36 of your "twitter/index.php" file. Place your secret keys and words onto the corresponding placeholders.
- Edit "number of tweets" and "username" in your "main.js" file.
- Delete cache xxx.json file in "twitter" folder if it exists.

#### To setup a MailChimp Subscribe form do the following:

Edit the "mailchimp/store-address.php" file:

Line 19: replace "your_apikey" with an API Key retrieved from here:

http://admin.mailchimp.com/account/api/

Line 23: replace "my_list_unique_id" with the List Unique Id obtained by going to: http://admin.mailchimp.com/lists/.

Click the "settings" link for the list - the Unique Id is at the bottom of that page.

#### To setup a Contact Form do the following:

- Edit lines from 7 to 22 of your "contact-form.php" file. Place your email and message text.

#### To setup a Serch widged do the following:

- Edit lines from 1 to 7 of your "search.php" file. Place your message text at appropriate variables.

## Setup Animation for any HTML elements

To set up animation for the single element, just add class "to_animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

#### Available values for "data-animation" attribute:

- fadeIn
- fadeInLeft
- fadeInUp
- fadeInRight
- fadeInDown
- fadeInUpBig
- fadeInDownBig
- fadeInLeftBig
- fadeInRightBig
- slideRight
- slideUp
- slideLeft
- slideInDown
- slideInLeft
- slideInRight

- expandUp
- slideExpandUp
- expandOpen
- bigEntrance
- hatch
- tossing
- pulse
- floating
- bounce
- pullUp
- pullDown
- stretchLeft
- stretchRight
- moveFromLeft

## This template has the following PSD files:

1.1_home.psd
1.2_home_dark.psd
1.3_home_boxed.psd
2.1_about.psd
2.2_404.psd
2.3_testimonials.psd
2.4_typography.psd
2.5_services.psd
2.6_single service.psd
3.1_blog.psd
3.2_post.psd
4.1_gallery_regular.psd
4.2_gallery_fullwidth.psd
4.3_gallery_extended.psd
5.1_shop.psd
6.1_contacts.psd
7.1_make_an_appointment.psd

## Following images are used in this template:

http://depositphotos.com/3943744 http://depositphotos.com/3943752 http://depositphotos.com/4288245 http://depositphotos.com/4580219 http://depositphotos.com/4581376 http://depositphotos.com/4597297 http://depositphotos.com/5453262 http://depositphotos.com/5821964 http://depositphotos.com/10463494 http://depositphotos.com/11734686 http://depositphotos.com/11734738 http://depositphotos.com/15691309 http://depositphotos.com/19511211 http://depositphotos.com/23151558 http://depositphotos.com/23151598 http://depositphotos.com/23719931 http://depositphotos.com/24559657 http://depositphotos.com/25119287 http://depositphotos.com/26584765 http://depositphotos.com/48053069 http://depositphotos.com/57950943 http://depositphotos.com/59239489 http://depositphotos.com/60939221 http://depositphotos.com/60939343 http://depositphotos.com/60939343 http://depositphotos.com/70701459 http://depositphotos.com/71986563 http://depositphotos.com/77271420 http://depositphotos.com/77500196 http://depositphotos.com/92188126 http://depositphotos.com/93775868 http://depositphotos.com/94296546 http://depositphotos.com/94329372 http://depositphotos.com/106361938 http://depositphotos.com/119526894 http://depositphotos.com/125923762

## Credits and Sources

As we mentioned earlier, we used Twitter Bootstrap v3 as CSS framework and HTML5 Boilerplate for this template.

### Fonts:

- http://www.google.com/fonts/ - Google WebFonts
- http://www.socicon.com/ - Social Icons Font
- http://fontawesome.io/ - Font Awesome
- http://icomoon.io/ - teaser rt-icons font

### Template Scripts

- modernizr-2.6.2.min.js detecting browser's features.
- jquery-2.2.4.min.js is a popular JavaScript library.
- bootstrap.min.js is a stantard Twitter Bootstrap library.
- respond.min.js is required for working Twitter Bootstrap v3 in older browsers.
- html5shiv.min.js adds HTML5 compatibility for older browsers.
- superfish.js is a script that enables a dropdown menu.
- hoverIntent.js is a component for superfish menu.
- jquery.flexslider-min.js is a jQuery plugin for the main and bottom sliders.
- jquery.isotope.min.js is a jQuery plugin for filtrable gallery.
- jquery.prettyPhoto.js is a jQuery plugin for displaying lightbox content.
- jquery.ui.totop.js is a jQuery plugin for toTop button.
- jquery.easing.1.3.js is a jQuery plugin for different types of animation
- jquery.scrollTo-min.js and jquery.localscroll-min.js needed for smooth single page navigation.
- jquery.easypiechart.min.js is a jQuery plugin that uses the canvas element to render simple pie charts for single values.
- jquery.jflickrfeed.min.js plugin makes it easy to pull Flickr feeds and display them on your site.
- jquery.tweet.min.js plugin enables twitter widget on your site.
- owl.carousel.min.js is a jQuery carousel plugin for “partners” section
- jquery.bxslider.min.js is a jQuery slider plugin
- jquery.nicescroll.min.js is a plugin used to replace browser's standard scroll bar
- jquery.fractionslider.min.js is a great slider plugin for the main slider
- jquery.parallax-1.1.3.js is used for parallax backgrounds.
- jquery.appear.js is used to determine whether the HTML element is inside the browser's viewport
- jquery.countTo.js is used for teasers with counter
- jquery.cookie.js is used for store cookies information in the template

### Images

- depositphotos.com
- danielezedda.com
- foodiesfeed.com
- gratisography.com
- magdeleine.co
- picjumbo.com
- picography.co
- unsplash.com
- freepsdfiles.net
- free-logo-design.net

NOTE: The images used in the template are not included in the main download file, they are only for the preview purpose.

## Documentation

- Package Content
- HTML Structure
- CSS Files and Structure
- TEMPLATE CUSTOMIZATION
  - Changing template layout
  - Customizing Colors And Versions (light and dark)
  - Changing page preloader
- JavaScript Files
- Setup Widgets and Shortcodes
  - Google Map
  - Flickr
  - Twitter
  - Subscribe Mailchimp
  - Contact form
  - Search
- Setup Animation for Elements
- PSD Files
- Template images
- Sources and Credits

© copyright 2016 all rights reserved