Thank you for purchasing our theme. 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: Update your existing website only if you want to use the new pages and features.
You can use HTML Email templates without updating your existing website. Before the update,
please backup all your files and your website.
- template (The Project template)
- - 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)
- - email_templates (HTML email templates)
- - fonts (External font libraries)
- - - font-awesome
- - - fontello
- - images (All the images of the template)
- - js (Javascript files of the template)
- - less (All the less files)
- - php (PHP files of the template)
- - plugins (All external libs. We keep all of them in this folder to make updates easily.)
- - videos (All video files)
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/light_blue.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=Roboto:400,300,300italic,400italic,500,500italic,700,700italic" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Raleway:700,400,300" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Pacifico" 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.
To make the background of header-top dark, add the class dark to .header-top.
<div class="header-top dark">Example: features-headers-classic-dark.html
To apply the color of the current color-scheme to the background of header-top, add the class colored to .header-top.
<div class="header-top colored">Example 1: features-headers-colored.html
To make the background of header-top light you don't need to add any classes to .header-top.
<div class="header-top">Example: features-headers-classic.html
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">Example of static header: features-headers-simple.html
By default the header is light add the dark class to .header in order to change it from light to dark version.
<header class="header fixed dark clearfix">Example of Light Header: features-headers-classic.html
Add the transparent class to body in order to make the header transparent.
<body class="no-trans transparent-header">Example of Default/Semi Transparent: features-headers-default.html
In Order to disable the animations of main menu remove the class animated from the .main-navigation div.
<div class="main-navigation with-dropdown-buttons">Example: features-menus-onhover-no-animations.html
In Order to make the submenus open with click event instead of hover add the class onclick to the .main-navigation div.
<div class="main-navigation onclick with-dropdown-buttons">Example 1: features-menus-onclick.html
By default the footer is Light add the dark class to #footer in order to change it from light to dark version.
<footer id="footer" class="dark">Example of Light Footer: features-footers-default.html
We are using pace plugin in order to create amazing page loaders, for more info about pace plugin please visit http://github.hubspot.com/pace/docs/welcome/.
In order to apply a page loader to a page, add the following script to your html file, right before the closing body tag.
<!-- Pace javascript --> <script type="text/javascript" src="plugins/pace/pace.min.js"></script>see here how
Then add one of classes page-loader-1 ... page-loader-6 to body tag.
<body class="page-loader-1">
Take a look to the following examples:
Option 1: components-page-loaders.htmlWe are using three iconic font libraries in The Project 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.
<div class="slider-banner-container">
<div class="slider-banner-fullscreen">
<ul class="slides">
<!-- slide 1 -->
<li> ... </li>
<!-- slide 2 -->
<li> ... </li>
<!-- slide 3 -->
<li> ... </li>
</ul>
</div>
</div>
Example: features-sliders-fullscreen.html
<div class="slider-banner-container">
<div class="slider-banner-fullwidth">
<ul class="slides">
<!-- slide 1 -->
<li> ... </li>
<!-- slide 2 -->
<li> ... </li>
<!-- slide 3 -->
<li> ... </li>
</ul>
</div>
</div>
Example: features-sliders-fullwidth.html
<div class="slider-banner-container">
<div class="slider-banner-fullwidth-big-height">
<ul class="slides">
<!-- slide 1 -->
<li> ... </li>
<!-- slide 2 -->
<li> ... </li>
<!-- slide 3 -->
<li> ... </li>
</ul>
</div>
</div>
Example: features-sliders-fullwidth-big-height.html
<div class="slider-banner-container">
<div class="slider-banner-boxedwidth">
<ul class="slides">
<!-- slide 1 -->
<li> ... </li>
<!-- slide 2 -->
<li> ... </li>
<!-- slide 3 -->
<li> ... </li>
</ul>
</div>
</div>
Example 1 Light Background: features-sliders-boxedwidth-light.htmlMorphext plugin is used to create simple text rotators. A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css. Please check the website of the plugin for more info http://morphext.fyianlai.com/
Example 1: features-sliders-text-rotator.htmlOWL Carousel is used to create simple content sliders or carousels, please 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 with Controls (Autoplay off)
<div class="owl-carousel content-slider-with-controls"> <!-- first slide start --> <div> ... </div> ..... </div>
2. Content Slider with Controls 2 (Autoplay off)
<div class="owl-carousel content-slider-with-large-controls"> <!-- first slide start --> <div> ... </div> ..... </div>
3. Content Slider without controls (Autoplay on)
<div class="owl-carousel content-slider"> <!-- first slide start --> <div> ... </div> ..... </div>
4. Content Slider with Controls (Autoplay on)
<div class="owl-carousel content-slider-with-controls-autoplay"> <!-- first slide start --> <div> ... </div> ..... </div>
5. Content Slider with Controls 2 (Autoplay On)
<div class="owl-carousel content-slider-with-large-controls-autoplay"> <!-- 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>
3. Clients
<div class="owl-carousel clients"> <!-- 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, The Project 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"> .... content .... </div> <div class="col-md-4 col-sm-6 isotope-item site-building"> .... content .... </div> ... </div>
See more examples of isotope filtering into following files:
In order to setup the contact form of the template the only thing you need to do is to set your email address.
To do this, please open "php/email-sender.php" file and change this line:
$Recipient = 'set_your_email_here@domain.com';
The contact form is functional only on a live server with php support not localy on your pc.
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);
The Project 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="fadeInLeft" data-effect-delay="0"> ... </div>
The Attribute data-effect-delay is Optional and is set in Miliseconds.
The animation can be set to:
Custom The Project 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:
Square Icons
Add the class square to <ul> tag as below:
Circural icons
Add the class circle to <ul> tag as below:
Dark icons
Add the class dark to <ul> tag as below:
Default icons
Add the class default to <ul> tag as below:
Social Buttons
See more examples of social icons into components-social-icons.html page.