1. Start
  2. TEMPLATE OVERVIEW
  3. GET STARTED
  4. WORKING WITH SLIDERS
  5. COLUMN LAYOUTS AND HEADERS
  6. DIFFERENT LISTS
  7. DIFFERENT BOXES
  8. ICONS & Buttons
  9. Contact Page
  10. configuration
  11. END OF DOCUMENTATION

Spotnews [v.2]

Multi-Purpose Responsive Template


Hello, firstly I would like to thank you for purchasing "Spotnews - Multi-Purpose Responsive Template".
If you have any questions that are beyond the scope of this help file, please feel free to email us.
Created by: Spotlayer Team
Contact: http://themeforest.net/user/spotlayer
Created On: 12/01/2012
update On: 29/10/2013

TEMPLATE OVERVIEW


 

Spotnews works in:

Template features:

Homepage:

  • Internet Explorer 8
  • 45 Valid Pages
  • Showcase Slider
  • Internet Explorer 9
  • 6 Colors
  • Cricular Carousel Slider
  • Internet Explorer 10
  • Fully Responsive
  • Flex Slider
  • Firefox 3.5
  • Awesome sliders
  • Elastic Slider
  • Firefox 3.6
  • Pricing boxes, Shortcodes and more!
  • Content Rotater Slide
  • Firefox 4
  • Working Google Maps
  • Different jQuery effects
  • Safari 4
  • jQuery Drop down menus
 
  • Safari 5
  • Many more jQuery Features

New features:

  • Opera
  • Web Fonts
  • 6 Backgrounds layout
  • Chrome 10
  • Gallery, Videos Support
  • Login Page
  • Chrome 11
  • 2 Columns
  • Working Contact with Validation

 

GET STARTED


Installation:

Spotnews Multi-Purpose Responsive Template is HTML template so there's no really "installation" required just unzip the main file you've downloaded from themeforest and after unziping you have your all template ready to be used.

Setting Up The Grid:

Before starting to work deeper with this template, you'll need to know how to use template's grid, it's simple and easy to use. Spotnews Multi-Purpose Responsive Template is being build using one of the most popular grid, the 960 grid, which means your site container is 960px wide.To make it work without problem you be using columns for everything starting from sliders , portfolio , blog and more.

Working With Navigation:

I have used jQuery improved dropdown menu but the menu itself is easy to edit. Its structure base on a nested unorederd lists structure.

There are two menus, one is the top and the main one.

(For the Top Menu)



/* =============================================================================
   Top Menu
   ========================================================================== */
	 
#top-nav {
	background:#494949;
	border-top:2px solid #e17321;
	height:38px;
}

#menu-top li a:hover, #menu-top li a.active {
	background:#282828;
	border-bottom:2px solid #ef7f2c;
}


#top-nav {
	box-shadow:0px 0px 6px #CCCCCC;
}

.menu-main {
	position:relative;
}

.menu-main ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	position: absolute;
}


.menu-main ul .menu-item {
	float: left;
	border-bottom:2px solid transparent;
	height:38px;
	text-align: center;
	position: relative;
}

.menu-main ul .menu-item a {
	color:#fff;
	display: block;
	overflow:hidden;
	height: auto;
	padding:12px  20px 7px 20px ;
	font-family: "Mako", verdana;
	position: relative;
	text-transform: capitalize;
	font-size: 12px; 
	font-weight:400;
	letter-spacing:1px;
 	-moz-transition				  : padding 0.2s ease, background 0.3s ease;
	-webkit-transition : padding 0.2s ease, background 0.3s ease;
	-ms-transition      : padding 0.2s ease, background 0.3s ease;
	-ms-transition      : padding 0.2s ease, background 0.3s ease;
	transition				  : padding 0.2s ease, background 0.3s ease;
	}

.menu-main ul .menu-item a span {
	display: block;
	position: relative;
	top: -3px;
	overflow: hidden;
	text-transform: lowercase;
	font-size: 12px;
	font-weight: 100;
	line-height: 21px;
	color: #fff;
}
.menu-main ul .menu-item a:hover, .menu-main ul .menu-item.current-menu-item a {
	text-decoration:none;
}

