Welcome To Invention Theme Documentation
Created: 16/6/2013 - By: Jozoor Team -
Contact Us
Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel
free to create a support thread on our support forum.. Thanks so much!
Theme Preview
Theme features :
- - HTML5 & CSS3
- - Responsive Design
- - Retina Ready
- - 45 HTML Files
- - Ajax Contact Form
- - Custom Shortcodes
- - Icons Shortcodes
- - 6 Home Layouts
- - 2 Sliders
- - Dark & White Styles
- - 5 colors
- - Twitter & Flickr Widget
- - Layered PSD Files
- - & much more...
Installing Theme
- → After unzip Theme Files, you will found HTML Folder have 2 Theme styles Drak and White all this files you will upload ( Dark or White ) or two to your site.
- → You can view this Theme in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the Theme.
- → The exception is the contact form which functions based on the PHP coding language and requires a server to send messages.
- → Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
- → Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
- → Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .php, .js into your FTP client.
- → Once the files are done uploading, rename the file you want to be your home page as 'index.html'.
HTML Structure
This Theme has a Responsive layout with a variation of column layouts depending on the page. This theme uses the 960 grid system (16 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 960 grid system, be sure to go to full_width.html, you will see the Grid system with divs, below the code for that :
1/2 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh.
1/2 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh.
1/3 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas.
1/3 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas.
1/3 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas.
11 Columns
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh. Proin id condimentum sem. Morbi vitae dui in magna vestibulum suscipit vitae vel nunc. Integer ut risus nulla. malesuada tortor,
5 Columns
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis.
1/4 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at .
1/4 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at .
1/4 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at .
1/4 Column
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at .
12 Columns
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh. Proin id condimentum sem. Morbi vitae dui in magna vestibulum suscipit vitae vel nunc. Integer ut risus nulla. malesuada tortor, nec scelerisque lorem mattis.
4 Columns
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam .
16 Columns
Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh. Proin id condimentum sem. Morbi vitae dui in magna vestibulum suscipit vitae vel nunc. Integer ut risus nulla. malesuada tortor, nec scelerisque lorem mattis.
Structure of Included Files in HTML :
Color Options in Theme, you can let theme more colors or define on color only by :
--- this color is active only ---
and .....
hidden Or delete this code
CSS Structure
I'm using one main CSS file (style.css) in this theme which you are free to modify depending on the customization you require. There are also six additional style sheets that I do not recommend changing. Those style sheets reside in the 'CSS' folder. The six additional style sheets are:
/* Site Styles
================================================== */
/* header */
/* slider */
/* navigation menu */
/* start inernal pages */
/* footer */
/* Import Basic Files
================================================== */
@import url("font.css"); /* Custom Font */
@import url("base.css"); /* Reset & Basics */
@import url("font-awesome/css/font-awesome.min.css"); /* Font Awesome */
@import url("fontello/css/fontello.css"); /* Fontello Social */
@import url("skeleton.css"); /* Base 960 Grid */
@import url("javascript.css"); /* Css Styles for js scripts */
@import url("shortcodes.css"); /* Css Styles for shortcodes */
@import url("skins/white.css"); /* Layout Skin */
@import url("custom.css"); /* Css Styles File for any changes you want to add */
and you can add or modify colors and include new color file like :
Javascript Settings
Here you can modify any settings for ( Sliders, Twitter & Flickr Widget, Count Down of Under Construction, progress bar and more..)
# File : ( js/custom.js )
jQuery(document).ready(function($) {
// Navigational Menu ddsmoothmenu
ddsmoothmenu.init({
mainmenuid: "menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'navigation', //class added to menu's outer DIV
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
// Carousel slider
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next-slide',
prevSlide : '.prev-slide',
addPagination: false,
addNav : false,
speed: 700 // ms.
});
$('.slidewrap1').carousel({
namespace: "carousel1", // Defaults to “carousel”.
speed: 600 // ms.
})
$('.slidewrap2').carousel({
namespace: "carousel2", // Defaults to “carousel”.
speed: 600 // ms.
})
$('.slidewrap3').carousel({
namespace: "carousel3", // Defaults to “carousel”.
speed: 600 // ms.
})
$('.slidewrap4').carousel({
namespace: "carousel4", // Defaults to “carousel”.
speed: 600 // ms.
})
// Tooltips
/* Adding a colortip to any tag with a data attribute: */
$('[data]').colorTip({color:'yellow'});
// UItoTop plugin
$().UItoTop({ easingType: 'easeOutQuart' });
// Accordion
$("#accordion").accordion({
autoHeight: false,
//active: '.selected',
//selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion2").accordion({
autoHeight: false,
//active: '.selected',
//selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion3").accordion({
autoHeight: false,
active: '.selected',
selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion4").accordion({
autoHeight: false,
active: '.selected',
selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion5").accordion({
autoHeight: false,
active: '.selected',
selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion6").accordion({
autoHeight: false,
active: '.selected',
selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion7").accordion({
autoHeight: false,
active: '.selected',
selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion8").accordion({
autoHeight: false,
active: '.selected',
selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion9").accordion({
autoHeight: false,
active: '.selected',
selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
$("#accordion10").accordion({
autoHeight: false,
active: '.selected',
selectedClass: 'active',
icons: { "header": "icon-plus", "activeHeader": "icon-minus" }
});
// Tabs
$("#horizontal-tabs").tytabs({
tabinit:"1",
fadespeed:"fast"
//catchget:"tab2"
});
$("#horizontal-tabs.two").tytabs({
tabinit:"1",
prefixtabs:"tab_two",
prefixcontent:"content_two",
fadespeed:"fast"
});
$("#horizontal-tabs.three").tytabs({
tabinit:"1",
prefixtabs:"tab_three",
prefixcontent:"content_three",
fadespeed:"fast"
});
$("#horizontal-tabs.four").tytabs({
tabinit:"1",
prefixtabs:"tab_four",
prefixcontent:"content_four",
fadespeed:"fast"
});
$("#horizontal-tabs.five").tytabs({
tabinit:"1",
prefixtabs:"tab_five",
prefixcontent:"content_five",
fadespeed:"fast"
});
$("#vertical-tabs").tytabs({
tabinit:"1",
prefixtabs:"tab_v",
prefixcontent:"content_v",
fadespeed:"fast"
});
$("#vertical-tabs.two").tytabs({
tabinit:"1",
prefixtabs:"tab_v_two",
prefixcontent:"content_v_two",
fadespeed:"fast"
});
$("#vertical-tabs.three").tytabs({
tabinit:"1",
prefixtabs:"tab_v_three",
prefixcontent:"content_v_three",
fadespeed:"fast"
});
$("#vertical-tabs.four").tytabs({
tabinit:"1",
prefixtabs:"tab_v_four",
prefixcontent:"content_v_four",
fadespeed:"fast"
});
$("#vertical-tabs.five").tytabs({
tabinit:"1",
prefixtabs:"tab_v_five",
prefixcontent:"content_v_five",
fadespeed:"fast"
});
// Alert Boxes
$(".hideit").click(function() {
$(this).fadeOut(600);
});
// Toggle
$('#toggle-view li h4').click(function () {
var text = $(this).siblings('div.panel');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).siblings('span').html('-');
} else {
text.slideUp('200');
$(this).siblings('span').html('+');
}
});
Shortcodes System
Shortcodes System : you can use any shortcode in any page in your site , it is simple to inlcude it in you html structure below Examples :
Accordion
Accordion-1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type.
Accordion-2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type.
Accordion-3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type.
Accordion 2
Accordion-1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type.
Accordion-2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type.
Accordion-3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type.
Progress Bar
Tabs
- Section 1
- Section 2
- Section 3
1 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when
2 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when
3 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when
Tabs 2
- Section 1
- Section 2
- Section 3
1 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when
2 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when
3 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when
Tabs 3
- Section 1
- Section 2
- Section 3
1 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry.
2 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry.
3 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry.
Tabs 4
- Section 1
- Section 2
- Section 3
1 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry.
2 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry.
3 -
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry. Lorem Ipsum has been the industry's dummy standard
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and Lorem typesetting industry.
Alert Boxes
Toggle
-
Title 1
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
-
Title 2
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
-
Title 3
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
-
Title 3
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Blockquote
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type, Lorem Ipsum is simply dummy text of the printing
and typesetting industry.
Info Box
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been. Lorem Ipsum is simply
dummy
Some Button
Highlight & Tooltips
Sed at odio ut ToolTip Black
dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor.
Nunc [ Normal link ] nisi. aliquet mollis.
ToolTip Yellow
Fusce elementum velit in purus vel dolor iaculis egestas. Maecenas ut nulla quis eros
ToolTip White scelerisque vel
vitae nibh lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
Dropcaps
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type.
List Styles
Breadcrumbs
Youtube Video
Vimeo Video
Tables
Title 1
Title 2
Title 3
Title 4
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
Title 1
Title 2
Title 3
Title 4
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
Form Elements
Welcome Box
Welcome to Invention Clean & Responsive HTML Template.This intro text can be modified and
say hello to the visitor.
Big Info Box
Go To Social Icons & Small Icons Shortcodes Page
An easy way to use the icons anywhere in your page
Icons Shortcodes using :
you can go to page ( icons.html ) and find you icon name you want and using code below :
# Social Icons :
To use this icons, put icon code anywhere in your page :
normal icon code : [ ]
color icon code : [ ]
white icon code : [ ]
also you can increase icon size easy by this code example [ s-20 ] , which you have from 10 > 100 , just change number to what you need.
# Small Icons :
To use this icons, put icon code anywhere in your page : normal icon code [ ]
To use this icons, put icon code anywhere in your page : color icon code [ ]
To use this icons, put icon code anywhere in your page : white icon code [ ]
also you can increase icon size easy by this code example [ s-20 ] , which you have from 10 > 100 , just change number to what you need.
also note : this icons support retina ready ..
Contact Form
Contact Form : is PHP Script for sending messages to your email to be connected with your visitors or clients , you should edite email default to your email to start receive messages , now do this below :
Go To File ( config.php ) in main folder and change email :
// Where will you get the forms' results?
define("WEBMASTER_EMAIL", 'email@website.com'); // change this email to your new email
Photoshop Files
- - Homepage
- - About Us
- - Services
- - Process
- - Pricing Table
- - Under Construction
- - Portfolio
- - Blog
- - & much more... to 14
Scripts
- jQuery library - jQuery Easing Plugin - jQuery Ui ddsmoothmenu - Flex Slider 2 - Ui Totop - Colortip - jQuery Tabs - Carousel Slider - Isotope Filtering - jquery tweets - jFlickrFeed Plugin - doubleTapToGo - fancyBox v2.1.4 - Sticky Plugin - GMaps.js
Credits :
# Images :
- lump sugar vector illustration - kingofthepond.net - NEW PROJECTS III - Merry Christmas - British Tea Cup - InstaGenius app icon - clyp iPhone Sidebar - Package - mehgrad.ru - social sway - madeinmurmansk.com - evoke - The Pirate - KRZ 100L
# Fonts :
# Icons :
Once again, thank you so much for purchasing this Theme. !!