Thank you for purchasing the iDea template. If you have any questions that are beyond the scope of this help file, please feel free to contact me http://htmlcoder.me/support I will glad to help you :-)
Important Notice: Before the update, please backup all your files and your website.
Affected Files/Folders:
- bootstrap (All Bootstrap files. We keep all of them in this folder to make updates easily)
- css (CSS files of the template)
- - skins (css skin files)
- fonts (external font libraries)
- - font-awesome
- - fontello
- videos (all the videos of the template)
- images (all the images of the template)
- js (Javascript files of the template)
- php (PHP files of the template)
- plugins (All external libs. We keep all of them in this folder to make updates easily.)
The template is based on Bootstrap 3 Framework - http://getbootstrap.com
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
If you need more information, please visit this site: http://getbootstrap.com/css/#grid
This folder contains all the Bootstrap 3 stylesheets
All external js libraries are in the plugins folder. We keep all of them in this folder to make updates easily.
To change the default color scheme, please replace the red.css to the following tag in your head:
<link href="css/skins/red.css" rel="stylesheet">
The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the boxed class to <body> tag as below:
<body class="boxed">
There are 9 background patterns. Background patterns are available only in boxed layout mode. In order to apply a background pattern all you have to do is to add one of classes pattern-1 ... pattern-9 to body tag.
<body class="pattern-1 boxed">
To change the embedded fonts, please take a look in the head part of the website and you will find these tags:
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,300&subset=latin,latin-ext" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet" type="text/css">
To change the fonts, visit the http://www.google.com/webfonts choose a font and use the generated code.
By default the positioning of main navigation is set to fixed. To change this behavior delete the fixed class from the header.
<header class="header fixed clearfix">
By default the footer is dark add the light class to #footer in order to change it from dark to light version.
<footer id="footer" class="light">
By default the header is light add the dark class to .header and .header-top divs in order to change them from light to dark versions.
<div class="header-top dark">
<header class="header fixed dark clearfix">
By default the header is not transparent add the transparent class to .header div in order to make the header transparent.
<header class="header transparent fixed clearfix">
We are using three iconic font libraries in iDea Template checkout all available icons:
Home page slider is implemented with Slider Revolution. Slider Revolution is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for beginners and pro’s alike!
More info here http://themes.themepunch.com/?theme=revolution_jq. See the detailed documentation of Slider Revolution plugin here.
Basic HTML markup of full width Slideshow:
<div class="slider-banner-container">
<div class="slider-banner">
<ul>
<!-- slide 1 -->
<li> ... </li>
<!-- slide 2 -->
<li> ... </li>
<!-- slide 3 -->
<li> ... </li>
</ul>
</div>
</div>
There are 4 four prebuild variations of full width Slideshow in iDea template. Examples of variations:
<div class="slideshow-boxed">
<div class="container">
<div class="slider-banner-container">
<div class="slider-banner">
<ul>
<!-- slide 1 -->
<li> ... </li>
<!-- slide 2 -->
<li> ... </li>
<!-- slide 3 -->
<li> ... </li>
</ul>
</div>
</div>
</div>
</div>
Example of Boxed Slideshow (index-boxed-slideshow.html).
OWL Carousel is used to create simple content sliders or carousels see components-content-sliders.html
OWL Carousel is touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders. Please check the website of the plugin for more info http://owlgraphic.com/owlcarousel/
Variations of content slider:
1. Content Slider without controls (Autoplay on)
<div class="owl-carousel content-slider"> <!-- first slide start --> <div> ... </div> ..... </div>
2. Content Slider with Controls (Autoplay on)
<div class="owl-carousel content-slider-with-controls-autoplay"> <!-- first slide start --> <div> ... </div> ..... </div>
3. Content Slider with Controls (Autoplay off)
<div class="owl-carousel content-slider-with-controls"> <!-- first slide start --> <div> ... </div> ..... </div>
4. Content Slider with Controls to bottom (Autoplay off)
<div class="owl-carousel content-slider-with-controls-bottom"> <!-- first slide start --> <div> ... </div> ..... </div>
Variations of carousels:
1. Carousel (Autoplay off)
<div class="owl-carousel carousel"> <!-- first slide start --> <div> ... </div> ..... </div>
2. Carousel (Autoplay on)
<div class="owl-carousel carousel-autoplay"> <!-- first slide start --> <div> ... </div> ..... </div>
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
Please check the Magnific Popup documentation here http://dimsemenov.com/plugins/magnific-popup/documentation.html.
See lightbox examples in components-lightbox.html page.
For the Filtering, iDea is using the Isotope plugin http://isotope.metafizzy.co/
Here is an example:
<div class="filters">
<ul class="nav nav-pills">
<li class="active"><a href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter=".web-design">Web design</a></li>
<li><a href="#" data-filter=".app-development">App development</a></li>
<li><a href="#" data-filter=".site-building">Site building</a></li>
</ul>
</div>
<div class="isotope-container row">
<div class="col-md-4 col-sm-6 isotope-item web-design">
<div class="image-box">
<div class="overlay-container">
<img src="images/portfolio-1.jpg" alt="">
<div class="overlay">
<div class="overlay-links">
<a href="portfolio-item.html"><i class="fa fa-link"></i></a>
<a href="images/portfolio-1.jpg" class="popup-img"><i class="fa fa-search-plus"></i></a>
</div>
<span>Web Design</span>
</div>
</div>
<div class="image-box-body">
<h3 class="title"><a href="portfolio-item.html">Project Title</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci accusamus accusantium.</p>
<a href="portfolio-item.html" class="link">Read more</a>
</div>
</div>
</div>
...
</div>
See more examples of isotope filtering into following files:
To setup the contact forms of the template, open the "php/email-sender.php" file and change this line:
$Recipient = '[email protected]';
One notice: The contact forms are working only on a server with php support not on your local system.
Regarding coming soon page only thing you need to do is to set the time at which the countdown expires.
To do this, please open "js/coming.soon.config.js" file and change this line:
// var untilDate new Date(Year, Month - 1, Day) //----------------------------------------------- var untilDate = new Date(2016, 2 - 1, 1);
iDea comes with a great Google maps integration. Making it easy for your visitor to locate your business on the map plays an ever-growing role nowadays.
To change the default Latitude, Longitude and Zoom of the Google map, please replace the following values to your js/google.map.config.js file:
// Set the coordinates of your location myLatlng = new google.maps.LatLng(41.38791700, 2.16991870); myZoom = 12;
animate.css http://daneden.github.io/animate.css/
You can add some Animations / Transitions to the elements which fires when an element scrolls into view. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
<div class="object-non-visible" data-animation-effect="fadeInRight" data-effect-delay="200"> ... </div>
The Attribute data-effect-delay is Optional and is set in Miliseconds.
The animation can be set to:
Custom iDea animations
Third party code, that contained into plugins folder or into other folders, is licensed under its own license.
Thank you very much for purchasing the iDea template and for reading this documentation :-)
Social Media
Social Media HTML Markup
Colored social icons
Large icons
Add the class large to <ul> tag as below:
Icons with rounded corners
Add the class radius-5px to <ul> tag as below:
Circural icons
Add the class circle to <ul> tag as below:
Light icons
Add the class light to <ul> tag as below:
Dark icons
Add the class light to <ul> tag as below:
See more examples of social icons into components-social-icons.html page.