.menu-main ul .menu-item a:hover, .menu-main ul .menu-item.current-menu-item a, .menu-main ul .menu-item.sfHover a {
    background:#3f3f3f;
	height: 19px;
	padding-top:16px;
	padding-bottom: 0px;
	text-decoration: none;
	border-bottom: 3px solid #ef7f2c;
	background-position: center -11px;
}


.menu-main ul .menu-item a:hover span, .menu-main ul .menu-item.current-menu-item a span, .menu-main ul .menu-item.sfHover a span {
	opacity: 0;
	visibility: hidden;
}
.menu-main ul .menu-item a span {
	color: #fff;
	display: block;
	font-size: 12px;
 	line-height: 21px;
}

.menu-main ul.sub-menu {
	position: relative;
	padding: 0px;
	width: 100%;
	right: 0px;
	z-index: 99999;
	display:none
}


ul.sub-menu li {
	position: relative;
	padding: 0px;
	width: 150px;
	right: 0px;
	z-index: 99999;
	background:url(../images/bg_gray.png);
}

.menu-main ul.sub-menu li.menu-item {
	float: none;
 	border-bottom: 1px solid #636363;
	height: auto;
}
.menu-main ul.sub-menu li.menu-item a {
	display: block;
	padding: 8px 0px;
	height: auto;
	position: relative;
	text-align: center;
	text-transform: none;
	margin: 0px;
 	line-height: 14px;
	color: #fff;
	background: none;
	border-bottom: 0px none;
}
.menu-main ul.sub-menu li.menu-item:hover {
	padding: 0px;
	margin: 0px;
}
.menu-main ul.sub-menu li.menu-item a:hover {
	color: #ef7f2c;
}
.menu-main ul.sub-menu li .sub-menu {
	border-left: 1px solid #636363;
	position: absolute;
	left: 100%;
	top: 0px;
}

.sf-sub-indicator {
	 display:none !important;
}


/* Responsive Menu  */

#responsive_menu {
	display: none;
	position: absolute;
	list-style: none;
	margin: 0px;
	padding: 0px;
	right: 35px;
}

#responsive_menu li {
	height: 100px;
	display: block;
	overflow: hidden;
	height: 30px;
	padding: 36px 35px 25px 35px;
	font-size: 15px;
	line-height: 15px;
 	text-transform: uppercase;
	cursor: pointer;
	color: #666666;
	background: url("../images/triangle.gif") no-repeat scroll center -16px transparent;
	-moz-transition				  : padding 0.3s ease, background 0.3s ease;
	-webkit-transition      : padding 0.3s ease, background 0.3s ease;
	-ms-transition          : padding 0.3s ease, background 0.3s ease;
	-ms-transition          : padding 0.3s ease, background 0.3s ease;
	transition				      : padding 0.3s ease, background 0.3s ease;
}

#responsive_menu li:hover, 
#responsive_menu li.active {
	height: 23px;
	padding-top: 71px;
	padding-bottom: 0px;
	text-decoration: none;
	background-color: #e7e7e7;
	border-bottom: 1px solid #666666;
	background-position: center -11px;
}
.responsive-menu-wrapper {
	padding: 0px !important;
}
.responsive-menu-wrapper .responsive-menu-items.span16 {
	display: none;
}
.responsive-menu-wrapper {
	padding: 0px 0px 0px 0px;
}
.resp-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: capitalize;
}
.resp-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.resp-menu li a {
	display: block;
	padding: 4px 15px;
	font-size: 12px;
	color: #666666;
	background-color: #e7e7e7;
	border-top: 1px solid #666666;
}
.resp-menu li:first-child a {
	border-top: none;
}
.resp-menu .sub-menu a {
	padding: 4px 15px 4px 15px;
	background: url('../images/border-dot.gif') center top repeat-x;
	border-top: 0px none;
}
.resp-menu .sub-menu .sub-menu {
	margin-bottom: 4px;
}
.resp-menu .sub-menu .sub-menu li a {
	padding: 1px 15px 1px 25px;
	background: none;
	font-size: 10px;
}
.resp-menu li:hover a {
	text-decoration: none;
	color: #e17321;
	background-color: #e7e7e7;
}
.resp-menu li:hover .sub-menu a {
	color: #666666;
}
.resp-menu li .sub-menu li:hover a {
	color: #ef7f2c;
	background-color: #fff;
}
.resp-menu li .sub-menu li:hover .sub-menu a {
	color: #666666;
}
.resp-menu li .sub-menu li .sub-menu li:hover a {
	color: #ef7f2c;
	background-color: #fff;
}


