Menu
Welcome & Thank You
Thank you for choosing to use Infinity, in this documentation you will find a wide array of information pertaining to the template files, we have done our best to make sure that it is easy to use and not confusing, however if you do run into trouble we have included some tips to help you hit the floor running.
Tips
Use the Google Chrome element inspector, or firebug to view live HTML code. Start with some help, use a template page to get your bearings. Something just not working correctly, try a quick Google search of your problem.
Getting Started File Structure
  • css/
    • click/
    • cover/
    • devices/
    • fonts/
    • landing/
  • fonts/
  • img/
    • /bg-slider
    • /cover
    • /devices
      • /iphone
      • /nokia
    • /landing
      • /gallery
      • /testimonials
    • /stores
    • /vid
  • js/
    • /cover
    • /landing
  • php/
    • /php-mailer
  • vendor/
    • /anmated-text
    • /click-feedback
    • /full-screen-video
    • /lightbox
    • /push-menu
  • vid/
  • cover-bg-image.html
  • cover-bg-pattern.html
  • cover-bg-slider.html
  • cover-bg-video.php
  • custom.css
  • landing.html
  • style.css
JavaScript
Throughout the template you will notice we use JavaScript for various features, below are a few examples of how you can customize these files.

Website Loader js/main.js The website loader can be amended so that its delay is longer or shorter, to do this simply change the following code Line: 9 jQuery(".preloader").delay(4000).fadeOut("slow");

Change the delay .delay(4000) to .delay(1000) this will shorten the of delay the website loader and/or its content.

WOW Animations js/main.js WOW Animations are initialized and turned on by default, if for any reason you decide not to use animations you can turn them off below. Line: 40 new WOW().init();

Change the code from .new WOW().init(); to /*new WOW().init();*/ this will comment out the code preventing it from being initialized.
HTML
Infinity has been built on the twitter bootstrap grid system, this allows us to set up a wide array of columns in our template below is an example. 

<div class="row">
<div class="container">
	<div class="col-md-3"></div>
	<div class="col-md-9"></div>
</div>
</div>
CSS
We have organised our CSS so that its simple for you to view, edit and create your very own style sheets, for example see below.

  • style.css (General template style sheet)
  • custom.css (You may use this to make css additions or overrides)
  • /cover (You may use this to make css additions or overrides)
    • bg-image.css (Individual cover style sheets)
  • /landing (You may use this to make css additions or overrides)
    • landing.css (Landing style sheet)
Customization Fonts
You have full control over which fonts you wish to use, we currently have embedded google fonts, to make a change to these, please view the head of the file 
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,200,100,500,600,700,800,900' rel='stylesheet' type='text/css'>
To make a change to, or add additional fonts, you'll want to visit http://www.google.com/webfonts, choose yourself a font and use the generated code they provide you with.
Icons
You have the opportunity to use a huge array of icons, thanks to the @font-face icon set provided by Font Awesome 
<i class="fa fa-twitter"></i>
These can be customized via the use of CSS, allowing you to change all sort of attributes, for a full list of icons please visit: http://fontawesome.io/
Animations
We have implemented the use of animations with the help of WOW and animate.css, below is a usable example. 
<div class="wow fadeInUp"></div>
The class wow sets a feature where the animation will not play until its div is in view, the class fadeInUp is the actual animation. Please visit daneden.github.io/animate.css/ for a whole range of animations that are supported.
Landing & Cover Elements Background Images
Throughout our template we use headers, these headers are background images
These are located in either /img or /img/landing
Additionally these are applied via the templates css file, so if its a cover template it would be /css/cover and if it were a landing template then it woudl be in /css/landing
Background Slider
On the cover-bg-slider.html template we use a standard carousel with a fade transition, search for BG Slider and you'll find the bg slider area where you change the images in the in-line html style. 
<div class="fill" style="background-image:url('img/bg-slider/slide1.png');" ></div>
Background Videos
On the cover-bg-video.html template we use background video, search for Full Screen Video and you'll find the bg slider area where you change the video in the in-line html Simply change the poster="img/vid/timelapse.png" to your image and the src="vid/timelapse.mp4" to your video
Interactive Hot Spots
On the landing template we use some html to achieve interactive hotspots on the device accompanied by tooltips 
<div class="area-of-interest aoi-1" data-toggle="tooltip" data-placement="right" title="" data-original-title="Easy Customisation" ></div>
The aoi-1 controls the position of the icon, the data-toggle="tooltip" data-placement="right" title="" data-original-title="Easy Customisation" controls the position of the tool tip and its content.
This styling is controlled within the css/landing style sheet directory.
Click Feedback Effects
In the menu, on the cover and landing templates you'll notice that when you click social icons there is a nice css response effect. You can change the color of this via the css. The /css/landing/landing.css ccontrols this, simply navigate to line 278 and change the bo shadow color.
Video & Images Responsive Video & Images
Images are very simple to make responsive, you simply create the image code and then add a img-responsive class to it like so:
<img src="img/image.jpg" class="img-responsive" alt="image" >


As for videos the process is a little different lets take video iframe for example.
<iframe src="https://www.youtube.com/embed/xnP3UNpu63o?rel=0&controls=0&showinfo=0"></iframe>
now we must wrap it in some div's like below, and that all there is to it. 
<div class="vid-responsive">
<iframe src="https://www.youtube.com/embed/xnP3UNpu63o?rel=0&controls=0&showinfo=0"></iframe>
</div>
PHP Contact & Subscribe
Infinity comes with a subscribe form and a contact form both use PHP with validation, both variations essentially work the same way.
Navigate to /php/contact-form.php or /php/subscribe-form.php.
Line: 17 $to = 'you@domain.com'; This is the email address that the contact form will send the information to.
Line: 77 $mail->Host = 'name@domain.com'; From this line down to line 81 you can set extra parameters if required.
Source & Credits Images
Fonts
Scripts