Inspired living
  1. Start
  2. Files and folders structure
  3. Grid system
  4. Font Icons
  5. Color scheme
  6. How To
  7. Dummy Images/placehold
  8. Support policy
  9. Special Credits goes to

LIFEAID

Responsive HTML5 Template

Multipurpos, Charity, non profit, NGO, Fundraising Template

Thank you for purchasing 'Our Degital product' If you have any questions that are beyond the scope of this help file, please feel free to submit a ticket at our Support Forum. Thanks so much!

This template is a full functional HTML Template designed & developed for Multipurpos, Charity, non profit, NGO, Fundraising. It is fully responsive template based on Twitter Bootstrap updated framework that makes it available for all screen sizes from the bigger ones to smartphones. Its not only responsive whereas it is retina ready also, now no blurry images on your HiDPI and retina devices.

How to use ?

This template is very easy to update and modify, it will adapt your website and brand in no time. Steps for modification and updating are described step by step in this exclusive documentation.

Files and folders structure


Whole template is divided in to several folders and their content defines by the folder names easily. all the css files in the css folder, and all the js files in the js folder. but here some basics essential files are mention. other all is for plugins, you can fine in the css & js folder.

Clean Code Structure


Grid system


This template is based upon Twitter Bootstrap css framework that is very easy to use and adapt. It follows the mobile first approach to make the website readily available for all devices and screen sizes. Bootstrap grid is based upon 12 columns that are well defined in the bootstrap.css file inside the css folder. You can get to know about the grid system in detail from this url http://getbootstrap.com/css/#grid

Icons font


In this template we used ionicons, for its icons requirement and no images has been used for any icon. A complete list of icons along with the class names can be found here: http://fontawesome.io/

To use an icon on any page of this template use the below code:

All icons class name will always start with the ion -ion . There are several sizes for icons are predefined in the ionicons.min.css inside css folder.

Changing color schemes for whole template


All pre-made color's file can be found inside css/colors folder of the template directory. there is already 9 beautiful colors file but if you want to change a new color scheme can be defined very easily just copy any of the pre-made color css file and keep it inside colors folder and name it as you like then just replace the color hex code in the file to your liking. Afterwards you will have to replace the name of the css in the head of each page like below:s

<link rel= "stylesheet" href=" color.css "/>

How to

How to enable / disable sticky header ?

header sticky or non sticky

the below mention code is the sample for change the setting for header sticky or non sticky

<header class= "fixed" > <⁄header>
  • class "parallax" is the defaut
  • use "data-velocity="0.3" for scroll speed
  • for change the layer opacity use the classes "low-opacity" "medium-opacity" "high-opacity"
  • for changing the layer color use "blackish" "whitish" "greenish"

How to change the Header styles & color ?

header styles

the below mention code is the sample for change the setting for header styles, like dark, light, transparent etc.

<header class="" > </header>
<header class="style2" > </header>
<header class="style3" > </header>
<header class="style4" > </header>
<header class="style5" > </header>
<header class="style6" > </header>
<header class="transparent" > </header>
<header class="transparent black" > </header>
<header class="full-transparent" > </header>
  • header without any class "" is the defaut

How to change the footer color ?

footer color light and dark

the below mention code is the sample for change the setting for header sticky or non sticky

<footer class="strip" > </footer>
<footer class="strip light " > </footer>
  • class "strip" is the defaut class with dark color
  • class "strip light" is for the light color
  • if you will remove the class "strip" the above display triangle will be disable

How to parallax fixed background or scroll ?

parallax bg setting
<div class= "parallax " data-velocity="0.6"> <⁄div>

the above code is the sample for changing the required color, size and click effect.

  • class "parallax" is the defaut
  • use "data-velocity="0.3" for scroll speed
  • for change the layer opacity use the classes "low-opacity" "medium-opacity" "high-opacity"
  • for changing the layer color use "blackish" "whitish" "greenish"

How to change the accordions style & Color ?

accordion styles

the below mention code is the sample for changing the style of accordions.

<div class= "ziehharmonika "> <⁄div>
<div class= "ziehharmonika style2 "> <⁄div>
<div class= "ziehharmonika style3 "> <⁄div>
<div class= "ziehharmonika style4 "> <⁄div>
<div class= "ziehharmonika style5 "> <⁄div>