For more information please visit this site.

(For the Main Menu)


                             

 

/*  Main Nav */
.navbx { 
	position:relative;
}
#main-nav {
	background:#e7e7e7;
	border-top:1px solid #fff;
	height:40px;
	margin-bottom:20px;
}
.main-menu li { 
	float:left;
}
.main-menu > li > a {
	color:#494949;
	padding:0px 20px;
	display:inline-block;
	border-bottom:2px solid transparent;
	font-size:15px;
	background:url(../images/nav-line.jpg) no-repeat right;
	margin-top:11px;
	text-transform: capitalize;
	font-family: "Mako", verdana;
}
.main-menu li:last-child > a { 
	background-image:none; 
}
.main-menu > li > a:hover, .main-menu li a.active, {
	 color:#FFF;
	 background:#ef7f2c;
	 margin-top:-6px;
	 padding:13px 20px;
	 background-image:none;
	 text-shadow:none;
	 -webkit-text-shadow:none;
	 -o-text-shadow:none;
}

/* select-menu */
.select-menu .main_small { 
	padding:5px 10px;
}
select.select-menu {
	display:none;
	width:100%;
	padding:7px;
	margin-top:3px;
	border:1px solid #e7e7e7;
	color:#494949;
}

select.select-menu a {
	color:#494949;
}



/* =============================================================================
   big dropdown
   ========================================================================== */

.block_big_dropdown {
	width:520px;
	display:none;
	position:absolute;
	left:0px;
	top:40px;
	background-color:#f1f1f1;
	-moz-box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.2);
	box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.2);
	border:1px solid #b7b7b7;
	border-top:3px solid #ef7f2c;
	z-index:99999;
}
.block_big_dropdown .content {
	padding:10px;
}

.block_big_dropdown .line {
	width:1px; 
	height:171px; 
	margin:0px 15px; 
	float:left; 
	background-color:#efefef;
}

.block_big_dropdown .image {
	width:117px; 
	float:left;
}
.block_big_dropdown .image .pic {
	display:block;
	position:relative;
	margin-bottom:7px;
	border:4px solid #f2f2f2;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	behavior:url(js/PIE.htc);
}
.block_big_dropdown .image .pic img {
	border:1px solid #ffffff;
}
.block_big_dropdown .image p {
	padding-bottom:0px; 
	font-size:11px; 
	color:#494949; 
	font-weight:bold; 
	line-height:17px; 
	text-align:center;
}
.block_big_dropdown .image p a {
	font-size:11px; 
	color:#494949; 
	font-weight:bold;
}
.block_big_dropdown .image p a:hover {
	color:#e17321; 
	text-decoration:none;
}

.block_big_dropdown .title {  
	padding-bottom:16px; 
	border-bottom:1px dotted #dfdfdf; 
}
.block_big_dropdown .title p { 
	margin:0 0 0 10px;
	font-size:18px;
	color:#494949;
}
span.cmnt {
	background: url('../images/imgall.png') no-repeat -218px -6px;
	width: 27px;
	height: 23px;
	float:left;
	margin:0 3px 0 0;
}


.block_big_dropdown .popular_posts {
	width:99.7%;
}
.block_big_dropdown .popular_posts ul {
	display:block;
}
.block_big_dropdown .sub_dropdown ul {
	width: 100%;
}
.block_big_dropdown .sub_dropdown ul .main-menu li {
	float:none;
}
.block_big_dropdown .popular_posts a:hover {
	color:#e17321; 
	text-decoration:none;
}
.block_big_dropdown .popular_posts a span {
	font-size:12px; 
	color:#494949; 
	font-weight:normal; 
	float:right;
}
.block_big_dropdown .popular_posts a:hover span {
	color:#494949;
}

.block_big_dropdown .more {
	width:196px; 
	float:left;
}

.block_big_dropdown .more ul {
	padding-top:17px; 
	display:block;
}
.block_big_dropdown .more li {
	padding-top:16px; 
	display:block;
}
.block_big_dropdown .more li:first-child {
	padding:0px;
}
.block_big_dropdown .more a {
	font-size:10px; 
	color:#e17321; 
	text-transform:uppercase;
}


