Spotnews
Multi-Purpose Responsive Template
- Created: 12/01/2012
- Latest Update: 02/05/2013
- By: Spotlayer Team
- shop.spotlayer.com/demo/templates/spotnews/
- Email: sales@spotlayer.com
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
TEMPLATE OVERVIEW
Spotnews works in: |
Template features: |
Homepage: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
New features: |
|
|
|
|
|
|
|
|
|
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)
- Your code should look like the following.
- Navigation CSS:
/* =============================================================================
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)
- Your code should look like the following.
- Navigation CSS:
/* 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;
}
WORKING WITH SLIDERS
Flex Slider
- HTML code:
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..
- JAVASCRIPT INITIALIZATION:
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
- HTML code:
Scary view from the hurricane hit the groundTaken at Cloud Break at an outer reef in Fijienjoying her private pool then shaking herself dryhusband drove several hundred miles to AlbuquerqueScary view from the hurricane hit the groundTaken at Cloud Break at an outer reef in Fiji
- JAVASCRIPT INITIALIZATION:
$("#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:
DISOVER STATUE IN THE DEEP OCEAN
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam ipsum..
SCARY VIEW FROM THE HURRICANE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam ipsum..
DROVE SEVERAL HUNDRED MILES
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam ipsum..
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:
Modern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
Read MoreModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
Read MoreModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
Read MoreModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
Read MoreModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
Read MoreModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
Read More
- JAVASCRIPT INITIALIZATION:
$('.carousel-boxs').contentcarousel();
autoplay: true;
});
Content Rotater Slider
- HTML Code:
Scary view from the hurricane hit the groundModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
Taken at Cloud Break at an outer reef in FijiModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
enjoying her private pool then shaking herself dryModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
husband drove several hundred miles to AlbuquerqueModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
storm on Tonle Sap Great Lake in CambodiaModern technological innovations have endowed all of us with many advantages that make.
Posted In 25 July 2012
- JAVASCRIPT INITIALIZATION:
$('#cr-container').crotator({
// slideshow on
autoplay: false
});
COLUMN LAYOUTS AND HEADERS
Column Layouts:
- ===ONE HALF COLUMN===
Title
content
Title
content
- ===ONE THIRD COLUMN===
Title
content
Title
content
Title
content
- ===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
- HTML CODE:
- 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
- HTML CODE:
======= 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 ==========
======= 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 ==========
======= 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 ==========
======= 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 ==========
- 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: 'END OF DOCUMENTATION
Once again, thank you so much for purchasing this template.