How to change the buttons style & color ?

button styles

the below mention code is the sample for changing the required color, size and click effect.

<a class= "button small-btn pink " data-ripple=""  > <⁄a>
  • class "button" is the defaut
  • class "xl-btn" "lg-btn" "med-btn" "small-btn" is for change the sizes
  • for changing the click hover effect. just remove the {"data-ripple=""} from the anchor tag
  • for changing the color. just change the color names(color name list is under below this page)

pink{background:#f06292; }

purple{background:#ab47bc ;}

red{background:#f44336;}

red-dark{background:#b71c1c;}

blue{background:#2196f3;}

green{background:#43a047;}

lime{background:#cddc39;}

dark{background:#333;}

lime-dark{background:#827717;}

yellow{background:#ffb300;}

orange{background:#ff9100;}

deep-orange{background:#ff8a65;}

gray{background:#9e9e9e;}

blue-grey{background:#b0bec5;}

brown{background:#5d4037;}

How to change the contact form styles ?

contact form styles

the below mention code is the sample for changing the required style

<div class= "contact-form black "> <⁄ div>
<button class= "right" type= "submit "> <⁄button>
  • class "contact-form" is the default style
  • class "contact-form black" for the dark style
  • class "dark-bg" for gray background and white input boxes
  • use class "right" for float the submit button to right side

How to change the services styles ?

services styles

the below mention code is the sample for changing the required style

<div class= "gap blackish medium-opacity paralex-style "> <⁄div>
<div class= "gap gray-bg "> <⁄div>
<div class= "services box-style "> <⁄div>
  • the default style have no classes as above mention

How to change the services styles ?

heading/title styles

the below mention code is the sample for changing the required style

<div class= "big-heading "> <⁄div>
  • "big-heading" with h2 child is simple style
  • "heading-1" with h4 child is title style 2
  • "heading-2" with h4 child is title style 3
  • "heading-3" with h4 child is title style 4

How to change the side and footer widget ?

widgets for footer and sidebar

the "widget" is the default class. you can just pick the complete widget div with content and past in the footer tag & for sidebar paste the widget in aside tag. the style will b apply automatically.

Changing Dummy image placeholders to real images


this template doesn't come with images that you see in demo and in the downloaded files all images except the logo and some other graphics all images are replace with custom size place holders available from http://placehold.it/

You can easily repace these holders with your real images by just putting the same size image that you find in the live demo of the placeholder or replace the image in the folder  "images/resources/imagename.jpg" in the HTML.

mean just replace the image in the image folder with the current name and size.

Support Policy

If there is anything we can help you with, please let us know. Whether you have discovered a problem or need help customizing our product to fit your needs, we are always happy to help out and point you into the right direction. Simply send an email to [email protected]

In order to be able to provide you with the best possible service, we do not offer customer support through the comments section on themeforest and we will direct you to contact [email protected] . should you seek assistance there. This ensures that no support tickets are forgotten and that all members of the support staff are aware of your issue, resulting in the fastest and best possible service.

We may occasionally ask you to provide your license certificate on themeforest to verify your purchase.

Account Details

If necessary to help you solve a problem we may request that you email us your login details and/or provide us with your hosting account details as well in order to identify problems that are related to your web server environment. Please accept that without those details, we may not be able to help you in some cases.

Extend of our Support

We generally only provide support for our own product. While we will usually make attempts to assist you with other issues as well, we will likely have to decline support if the issue exceeds the scope of our knowledge and experience.

Please accept that we generally do not provide support for other third party products except in cases where addressing an issue takes only little time. We recommend that you contact support and ask if you are unsure whether a particular case is covered by our support policy.

Customization

Most customization requests we receive do not require much time, and we are happy to assist whenever that is the case. If, however, your request would result in more work, we will have to restrict our support to giving you basic guidance, or offer you our paid customizations services.

Credits

Our life is made much easier we have special thanks to the following

Please be aware the we do not provide customer support through the comments section on themeforest and will redirect all questions to our support team. This is to ensure a consistent customer service experience as only through our helpdesk we can track your request and make sure that it is dealt with in a timely manner.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

wpkixx