.block_big_dropdown .sub_dropdown ul {
	width: 100%;
}
.block_big_dropdown .sub_dropdown ul .sub_dropdown li { 
	padding:10px 4px; 
	float:none !important; 
	background:none; 
	border-bottom:1px dotted #dfdfdf;
}

.block_big_dropdown .sub_dropdown ul .sub_dropdown li a {
	float:none; 
	color:#666666 !important;
}


/* SubMenus */
nav.main_menu ul ul > li {
	float:none; 
	border-bottom:1px solid #dfdfdf;
	width:100%;
}

nav.main_menu ul ul > li:last-child {
	border-bottom: none;
}

nav.main_menu ul ul > li > a {
	 
	display:block;
	-moz-transition				  :all 0.1s ease;
	-ms-transition      :all 0.1s ease;
	-ms-transition      :all 0.1s ease;
	-webkit-transition  :all 0.1s ease;
	transition				  :all 0.1s ease;
	font-size:13px;
 	padding:20px;
	background-image:none;
	color:#494949;
	border-bottom:none !important;
	margin-top:0;
 
}
.block_big_dropdown .popular_posts a span.cmnt_n {
	background:#dadada;
	padding:7px;
	color:#494949;	
	font-size:13px;
	float:right !important;
	margin-top:-9px;
	}
	
.cmnt_bx {
    background:url('../images/number_cmntbx.png') no-repeat 11px bottom;
    float: left;
    padding-bottom:5px;
	 margin-right:8px
	}

.rwo25
	{
	background: url('../images/number_cmntbx.png') no-repeat 0 -8px;
	width: 8px;
	height: 8px;
	float:right;
	}
	
		
/* big Drop Menu */
		
nav.main_menu {padding-right:2px; float:left; background:url(../images/line_main_menu.jpg) no-repeat right 12px;}
nav.main_menu > ul > li {height:43px; display:block; float:left; position:relative;  z-index:9999;}
nav.main_menu > ul > li > a {}
nav.main_menu > ul > li > a:hover { }
nav.main_menu > ul > li:hover,
nav.main_menu > ul > li.hover {z-index:9999;}
nav.main_menu > ul > li:hover > a,
nav.main_menu > ul > li.hover > a{  }
nav.main_menu > ul > li.current_page_item {z-index:9999;}
nav.main_menu > ul > li.current_page_item > a ,nav.main_menu > ul > li:hover > a  {
	 background:#ef7f2c;
	 border-bottom:2px solid #ef7f2c;
	 margin-top:-6px;padding:13px 20px;
	 background-image:none;
	text-shadow:none;
	-webkit-text-shadow:none;
	-o-text-shadow:none;
	color:#fff;
}
.responsive_navigation {
	padding:7px 0px; 
	display:none; 
	position:relative; 
	z-index:100;
}
.responsive_navigation .button_menu {
	height:28px; 
	line-height:28px; 
	padding:0px 30px 0px 12px; 
	background:url(../images/bg_responsive_menu.gif) no-repeat right top #f8f8f8; 
	border:1px solid #8f8f8f; 
	color:#666666; 
	cursor:pointer;
}
.responsive_navigation .r_menu {
	width:100%; 
	display:none; 
	position:absolute; 
	left:0px; 
	top:36px; 
	background-color:#f8f8f8;
}
.responsive_navigation .r_menu > ul {
	padding-bottom:15px; 
	display:block; 
	border:1px solid #8f8f8f;
}
.responsive_navigation .r_menu li {
	padding-left:12px; 
	padding-top:15px;
}

nav.main_menu ul ul > li:hover > a > span{ 
	color:#494949 !important;
}
nav.main_menu ul ul > li:hover  { 
	background:#e7e7e7;
}
nav.main_menu ul ul > li:hover > a { 
	color:#494949 !important; 
	background:none; 
	border:none; 
	margin-top:0 !important;
}
nav.main_menu > ul > li:hover > ul {
	display:block;
}
nav.main_menu ul ul > li:hover  .cmnt_bx {
	background-image:url(../images/number_cmntbx_h.png);
}
nav.main_menu ul ul > li:hover span.cmnt_n{
	background:#494949 !important;
	color:#e7e7e7 !important;
}
nav.secondary_menu {
	float:left;
}
nav.secondary_menu > ul > li {
	height:39px; 
	padding-left:2px; 
	display:block; 
	float:left; 
}
nav.secondary_menu > ul > li > a {
	height:39px; 
	line-height:39px; 
	padding:0px 14px; 
	display:block; 
	font-size:11px; 
	color:#494949; 
	font-weight:bold;
}
nav.secondary_menu > ul > li > a:hover {
	color:#ef7f2c; 
	text-decoration:none;
}
nav.secondary_menu > ul > li:first-child {
	padding-left:0px; 
	background:none;
}
nav.secondary_menu > ul > li:first-child > a {
	padding-left:0px;
}

.responsive_secondary_menu {
	overflow:hidden; 
	position:absolute; 
	top:-9000px;
}
.responsive_secondary_menu .left {
	width:14px; 
	height:39px; 
	float:left; 
	display:block; 
	text-indent:-9000px;
}
.responsive_secondary_menu .right {
	width:14px; 
	height:39px; 
	float:right; 
	display:block; 
	text-indent:-9000px;
}
.responsive_secondary_menu .r_menu {
	height:39px; 
	overflow:hidden; 
	position:relative;
}
.responsive_secondary_menu .r_menu > ul {
	display:block; 
	overflow:hidden; 
	position:absolute; 
	left:0px; 
	top:0px;
}
.responsive_secondary_menu .r_menu > ul > li {
	height:39px; 
	padding-left:2px; 
	display:block; 
	float:left; 
}
.responsive_secondary_menu .r_menu > ul > li > a {
	height:39px; 
	line-height:39px; 
	padding:0px 14px; 
	display:block; 
	font-size:11px; 
	color:#494949; 
	font-weight:bold;
}
.responsive_secondary_menu .r_menu > ul > li > a:hover {
	color:#ef7f2c; 
	text-decoration:none;
}
.responsive_secondary_menu .r_menu > ul > li:first-child {
	padding-left:0px; 
	background:none;
}
.block_clock p span {
	color:#494949;
}


For more information please visit this site.

WORKING WITH SLIDERS


Flex Slider

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor..

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor..

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor..

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor..

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor..

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor..

 

 

its on js/custom.js

/************************************************************************/
/* DOM READY --> Begin */
/************************************************************************/
 
 
/* end Main Navigation */
 
/* ---------------------------------------------------------------------- */
/* Flexslider
/* ---------------------------------------------------------------------- */
 
(function(){
 
if($('.flexslider').length) {
 
$(window).load(function(){
 
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
animationSpeed: 1000,
itemWidth: 180,
asNavFor: '#slider',
});
$('#slider').flexslider({
   //selector: ".slides  img",
animation: "fade",
controlNav: true,
directionNav: false,
animationLoop: false,
slideshow: true,
sync: "#carousel",
 
});
 
//abum
 
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: true,
animationSpeed: 300,
//itemWidth: 105,
controlNav: true,              
directionNav: false, 
 
});
 
//carousel-ourclients
$('#carousel-ourclients').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: true,
animationSpeed: 300,
//itemWidth: 105,
controlNav: false,              
directionNav: true, 
 
});
}); 
 
}
 
})();
 
/* end Flexslider */ 

Showcase Slider


01
Scary view from the hurricane hit the ground
02
Taken at Cloud Break at an outer reef in Fiji
02
enjoying her private pool then shaking herself dry
04
husband drove several hundred miles to Albuquerque
02
storm on Tonle Sap Great Lake in Cambodia
02
Discover Statue in the deep ocean
04
Scary view from the hurricane hit the ground
02
Taken at Cloud Break at an outer reef in Fiji

$("#showcase").awShowcase({ content_width: 620, content_height: 390, fit_to_parent: false, auto: true, interval: 3000, continuous: true, loading: true, tooltip_width: 200, tooltip_icon_width: 32, tooltip_icon_height: 32, tooltip_offsetx: 18, tooltip_offsety: 0, arrows: true, buttons: true, btn_numbers: true, keybord_keys: true, mousetrace: false, /* Trace x and y coordinates for the mouse */ pauseonover: true, stoponclick: true, transition: 'fade', /* hslide/vslide/fade */ transition_delay: 300, transition_speed: 500, show_caption: 'onhover', /* onload/onhover/show */ thumbnails: true, thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */ thumbnails_direction: 'vertical', /* vertical/horizontal */ thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */ dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */ speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */ viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */ });

Elastic Slider


  • HTML Code:
		 
  • image01

    DISOVER STATUE IN THE DEEP OCEAN

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam ipsum..

  • image02

    SCARY VIEW FROM THE HURRICANE

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam ipsum..

  • image03

    DROVE SEVERAL HUNDRED MILES

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam ipsum..

  • image04

    TAKEN AT CLOUD BREAK

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam ipsum..

  • JAVASCRIPT INITIALIZATION:
			$(function() {
            $('#ei-slider').eislideshow({
            animation : 'center',
            autoplay : true,
            slideshow_interval : 3000,
            titlesFactor : 0,
            });
            });
		

 

For more information please visit this site.

Cricular Carousel Slider

  • HTML Code:
			
		
  • JAVASCRIPT INITIALIZATION:
			$('.carousel-boxs').contentcarousel();
                autoplay: true;
                });
		
For more information please visit this site.

Content Rotater Slider

  • HTML Code:

 


					 
slider1
Scary view from the hurricane hit the ground

Modern technological innovations have endowed all of us with many advantages that make.

Posted In 25 July 2012

slider2
Taken at Cloud Break at an outer reef in Fiji

Modern technological innovations have endowed all of us with many advantages that make.

Posted In 25 July 2012

slider3
enjoying her private pool then shaking herself dry

Modern technological innovations have endowed all of us with many advantages that make.

Posted In 25 July 2012

husband drove several hundred miles to Albuquerque

Modern technological innovations have endowed all of us with many advantages that make.

Posted In 25 July 2012

slider5
storm on Tonle Sap Great Lake in Cambodia

Modern technological innovations have endowed all of us with many advantages that make.

Posted In 25 July 2012

slider1
slider1
slider1
slider1
slider1
  • JAVASCRIPT INITIALIZATION:
								$('#cr-container').crotator({
                                      // slideshow on
                                      autoplay: false
                              });
                            
For more information please visit this site.

COLUMN LAYOUTS AND HEADERS


Column Layouts:

 

		

Title

content

Title

content

 
  • ===ONE THIRD COLUMN===
					


			

 

  • ===ONE FOURTH COLUMN===
						

Title

content

Title

content

Title

content

Title

content

 
  • ===ONE FIFTH COLUMN===
									

Title

content

Title

content

Title

content

Title

content

Title

content

 
 

  • ===ONE SIXTH COLUMN===
													

Title

content

Title

content

Title

content

Title

content

Title

content

Title

content

 

  • ===TWO THIRD COLUMN===
                                                        

Title

content

 

  • ===ONE THREE FOURTH COLUMN===
                                                                

Title

content

 

  • ===ONE TWO FIFTH COLUMN===
                                                                    

Title

content

 

DIFFERENT LISTS


 

  • list item 1
  • list item 1
  • list item 1
  • list item 2
    • list item 1
    • list item 1
    • list item 1
u can check the list of all icons here.

DIFFERENT BOXES


======= Alert Info ==========

Info Message. Your Message Goes Here.


======= Alert Info With Colse Button ==========
  

Info Message. Your Message Goes Here.

 
======= Alert Info Have Button On It  ==========
 

Info Message. Your Message

Ok
======= Alert Success  ==========
  

Success Message. Your Message Goes Here.

======= Alert Success With Colse Button  ==========
   

Success Message. Your Message Goes Here.


======= Alert Success Have Button On It  ==========

Success Message. Your Message

Ok

======= Alert Warning ==========
      

Warning messages. Your Message Goes Here.

======= Alert Warning With Colse Button ==========
 

Warning messages. Your Message Goes Here.

 
======= Alert Warning Have Button On It  ==========

Warning messages. Your Message

Ok
======= Alert Error  ==========

Error Message. Your Message Goes Here.

======= Alert Error With Colse Button ==========
 

Error Message. Your Message Goes Here.

======= Alert Error Have Button On It ==========
  

Error Message. Your Message

 
 
  • CSS:
* Alert and message */
 .alert {
padding:10px;
margin-bottom:10px;
position:relative;
}
.icon_alert {
background-image:url(../images/icon-alert.png) !important;
width: 29px !important;
height: 32px !important;
float:left ;
margin-right:10px;
}
.icon_alert.info { background-position: 0 0  !important; }
.icon_alert.success { background-position: 0 -40px  !important; }
.icon_alert.error { background-position: 0 -122px !important; }
.icon_alert.warning { background-position: 0 -81px !important; }
.alertclose {
background: url(../images/icon-alert.png) -35px 0;
width: 22px;
height: 21px;
cursor:pointer;
float:left;
position: absolute;
right: -11px;
top: -11px;
}
.alert.info .alertclose { background-position:-35px 0; }
.alert.error .alertclose { background-position:-35px -89px; }
.alert.success .alertclose { background-position:-36px -30px; }
.alert.warning .alertclose { background-position:-36px -58px; }
.alert .button {
border: 1px solid #00529B;
color: #FFFFFF;
display: block;
left: 0;
bottom:5px;
margin: auto;
padding: 3px 15px;
position: absolute;
right: 0;
text-align: center;
width: 46px;
background: #2068a7; /* Old browsers */
background: -moz-linear-gradient(top, #2068a7 1%, #054c8c 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #2068a7), color-stop(99%, #054c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2068a7 1%, #054c8c 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2068a7 1%, #054c8c 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2068a7 1%, #054c8c 99%); /* IE10+ */
background: linear-gradient(to bottom, #2068a7 1%, #054c8c 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2068a7', endColorstr='#054c8c', GradientType=0 ); /* IE6-9 */
}
.alert.inbutton >h3 { margin-bottom:25px; }
.alert.info .button:hover {
-moz-box-shadow: 0 0 10px #fff;
-webkit-box-shadow:  0 0 10px #fff;
box-shadow: 0 0 10px #fff;
}
.alert.success .button {
border-color:#4f8a10;
background: #63972c; /* Old browsers */
background: -moz-linear-gradient(top, #63972c 1%, #467a0f 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #63972c), color-stop(99%, #467a0f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #63972c 1%, #467a0f 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #63972c 1%, #467a0f 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #63972c 1%, #467a0f 99%); /* IE10+ */
background: linear-gradient(to bottom, #63972c 1%, #467a0f 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63972c', endColorstr='#467a0f', GradientType=0 ); /* IE6-9 */
}
.alert.error .button {
border-color:#e0252f;
background: #e34049; /* Old browsers */
background: -moz-linear-gradient(top, #e34049 2%, #c6232c 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #e34049), color-stop(99%, #c6232c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e34049 2%, #c6232c 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e34049 2%, #c6232c 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e34049 2%, #c6232c 99%); /* IE10+ */
background: linear-gradient(to bottom, #e34049 2%, #c6232c 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e34049', endColorstr='#c6232c', GradientType=0 ); /* IE6-9 */
}
.alert.warning .button {
border-color:#b28033;
background: #ba8f4c; /* Old browsers */
background: -moz-linear-gradient(top, #ba8f4c 1%, #9d722f 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ba8f4c), color-stop(99%, #9d722f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ba8f4c 1%, #9d722f 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ba8f4c 1%, #9d722f 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ba8f4c 1%, #9d722f 99%); /* IE10+ */
background: linear-gradient(to bottom, #ba8f4c 1%, #9d722f 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba8f4c', endColorstr='#9d722f', GradientType=0 ); /* IE6-9 */
}
.alert .buttonbx {
position:absolute;
left:0;
right:0;
margin:auto;
width:170px;
bottom:0;
}
.buttonbx .button {
float: left;
margin: auto 2px;
position: relative;
}
.alert h3 {
font-size:12px;
padding:5px 0;
}
.alert.warning {
background:#feefb3;
border:1px solid #9f6000;
}
.alert.warning h3 { color:#9f6000; }
.alert.error {
background:#ffbaba;
border:1px solid #d8000c;
}
.alert.error h3 { color:#d8000c; }
.alert.success {
background:#dff2bf;
border:1px solid #4f8a10;
}
.alert.success h3 { color:#4f8a10; }
.alert.info {
background:#bde5f8;
border:1px solid #00529b;
}
.alert.info h3 { color:#1966a7; }
 
 
 
 
 

ICONS & Buttons


 

Icons

 

 

 

you can call any icon by changing the class from "icon-adjust" to "icon-[name of the icon]"

 


Buttons

 

there are 3 layout (icon-large & icon-medium & icon-small), Colors (green & blue & orange & pink & bordo & violet & black & gray) and Icons (any icon you can choose it from here)

  • HTML CODE:

 

                           
                           
                           Checkout

	

 

  • CSS:

 

  • you can change the buttons laytout by changing the class from "icon-large" to "icon-[size you want]".
  • you can change the buttons colors by changing the class from "green" to "[color you want]".
  • you can change the buttons icons by changing the class from "icon-shopping-cart" to "icon-[icon you want]" from here.
 

 

Contact Page


To edit the email that recive the messages from the visitors, please go here : submit.php


		/* config start */

		$emailAddress = '';

		/* config end */
	
	
put your email like this $emailAddress = 'youremail@domain.com'

configuration


if you need to edit thoes things ( Scroll to top - twitter - flickr - ticker - top menu - tap scripts ) you can edit them on this file: js/configuration.js.




    //Scroll to top
	$(document).ready(function(){
	
		// hide #back-top first
		$("#back-top").hide();
		
		// fade in #back-top
		$(function () {
			$(window).scroll(function () {
				if ($(this).scrollTop() > 100) {
					$('#back-top').fadeIn();
				} else {
					$('#back-top').fadeOut();
				}
			});
	
			// scroll body to 0px on click
			$('#back-top a').click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 800);
				return false;
			});
		});
	
	});
	
	
	//Twitter
	jQuery(function($){
		$(".tweet").tweet({
				username: "envatowebdesign",
				join_text: "auto",
				avatar_size: 32,
				count:2,
		});});
		
	//Flickr
	$(document).ready(function(){

		$('#basicuse').jflickrfeed({
			limit: 9,
			qstrings: {
				id: '36587311@N08'
			},
			itemTemplate: '
  • {{title}}
  • ' }); }); //Ticker //Tab script $(document).ready(function() { $('#myTab a:first').tab('show'); //news ticker $('#js-news').ticker({ titleText: '', prevID: true, nextID: true, controls: true, }); }); // Top Menu $(document).ready(function() { $("#responsive_menu li").click(function() { $(this).toggleClass('active'); $(".responsive-menu-items").slideToggle("fast"); $('.fullScreenSlideshowNav').toggle(); $('.supersizecaption').toggle(); }); $(".responsive-menu-items").html("
      "); $('.menu-main #main-menu > li').each(function(index) { var thisli = $(this).clone(); $(".resp-menu").append(thisli); $('.responsive-menu-items li').find('span').remove(); }); $('.resp-menu .sub-menu li .sub-menu a').each(function(index) { var nowtext = $(this).text(); var newtext = "- " + nowtext; $(this).text(newtext); }); $('.menu').superfish(); }); //Fancybox $(document).ready(function() { $(".fancybox-thumb").fancybox({ prevEffect : 'none', nextEffect : 'none', helpers : { title : { type: 'outside' }, thumbs : { width : 50, height : 50 } } }); }); //fancybox media $('.fancybox-media') .attr('rel', 'media-gallery') .fancybox({ openEffect : 'none', closeEffect : 'none', prevEffect : 'none', nextEffect : 'none', arrows : false, helpers : { media : {}, buttons : {} } }); /* * Different effects */ // Change title type, overlay closing speed $(".fancybox-effects-a").fancybox({ helpers: { title : { type : 'outside' }, overlay : { speedOut : 0 } } }); // Disable opening and closing animations, change title type $(".fancybox-effects-b").fancybox({ openEffect : 'none', closeEffect : 'none', helpers : { title : { type : 'over' } } }); // Set custom style, close if clicked, change title type and overlay color $(".fancybox-effects-c").fancybox({ wrapCSS : 'fancybox-custom', closeClick : true, openEffect : 'none', helpers : { title : { type : 'inside' }, overlay : { css : { 'background' : 'rgba(238,238,238,0.85)' } } } }); // Remove padding, set opening and closing animations, close if clicked and disable overlay $(".fancybox-effects-d").fancybox({ padding: 0, openEffect : 'elastic', openSpeed : 150, closeEffect : 'elastic', closeSpeed : 150, closeClick : true, helpers : { overlay : null } }); /**/ $('.fancybox').fancybox();

      END OF DOCUMENTATION


      Once again, thank you so much for purchasing this template.