“Optimas - Responsive HTML & CSS Template” Documentation by “acbgomel” v1.6
“Optimas Premium Theme Documentation”
Created: 21/07/2014
By: abcgomel
Email: abcgomel@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.
Table of Contents
- Template overview
- Static elements
- Columns
- Icons
- Portfolio
- Forms
- CSS in the template
- JavaScript in the template
- PHP in the template
- Psd files
- Sources, credits and helpfull links
Template overview - top
Hi, firstly I would like to thank you for purchasing my template. In this section I`ll briefly introduce Optimas features. So lets start.
Template features:
- Fully Responsive Design
- Retina Ready
- Unlimited Color Options
- Valid HTML5, CSS3
- 4 Slider Variations
- 2 Premium Sliders included and Carousel slider
- Unlimited Colors ( just change color code)
- 12 premade colors (very easy to customize your own color)
- 20 backgrounds patterns
- Clean coded and well documented
- Skeleton CSS Framework
- SEO Optimized
- Responsive Filterable Portfolio
- Responsive Pricing Table
- Touch, Swipe and Tap support for all elements
- Working Twitter and Flickr Feeds
- Working php contact form with validation
- Over 250 icons
- Cross Browser compatible
- Thoroughly documented
- Google Fonts
- jQuery powered
- PSDs included in package (19 Layered PSD Files)
- ...
To make some order in this documentation I`ll start with all static elements on the template and then I`ll cover other problematic elements.
Static elements - top
Usually on the website there are some static elements such us logo, navigation, footer etc. In this section I`ll cover the static elements of Optimas html template. Here you could find info how to change the logo, how to edit navigation, how to edit footer...
Logo
This code below stands for the logo section
<div id="logo-container"> <a href="index.html" class="logo" rel="home" title="Home"></a> </div>and code in footer.
<div class="clearfix"> <a href="index.html" class="logo-footer clearfix" rel="home" title="Home"></a> </div>
here is the CSS code for the Logo:
/* LOGO
================================================== */
#logo-container {
float:left;
margin-bottom: 35px;
margin-top: 35px;
}
.logo {
width:88px;
height:15px;
float:left;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-position: left top;
}
.logo-footer {
background-image: url(../images/logo-footer.png);
background-position: left top;
background-repeat: no-repeat;
float: left;
height: 15px;
width: 88px;
margin-bottom: 8px;
margin-top: 8px;
}
Change color
If you want to change color of the template on any preset, you must change css link.
Example, change yellow color to blue
to:<link rel="stylesheet" href="css/colors/yellow.css" id="template-color">after:
<link rel="stylesheet" href="css/colors/blue.css" id="template-color">
All predefined colors are in the folder "css/colors/"
If you want to add any of your own color, you need change Hex code of color in css file
Change background
If you want to change background of the template on any preset, you must replace bg-body.jpg to your image, in folder "images". All predefined background are in the folder "images/bg/"
Main Navigation
In this template I have used some jQuery improved dropdown menu but the menu itself is easy to edit. Its structure base on a nested unorederd lists structure. Your code should look like the following.
<!-- TOP MENU --> <nav id="main-nav"> <ul class="sf-menu"> <li class="current"><a href="index.html">Home</a> <ul> <li><a href="index2.html">Home 2</a></li> <li><a href="index3.html">Home 3</a></li> <li><a href="index4.html">Home 4</a></li> <li><a href="index-all.html">Home all</a></li> </ul> </li> <li><a href="elements.html">Features</a> <ul> <li><a href="elements.html">Elements</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="pricing-tables.html">Pricing tables</a></li> <li><a href="404.html">404 Error</a></li> <li><a href="#">3D level menu</a> <ul> <li><a href="#">Menu item</a></li> <li><a href="#">Menu item</a></li> </ul> </li> </ul> </li> <li><a href="portfolio.html">Portfolio</a> <ul> <li><a href="portfolio.html">2 column v.1</a></li> <li><a href="portfolio-2.html">2 column v. 2</a></li> <li><a href="portfolio1-1.html">3 column v. 1</a></li> <li><a href="portfolio1-2.html">3 column v. 2</a></li> <li><a href="portfolio2-1.html">4 column v. 1</a></li> <li><a href="portfolio2-2.html">4 column v. 2</a></li> <li><a href="portfolio-single.html">Portfolio single</a></li> </ul> </li> <li><a href="blog.html">Blog</a> <ul> <li><a href="blog-single.html">Blog-single</a></li> </ul> </li> <li ><a href="contact.html">Contact</a></li> </ul> </nav>
here is the CSS code for the Main Navigation:
/* MAIN MENU
================================================== */
#main-nav {
float:left;
}
nav#main-nav select {
display:none; /* for mobile */
}
#main-nav ul {
margin: 0;
padding: 0;
}
#main-nav li {
float: left;
list-style: none outside none;
margin: 0;
}
#main-nav ul li li:first-child {
border-top:none;
}
#main-nav .current > a {
color:#5a5a5a;
margin-top:-1px;
border-top: 3px solid #f1c832;
padding-top:17px;
}
#main-nav .current li.current a, #main-nav .current li.current li.current a {
color:#5a5a5a;
margin-top:0;
border-top: none;
padding-top:12px;
background-color:#d6d6d6;/**/
}
#main-nav a:hover {
text-shadow: none;
color:#5a5a5a;
}
#main-nav a {
color: #808080;
display: block;
font-size: 14px;
position: relative;
text-decoration: none;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
padding-top: 19px;
padding-bottom: 0px;
}
#main-nav ul.sf-menu li:first-child a {
margin-left: 0;
}
.sf-menu li > a {
padding-bottom:0 !important;
text-transform: uppercase;
margin-right:12px ;
margin-left: 12px ;
font-family: 'OswaldLight', Arial, Helvetica, sans-serif;
}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
margin-top: 0px !important;
margin-left: 10px !important;
}
#main-nav ul.sf-menu li:first-child ul {
margin-left: 0px !important;
}
.sf-menu ul ul {
margin: 0 !important;
}
.sf-menu ul li {
width: 150px;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: /*5.5em*/40px; /* match top ul list item height */
z-index: 99;
text-shadow:none;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 150px !important; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 100em; /* match ul width */
top: 0;
}
.sf-menu li li {
margin: 0 !important;
background: #f0f0f0;
border-top: 1px solid #d6d6d6;
}
#main-nav .current li.current li a{
background-color: #f0f0f0;
color: #808080;
}
.sf-menu li li a {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
text-transform: none !important;
text-shadow: none !important;
font-size: 12px !important;
padding-left:15px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
margin-right:0px ;
margin-left: 0px ; /*14*/
}
.sf-menu li li a:hover{
color: #f0f0f0 !important;
background: #484848 !important;
}
#main-nav ul.sf-menu li ul {
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
box-shadow:2px 2px 0 rgba(0,0,0, 0.1);
}
Footer Style
The footer section source code:
<!-- FOOTER --> <footer> <div class="footer-content-bg"> <a class="scrollup" href="#">Go To Top</a> <div class="container clearfix"> <div class="four columns m-bot-25"> <div class="clearfix"> <a href="index.html" class="logo-footer clearfix" rel="home" title="Home"></a> </div> <p>Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed. Donec id elit non mi porta gravida at eget. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> <a class="right r-m-plus" href="portfolio.html"> <span class="bold">Read</span> More </a> </div> <div class="four columns m-bot-25"> <h3 class="caption"><span class="bold">LATEST</span> FROM BLOG</h3> <ul class="latest-post"> <li> <h4 class="title-post-footer"><a href="blog-single.html">Donec id elit</a></h4> <h4 class="date-post-footer">July 10, 2012</h4> <p>Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed. Donec id elit non mi porta gravida at eget...</p> </li> <li> <h4 class="title-post-footer"><a href="blog-single.html">Donec id elit</a></h4> <h4 class="date-post-footer">July 10, 2012</h4> <p>Donec id elit non mi porta gravida at eget. Pellentesque tristique... </p> </li> </ul> </div> <div class="four columns m-bot-25"> <h3 class="caption"><span class="bold">LATEST</span> TWEETS</h3> <div class="tweet"></div> </div> <div class="four columns m-bot-25"> <h3 class="caption"><span class="bold">CONTACT</span> INFO</h3> <p>Pellentesque tristique volutpat nunc, rhoncus augue tristique sed.</p> <div title="Location" class="icon_loc">Corporation, Inc. 123 Aolsom Ave, Suite 600 New York, CA 246012</div> <div title="Phone" class="icon_phone">(123) 456-7890<br>(123) 987-6540</div> <div title="Email" class="icon_mail"><a href="#">email@fincom.com</a></div> </div> </div> </div> <div class="footer-copyright-bg"> <div class="container clearfix"> <div class="eight columns"> <nav class="clearfix" id="footer-nav"> <ul class="footer-menu"> <li><a href="index.html">Home</a></li> <li><a href="elements.html">Features</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> <div class="eight columns right-text"> Copyright © Optimas - Template by <a class="author" href="http://themeforest.net/user/abcgomel/portfolio">AbcGomel</a> </div> </div> </div> </footer>
The css code for the Footer:
/* FOOTER
================================================== */
footer {
color:#909090;
min-width:100% !important;
}
.right {
float:right;
}
.left {
float:left;
}
.right-text {
text-align:right;
}
.center-text {
text-align:center;
}
.footer-content-bg {
padding-top: 20px;
background-color: #5a5a5a;
}
footer .caption {
float:none;
color:#fff;
}
.logo-footer {
background-image: url(../images/logo-footer.png);
background-position: left top;
background-repeat: no-repeat;
float: left;
height: 15px;
width: 88px;
margin-bottom: 8px;
margin-top: 8px;
}
footer h3, footer h4 {
font-weight:normal;
}
.title-post-footer {
margin-top:12px;
font-size:12px;
line-height:18px;
}
.title-post-footer a {
color:#f1c832;
font-weight:normal;
}
.title-post-footer a:hover {
color:#e3e3e3;
font-weight:normal;
}
ul.latest-post {
padding:0;
margin:0;
margin-top: 10px;
}
ul.latest-post li:last-child {
border:none;
padding-bottom: 0px;
}
.date-post-footer {
color:#ACACAC;
font-size:11px;
line-height:11px;
font-style:italic;
}
.latest-post li p {
background-color:#696969;
margin-bottom: 0;
padding: 8px 10px;
color:#afaeae;
}
.icon_loc {
background: url(../images/icon_footer_loc.png) no-repeat scroll left 3px transparent;
margin-bottom: 6px;
padding: 0 0 0 30px;
}
.icon_phone {
background: url(../images/icon_footer_phone.png) no-repeat scroll left 4px transparent;
margin-bottom: 6px;
padding: 0 0 0 30px;
}
.icon_mail {
background: url(../images/icon_footer_mail.png) no-repeat scroll left 5px transparent;
line-height: 24px;
margin-bottom: 6px;
padding: 0 0 0 30px;
}
.icon_mail a{
color:#909090;
}
.icon_mail a:hover{
color:#f1c832;
}
.footer-copyright-bg {
color:#a1a1a1;
background-color: #464646;
}
.footer-copyright-bg .eight.columns {
padding-top: 25px;
padding-bottom: 20px;
}
.footer-menu {
padding: 0px;
margin:0px;
list-style: none;
}
#footer-nav li {
background: none repeat scroll 0 0 transparent;
border: medium none;
display: inline-block;
list-style: none outside none;
margin: 0 -3px 0 0;
}
#footer-nav li:first-child a {
border-left: medium none;
padding-left: 0;
}
#footer-nav li a {
border-left: 1px solid #686868;
display: block;
padding: 0 15px;
color:#a1a1a1;
text-transform: uppercase;
font-size:14px;
font-family: 'OswaldLight', Arial, Helvetica, sans-serif;
}
#footer-nav li a:hover {
color:#f1c832;
}
#footer-nav li:last-child a {
padding-right: 0;
}
a.author {
color:#cecece;
}
a.author:hover {
color:#f1c832;
}
footer a.r-m-plus {
color:#fff;
}
footer .r-m-plus:after{
background:#404040;
background-image: url(../images/plus.png);
background-position: center center;
background-repeat: no-repeat;
}
/* TWITTER
================================================== */
.tweet a:hover {
color:#e3e3e3;
}
.tweet_list {
margin:0;
padding:0;
margin-top: 2px;
margin-bottom:10px;
}
.tweet_list li {
padding-bottom: 12px;
padding-top: 0px;
}
.tweet_list li:last-child {
border:none;
padding-bottom: 0px;
}
.tweet_time {
display:block;
}
.tweet_time a{
color:#acacac;
font-style:italic;
}
.at {
color:#f1c832;
}
/*****************/
.tweet_text {
background-color:#696969;
display:inline-block;
padding:10px;
padding-bottom:8px;
margin-bottom: 5px;
font-size:11px;
color:#afaeae;
}
/* BACK TO TOP BUTTON
================================================== */
.footer-content-bg {
position:relative;
}
.footer-content-bg a.scrollup {
height: 16px;
left: 50%;
margin-left: -16px;
position: absolute;
text-indent: -9999px;
top: -16px;
width: 32px;
background-attachment: scroll;
background-color: transparent;
background-image: url(../images/scrollup.png);
background-repeat: no-repeat;
background-position: 0 0;
}
Sequence slider Code
This Template Comes With Sequence slider (2 themes) & Flexslider (2 themes). Both Sliders are easy to use and update.
Html code for Sequence slider (first theme):
<!-- SLIDER --> <div id="slider-container" class="container clearfix"> <div class="sixteen columns "> <div id="sequence-theme"> <div id="sequence"> <div class="arrows-nav "> <img class="prev" src="images/bt-prev.png" alt="Previous Frame" ><img class="next" src="images/bt-next.png" alt="Next Frame" > </div> <ul> <!-- SLIDE --> <li class="animate-in"> <img class="bg-slide" src="images/bg-1.jpg" alt="bg 1" /> <div class="main-text"><span class="size-14">LOREM ALES</span><br><span class="size-28">IPSUM ON</span><br><span class="size-14">VITO IT DELI</span> <span class="size-41 color">SERATION</span></div> <img class="model" src="images/model1.png" alt="Model 1" /> </li> <!-- SLIDE --> <li> <img class="bg-slide" src="images/bg-2.jpg" alt="bg 2" /> <div class="main-text"><span class="size-14">MAECENAS ALES</span><br><span class="size-28">ULTRICIES ON</span><br><span class="size-14">VITO IT VESTIBULUM</span> <span class="size-41 color">VIVERRA </span></div> <img class="model" src="images/model2.png" alt="Model 2" /> </li> <!-- SLIDE --> <li> <img class="bg-slide" src="images/bg-1.jpg" alt="bg 3" /> <div class="main-text"><span class="size-14">LOREM ALES</span><br><span class="size-28">VIVAMUS QUAM</span><br><span class="size-14">VITO IT DELI IN FINE</span> <span class="size-41 color">PELLENTESQUE </span></div> <img class="model" src="images/model3.png" alt="Model 3" /> </li> </ul> </div> <ul class="nav"> <li><img src="images/tn-model1.jpg" alt="Model 1" /></li> <li><img src="images/tn-model2.jpg" alt="Model 2" /></li> <li><img src="images/tn-model3.jpg" alt="Model 3" /></li> </ul> <ul class="controls"> <li class="status"></li> </ul> </div> </div> </div>
Css for Sequence slider (first theme):
Css for Sequence Slider is very big. It located in folder "css" and has name "sequencejs-theme.modern-slide-in.css" and "sequencejs-theme.modern-slide-in-ie.css", and "sequencejs-theme.modern-slide-in-ie8.css"(for Internet Explorer 8 and earlier versions)
Html code for Sequence slider (second theme):
<!-- SLIDER --> <div id="slider-container" class="container"> <div id="sequence-theme"> <div id="sequence" class="theme-2"> <img class="prev" src="images/bt-prev-black.png" alt="Previous Frame" /> <img class="next" src="images/bt-next-black.png" alt="Next Frame" /> <ul> <li class="animate-in"> <h2 class="title">Welcome to Optimas</h2> <h3 class="subtitle">Multi-purpose Creative Business</h3> <p class="subtitle-2 slider-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> <p class="subtitle-3"> <a class="button get-theme" href="#">GET THE THEME</a> </p> <img class="model" src="images/model2-1.png" alt="Model 1" /> </li> <li> <h2 class="title slide-2-light">Lorem Ipsum</h2> <h3 class="subtitle slide-2-bold">ic fravus sinber</h3> <p class="subtitle-2 slide-2-yellow">& tristiqueve porttitor</p> <p class="subtitle-3"> <a class="button get-theme" href="#">GET THE THEME</a> </p> <img class="model" src="images/model2-2.png" alt="Model 2" /> </li> <li> <h2 class="title">Welcome to Optimas</h2> <h3 class="subtitle ">Multi-purpose Creative Business</h3> <p class="subtitle-2 slider-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p> <p class="subtitle-3"> <a class="button get-theme" href="#">GET THE THEME</a> </p> <img class="model" src="images/model2-3.png" alt="Model 3" /> </li> </ul> </div> </div> </div>
Css for Sequence slider (second theme):
Css for Sequence Slider is very big. It located in folder "css" and has name "sequencejs-theme.modern-slide-in2.css" and "sequencejs-theme.modern-slide-in-ie2.css"(for Internet Explorer 8 and earlier versions)
Flexslider Code
HTML code for Flexslider (first theme):
<!-- SLIDER --> <div id="slider-container" class="container clearfix"> <div class="sixteen columns "> <div class="flexslider"> <ul class="slides"> <li> <img src="images/img-gallery.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold" >SUT</span> ID ELIT</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> <a class="right r-m-plus r-m-full" href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> <li> <img src="images/img-gallery2.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold">DIGNISSIM</span> MAGNA</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Mauris pulvinar odio in justo ornare placerat mollis arcu tristique. </p> <a class="right r-m-plus r-m-full" href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> <li> <img src="images/img-gallery3.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold">SIT</span> LECTUS AMET</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> <a class="right r-m-plus r-m-full" href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> </ul> </div> </div> </div>
Css code for Flexslider (first theme):
Css for Flexslider is very big. It located in folder "css" and has name "flexslider.css"
HTML code for Flexslider (second theme):
<!-- SLIDER --> <div id="slider-container" class="container clearfix"> <div class="sixteen columns "> <div class="flexslider"> <ul class="slides"> <li> <img src="images/img-gallery.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold" >SUT</span> ID ELIT</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> <a class="right r-m-plus " href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> <li> <img src="images/img-gallery2.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold">DIGNISSIM</span> MAGNA</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Mauris pulvinar odio in justo ornare placerat mollis arcu tristique. </p> <a class="right r-m-plus " href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> <li> <img src="images/img-gallery3.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold">SIT</span> LECTUS AMET</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> <a class="right r-m-plus " href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> </ul> </div> </div> </div>
Css code for Flexslider (second theme):
Css for Flexslider is very big. It located in folder "css" and has name "flexslider2.css"
Warning for users of older versions IE
If you dont need this warning, you can simply delete it or change <!--[if lte IE 7]> to <!--[if lte IE 8]> for IE8 message, for example. HTML code for warning for users of older versions IE:
<!--[if lte IE 7]> <div id="ie-container"> <div id="ie-cont-close"> <a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='images/ie-warning-close.jpg' style='border: none;' alt='Close'></a> </div> <div id="ie-cont-content" > <div id="ie-cont-warning"> <img src='images/ie-warning.jpg' alt='Warning!'> </div> <div id="ie-cont-text" > <div id="ie-text-bold"> You are using an outdated browser </div> <div id="ie-text"> For a better experience using this site, please upgrade to a modern web browser. </div> </div> <div id="ie-cont-brows" > <a href='http://www.firefox.com' target='_blank'><img src='images/ie-warning-firefox.jpg' alt='Download Firefox'></a> <a href='http://www.opera.com/download/' target='_blank'><img src='images/ie-warning-opera.jpg' alt='Download Opera'></a> <a href='http://www.apple.com/safari/download/' target='_blank'><img src='images/ie-warning-safari.jpg' alt='Download Safari'></a> <a href='http://www.google.com/chrome' target='_blank'><img src='images/ie-warning-chrome.jpg' alt='Download Google Chrome'></a> </div> </div> </div> <![endif]-->
Css code for warning for users of older versions IE:
Css for "warning for users of older versions IE" located in folder "css" and has name "ie-warning.css"
Columns - top
This template has a responsive layout optimized for all resolutions, based on Skeleton V1.1 grid. All the elements in the code are named with appropriate IDs and Classes, so you can easily find what you need to edit in the HTML and the CSS.
All detail information and documentation of Skeleton grid system - http://www.getskeleton.com
Icons - top
In addition to usual image icons Optimas theme integrate Font Awesome with over 249 icons. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. You can read more about it here.
For more information - Font Awesome
Portfolio - top
Portfolio Uses the same grid as columns do, so it's easy to build portfolio using the same classes as when building a column.Here's the example of Two Columns Portfolio
<!-- CONTENT --> <div class="container filter-portfolio clearfix"> <ul id="portfolio" class="clearfix"> <!-- PORTFOLIO ITEM --> <li data-id="id-1" data-type="category1" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-1.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Lorem</span> Ipsum</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Lorem</span> Ipsum</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-2" data-type="category2" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-2.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Amet</span> Mauris</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Amet </span> Mauris</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-3" data-type="category3" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-3.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Craes</span> Nustro</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Craes</span> Nustro</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-4" data-type="category1" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-4.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Sed</span> Lectus</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Sed</span> Lectus</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-5" data-type="category2" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-5.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Poin</span> Placerat</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Poin</span> Placerat</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-6" data-type="category3" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-6.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Mauris</span> Lectus</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Mauris</span> Lectus</a> </div> </div> </li> </ul> </div>
Here's the CSS code for Portfolio pages
/* PORTFOLIO
============================================*/
ul#portfolio {
margin:0 ;
padding:0 ;
transition:none !important;
}
.filter-portfolio ul {
margin:0 ;
padding:0 ;
}
ul#filter {
margin:0;
padding:0;
float:right;
}
ul#filter li{
float:left;
margin:0;
padding:0;
}
ul#filter li a{
padding:15px;
margin: 0;
color:#fff;
background-color:#5a5a5a;
font-size:12px;
line-height:18px;
font-weight:normal;
display:block;
}
ul#filter li a:hover{
color: #fff ;
background-color: #f1c832;
}
.filter-portfolio .content-under-container-white {
margin-bottom: 25px;
}
ul#filter li.current a{
position: relative;
background-color: #f1c832;
color: #fff ;
}
/******PORTFOLIO SINGLE******/
ul.project-details {
margin:15px 0 15px 0;
padding:0;
}
.project-details li{
height:30px;
margin-top:10px;
line-height:30px;
}
.project-details li:first-child{
margin-top:0;
}
.port-cat-icon {
display:block;
float:left;
margin-right: 10px;
height:30px;
width:31px;
background-color:#d1d1d1;
background-image: url(../images/next-small.png);
background-repeat: no-repeat;
background-position: center center;
}
.portfolio-pagination {
float: right;
display: inline-block;
margin: 0;
padding: 0;
}
.portfolio-pagination li {
float: left;
}
.portfolio-pagination .pag-next {
background-color:#5a5a5a;
background-image: url(../images/next-small.png);
background-position: center center;
background-repeat: no-repeat;
display: block;
height: 48px;
width: 25px;
}
.portfolio-pagination .pag-prev {
background-color:#5a5a5a;
background-image: url(../images/prev-small.png);
background-position: center center;
background-repeat: no-repeat;
display: block;
height: 48px;
width: 25px;
}
.portfolio-pagination .pag-prev:hover, .portfolio-pagination .pag-next:hover{
background-color:#f1c832;
}
Portfolio and Blog Hover effects
All hover effects were made using only CSS. For more details go to
Html code for hover effects:
<div class="view view-first"> <img src="images/content/port-2-6.jpg" > <div class="mask"> <h2><span class="bold">Mauris</span> Lectus</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec eros ligula. Vestibulum porta, purus ut lacinia.</p> <a href="portfolio-single.html" class="link info"></a><a href="images/content/port-big-6.jpg" class="lightbox zoom info"></a> </div> </div>
CSS code for hover effects:
/* HOVER EFFECT
================================================== */
.view .mask,.view .content {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
margin: 20px 0 0 0;
}
.view p {
font-size: 12px;
position: relative;
color: #fff;
text-align: center;
}
.view a.link {
height: 21px;
width: 21px;
display: inline-block;
text-decoration: none;
padding: 10px;
background-color: #5a5a5a;
background-image: url(../images/link-icon.png);
background-repeat: no-repeat;
background-position: center center;
}
.view a.zoom {
height:21px;
width:21px;
display: inline-block;
text-decoration: none;
padding: 10px;
margin-right: 20px;
background-color: #5a5a5a;
background-image: url(../images/zoom-icon.png);
background-repeat: no-repeat;
background-position: center center;
}
.view a.zoom:hover, .view a.link:hover {
background-color: #f1c832;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
width:100%;
height:100%;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(32,33,32, 0.8);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
font-family: 'OswaldLight', Arial, Helvetica, sans-serif;
font-size:24px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first h2 .w-b-bottom {
border-bottom:1px solid #fff;
padding-bottom: 14px;
padding-left: 25px;
padding-right: 25px;
}
.view-first p {
padding-right:10px;
padding-left:10px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
/*-webkit-transform: scale(0.1, 0.1);*/
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.15);
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
/*-webkit-transform: scale(1, 1);*/
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*****HOVER FOR BLOG *****/
.blog-item .view .mask h2 {
margin-bottom: 25px;
margin-top: 80px;
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/*****HOVER FOR 2COL PORTFOLIO*****/
.eight.columns .view-first h2 {
margin-bottom: 25px;
margin-top: 72px;
}
/*****HOVER FOR 3COL PORTFOLIO*****/
.one-third.column .view-first p {
display:none;
}
.one-third.column .link, .one-third.column .zoom {
margin-top: 25px;
}
/*****HOVER FOR 4COL PORTFOLIO*****/
.our-projects .link, .our-projects .zoom, .four.columns .link, .four.columns .zoom {
margin-top: 45px;
}
.our-projects .view-first p, .four.columns .view-first p {
display:none;
}
.our-projects .view-first h2, .four.columns .view-first h2 {
display:none;
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/*****HOVER FOR 2COL PORTFOLIO*****/
.eight.columns .view-first h2 {
margin-top: 40px;
}
/*****HOVER FOR 3COL PORTFOLIO*****/
.one-third.column .view-first h2 {
margin-top:8px;
}
.one-third.column .view-first .w-b-bottom {
padding-bottom:5px;
}
.one-third.column .link, .one-third.column .zoom {
margin-top: 5px;
}
/*****HOVER FOR 4COL PORTFOLIO*****/
.our-projects .link, .our-projects .zoom, .four.columns .link, .four.columns .zoom {
margin-top: 30px;
}
/*****HOVER FOR BLOG *****/
.blog-item .view .mask h2 {
margin-bottom: 27px;
margin-top: 50px;
}
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 479px) {
/*****HOVER FOR 2COL PORTFOLIO*****/
.view h2 {
margin-bottom: 25px;
}
/*****HOVER FOR BLOG *****/
.blog-item .view .mask p, .blog-item .view .mask h2 {
display:none;
}
.blog-item .view .mask a {
margin-top: 47px;
}
/*****HOVER FOR 2COL PORTFOLIO*****/
.eight.columns .view-first h2 {
margin-top:16px;
}
/*****HOVER FOR 4COL PORTFOLIO*****/
.our-projects .link, .our-projects .zoom {
margin-top: 65px;
}
.four.columns .link, .four.columns .zoom {
margin-top: 0px;
}
.four.columns .view-first h2 {
display:block;
margin-top:16px;
}
/*****HOVER FOR 3COL PORTFOLIO*****/
.one-third.column .link, .one-third.column .zoom {
margin-top: 0px;
}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/*****HOVER FOR BLOG *****/
.blog-item .view .mask p {
display:none;
}
.blog-item .view .mask h2 {
margin-top: 27px;
display:block;
}
.blog-item .view .mask a {
margin-top: 0px;
}
/*****HOVER FOR 2COL PORTFOLIO*****/
.eight.columns .view-first h2 {
margin-top: 58px;
}
/*****HOVER FOR 4COL PORTFOLIO*****/
.our-projects .link, .our-projects .zoom {
margin-top: 35px;
}
.four.columns .link, .four.columns .zoom {
margin-top: 15px;
}
.four.columns .view-first p {
display:inline-block;
margin-top: 0px;
}
.four.columns .view-first h2 {
display:block;
margin-bottom: 10px;
margin-top: 60px;
}
/*****HOVER FOR 3COL PORTFOLIO*****/
.one-third.column .view-first h2 {
margin-top:55px;
margin-bottom:12px;
}
.one-third.column .view-first p {
display:inline-block;
margin-top: 0px;
}
.one-third.column .link, .one-third.column .zoom {
margin-top: 15px;
}
}
Forms - top
Here's the example of main contact form
<form action="send.php" id="contact-form" method="post" class="clearfix"> <fieldset class="field-1-3 left"> <label>Name</label> <input type="text" name="name" id="Myname" onblur="if(this.value=='')this.value='Your name...';" onfocus="if(this.value=='Your name...')this.value='';" value="Your name..." class="text requiredField m-bot-20" > </fieldset > <fieldset class="field-1-3 left"> <label>Email</label> <input type="text" name="email" id="myemail" onblur="if(this.value=='')this.value='Your email...';" onfocus="if(this.value=='Your email...')this.value='';" value="Your email..." class="text requiredField email m-bot-20" > </fieldset> <fieldset class="field-1-3 left"> <label>Subject</label> <input type="text" name="subject" id="mySubject" onblur="if(this.value=='')this.value='Subject...';" onfocus="if(this.value=='Subject...')this.value='';" value="Subject..." class="text requiredField subject m-bot-20" > </fieldset> <fieldset class="field-1-1 left"> <label>Message</label> <textarea name="message" id="Mymessage" rows="5" cols="30" class="text requiredField m-bot-20" onblur="if(this.value=='')this.value='Your message...';" onfocus="if(this.value=='Your message...')this.value='';" >Your message...</textarea> </fieldset> <fieldset class="left"> <input name="Mysubmitted" id="Mysubmitted" value="SEND" class="button gray medium" type="submit" > </fieldset> </form>
CSS Code for form style
/* CONTACT FORM
================================================== */
.contact-form-container {
padding-top:15px;
}
#contact-form, #comment-form {
margin-top:7px;
}
#contact-form label, #comment-form label{
visibility:hidden;
display:none;
}
.field-1-1 textarea{
width:700px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.field-1-3 input{
width:220px;
margin-right:20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.field-1-3:nth-of-type(3n) input{
margin-right:0;
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
/*****CONTACT FORM*****/
.field-1-3 input{
width:172px;
margin-right:20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.field-1-1 textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
width: 556px;
}
#contact-form .iconed-box {
padding-left: 60px;
width:172px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
}
/* #Mobile (Portrait) (4)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
/*****CONTACT FORM******/
.field-1-3 input{
width:300px;
margin-right:0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.field-1-1 textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
}
#contact-form .iconed-box {
padding-left: 60px;
width:300px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
}
CSS in the template - top
All CSS files must be included in the <head> section before the javascript files. Below is all the css files that come with the theme.The default style is "style.css".
<!-- CSS begin --> <link rel="stylesheet" type="text/css" href="css/style.css" > <link rel="stylesheet" type="text/css" href="css/skeleton.css" > <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" > <link rel="stylesheet" type="text/css" href="css/styler.css"> <link rel="stylesheet" href="css/colors/yellow.css" id="template-color"> <!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/ie-warning.css" ><![endif]--> <!--[if lte IE 9]><link rel="stylesheet" type="text/css" media="screen" href="css/style-ie.css" /><![endif]--> <!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/ei8fix.css" ><![endif]--> <!-- CSS end -->
JavaScript in the template - top
This template uses several jQuery files, all of them are placed in "js" folder.
<!-- JS begin --> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.jcarousel.js"></script> <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script> <script type="text/javascript" src="js/jQuery.BlackAndWhite.min.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <script type="text/javascript" src="js/jquery.validate.min.js"></script> <script type="text/javascript" src="js/jflickrfeed.min.js"></script> <script type="text/javascript" src="js/jquery.quicksand.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/styler.js"></script> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- JS end -->
In "main.js" you have all custom code, wich is well commented and ready to use and update.
<script type="text/javascript" src="js/main.js"></script>
Twitter Feeds
To Use twitter feeds you will need a small part of HTML and JavaScript code.Twitter feeds uses a a div with class "tweet"
<div class="tweet"></div>
But the real magic happens in JavaScript.In "main.js" and "jquery.tweet.js" document you will found code that makes twitter feeds work.
//TWITTER FEED----------------------------------------------------
$(document).ready(function() {
$(".tweet").tweet({
// join_text: false,
username: "abcgomel", // Change username here
modpath: './js/twitter/', // Twitter files path
avatar_size: false, // you can active avatar
count: 3, // number of tweets
loading_text: "loading tweets..."
});
});
You'll have to replace username "envato" with your own, and you can change the "count:3" wich represents the number of tweets.
Then, you need a consumer key and secret keys. Get one from dev.twitter.com/apps.Edit twitter/index.php file and replace variables with your Consumer and oAuth Keys.
/*************************************** config ***************************************/
// Your Twitter App Consumer Key
private $consumer_key = 'YOUR_CONSUMER_KEY';
// Your Twitter App Consumer Secret
private $consumer_secret = 'YOUR_CONSUMER_SECRET';
// Your Twitter App Access Token
private $user_token = 'YOUR_ACCESS_TOKEN';
// Your Twitter App Access Token Secret
private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';
Flickr Feeds
To Use flickr feeds you will need a small part of HTML and JavaScript code. Flickr feeds uses a a ul with id "flickrfeed"
<ul id="flickrfeed" class="clearfix"></ul>
But the real magic happens in JavaScript. In "main.js" and "jflickrfeed.min.js" document you will found code that makes flickr feeds work.
//FLICKR FEED------------------------------------------------------------------
$(document).ready(function() {
$('#flickrfeed').jflickrfeed({
limit: 6,
qstrings: {
id: '91212552@N07'
},
itemTemplate:
'You'll have to replace id "91212552@N07" with your own, and you can change the "limit:6" wich represents the number of images.
Fancybox plugin
This is what makes fancybox plugin work.
//FANCYBOX-------------------------------------------------------
$(document).ready(function() {
$(".lightbox").live("mousedown", function()
{
$(this).fancybox(
{
'titleShow' : false,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
$("a.iframe").fancybox(
{
'titleShow' : true,
'autoDimensions' : true,
'width' : 800,
'height' : 450,
'autoScale' : true,
'type' : 'iframe'
});
});
For more information - http://fancybox.net
Tabs
If you want you can place tabs in any part of the page, simple add some HTML markup and little JQuery Code.
<!-- Tabs --> <div class="in-one-third in-column"> <h3 class="title-block">Tabs</h3> <ul class="tabs-nav"> <li class="active"> <a href="#tab1">First</a> </li> <li class=""> <a href="#tab2">Second</a> </li> <li class=""> <a href="#tab3">Third</a> </li> </ul> <div class="content-container-white"> <div id="tab1" class="tab-content" > <ul class="tab-post-container text"> <li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula.</p> </li> </ul> </div> <div id="tab2" class="tab-content" > <ul class="tab-post-container text"> <li> <p>Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula.</p> </li> </ul> </div> <div id="tab3" class="tab-content" > <ul class="tab-post-container text"> <li> <p>Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci.</p> </li> </ul> </div> </div> </div>
Here's the JQuery Code that makes tab work.
//CONTENT TABS---------------------------------------------------
$(document).ready(function() {
var $tabsNav = $('.tabs-nav'),
$tabsNavLis = $tabsNav.children('li'),
$tabContent = $('.tab-content');
$tabsNav.each(function() {
var $this = $(this);
$this.next().children('.tab-content').stop(true,true).hide()
.first().show();
$this.children('li').first().addClass('active').stop(true,true).show();
});
$tabsNavLis.on('click', function(e) {
var $this = $(this);
$this.siblings().removeClass('active').end()
.addClass('active');
$this.parent().next().children('.tab-content').stop(true,true).hide()
.siblings( $this.find('a').attr('href') ).fadeIn();
e.preventDefault();
});
});
Sequence slider (first theme)
To make Sequence slider Work you'll need some HTML markup and JQuery code.
//SLIDER
$(document).ready(function(){
$status = $(".status");
var options = {
nextButton: true,
prevButton: true,
animateStartingFrameIn: true,
autoPlay: true,
autoPlayDelay: 4000,
preloader: true,
pauseOnHover: false,
preloadTheseFrames: [1],
preloadTheseImages: [
"images/tn-model1.jpg",
"images/tn-model2.jpg",
"images/tn-model3.jpg"
]
};
var sequence = $("#sequence").sequence(options).data("sequence");
sequence.afterLoaded = function() {
$("#sequence-theme .nav").fadeIn(100);
$("#sequence-theme .nav li:nth-child("+(sequence.settings.startingFrameID)+") img").addClass("active");
};
sequence.beforeNextFrameAnimatesIn = function() {
$("#sequence-theme .nav li:not(:nth-child("+(sequence.nextFrameID)+")) img").removeClass("active");
$("#sequence-theme .nav li:nth-child("+(sequence.nextFrameID)+") img").addClass("active");
};
$("#sequence-theme").on("click", ".nav li", function() {
$(this).children("img").removeClass("active").children("img").addClass("active");
sequence.nextFrameID = $(this).index()+1;
sequence.goTo(sequence.nextFrameID);
});
sequence.afterNextFrameAnimatesIn = function() {
if(sequence.settings.autoPlay && !sequence.hardPaused && !sequence.isPaused) {
$status.addClass("active").css("opacity", 1);
}
};
sequence.beforeCurrentFrameAnimatesOut = function() {
if(sequence.settings.autoPlay && !sequence.hardPaused) {
$status.css({"opacity": 0}, 500).removeClass("active");
}
};
});
<!-- SLIDER --> <div id="slider-container" class="container clearfix"> <div class="sixteen columns "> <div id="sequence-theme"> <div id="sequence"> <div class="arrows-nav "> <img class="prev" src="images/bt-prev.png" alt="Previous Frame" ><img class="next" src="images/bt-next.png" alt="Next Frame" > </div> <ul> <!-- SLIDE --> <li class="animate-in"> <img class="bg-slide" src="images/bg-1.jpg" alt="bg 1" /> <div class="main-text"><span class="size-14">LOREM ALES</span><br><span class="size-28">IPSUM ON</span><br><span class="size-14">VITO IT DELI</span> <span class="size-41 color">SERATION</span></div> <img class="model" src="images/model1.png" alt="Model 1" /> </li> <!-- SLIDE --> <li> <img class="bg-slide" src="images/bg-2.jpg" alt="bg 2" /> <div class="main-text"><span class="size-14">MAECENAS ALES</span><br><span class="size-28">ULTRICIES ON</span><br><span class="size-14">VITO IT VESTIBULUM</span> <span class="size-41 color">VIVERRA </span></div> <img class="model" src="images/model2.png" alt="Model 2" /> </li> <!-- SLIDE --> <li> <img class="bg-slide" src="images/bg-1.jpg" alt="bg 3" /> <div class="main-text"><span class="size-14">LOREM ALES</span><br><span class="size-28">VIVAMUS QUAM</span><br><span class="size-14">VITO IT DELI IN FINE</span> <span class="size-41 color">PELLENTESQUE </span></div> <img class="model" src="images/model3.png" alt="Model 3" /> </li> </ul> </div> <ul class="nav"> <li><img src="images/tn-model1.jpg" alt="Model 1" /></li> <li><img src="images/tn-model2.jpg" alt="Model 2" /></li> <li><img src="images/tn-model3.jpg" alt="Model 3" /></li> </ul> <ul class="controls"> <li class="status"></li> </ul> </div> </div> </div>
For more information - http://www.ianlunn.co.uk/
Sequence slider (second theme)
To make Sequence slider Work you'll need some HTML markup and JQuery code.
//SLIDER
$(document).ready(function(){
var options = {
nextButton: true,
prevButton: true,
animateStartingFrameIn: true,
autoPlay: true,
autoPlayDelay: 4000,
preloader: true,
pauseOnHover: false,
preloadTheseFrames: [1],
};
var sequence = $("#sequence").sequence(options).data("sequence");
});
<!-- SLIDER --> <div id="slider-container" class="container"> <div id="sequence-theme"> <div id="sequence" class="theme-2"> <img class="prev" src="images/bt-prev-black.png" alt="Previous Frame" /> <img class="next" src="images/bt-next-black.png" alt="Next Frame" /> <ul> <li class="animate-in"> <h2 class="title">Welcome to Optimas</h2> <h3 class="subtitle">Multi-purpose Creative Business</h3> <p class="subtitle-2 slider-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> <p class="subtitle-3"> <a class="button get-theme" href="#">GET THE THEME</a> </p> <img class="model" src="images/model2-1.png" alt="Model 1" /> </li> <li> <h2 class="title slide-2-light">Lorem Ipsum</h2> <h3 class="subtitle slide-2-bold">ic fravus sinber</h3> <p class="subtitle-2 slide-2-yellow">& tristiqueve porttitor</p> <p class="subtitle-3"> <a class="button get-theme" href="#">GET THE THEME</a> </p> <img class="model" src="images/model2-2.png" alt="Model 2" /> </li> <li> <h2 class="title">Welcome to Optimas</h2> <h3 class="subtitle ">Multi-purpose Creative Business</h3> <p class="subtitle-2 slider-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p> <p class="subtitle-3"> <a class="button get-theme" href="#">GET THE THEME</a> </p> <img class="model" src="images/model2-3.png" alt="Model 3" /> </li> </ul> </div> </div> </div>
For more information - http://www.ianlunn.co.uk/
Flexslider Code (first theme)
To make Flexslider Code Work you'll need some HTML markup and JQuery code.
<!-- SLIDER --> <div id="slider-container" class="container clearfix"> <div class="sixteen columns "> <div class="flexslider"> <ul class="slides"> <li> <img src="images/img-gallery.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold" >SUT</span> ID ELIT</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> <a class="right r-m-plus r-m-full" href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> <li> <img src="images/img-gallery2.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold">DIGNISSIM</span> MAGNA</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Mauris pulvinar odio in justo ornare placerat mollis arcu tristique. </p> <a class="right r-m-plus r-m-full" href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> <li> <img src="images/img-gallery3.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold">SIT</span> LECTUS AMET</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> <a class="right r-m-plus r-m-full" href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> </ul> </div> </div> </div>
Flexslider Code (second theme)
To make Flexslider Code Work you'll need some HTML markup and JQuery code.
<!-- SLIDER --> <div id="slider-container" class="container clearfix"> <div class="sixteen columns "> <div class="flexslider"> <ul class="slides"> <li> <img src="images/img-gallery.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold" >SUT</span> ID ELIT</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> <a class="right r-m-plus " href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> <li> <img src="images/img-gallery2.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold">DIGNISSIM</span> MAGNA</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Mauris pulvinar odio in justo ornare placerat mollis arcu tristique. </p> <a class="right r-m-plus " href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> <li> <img src="images/img-gallery3.jpg" alt="image" /> <div class="flex-caption"> <h3 class="flex-caption-container" ><span class="bold">SIT</span> LECTUS AMET</h3> <div class="flex-caption-text-container "> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> <a class="right r-m-plus " href="portfolio.html"> <span class="bold">Read</span> More </a> </div> </div> </li> </ul> </div> </div> </div>
JQuery code:
//SLIDER
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
pauseOnAction: false,
start: function(slider){
$('body').removeClass('loading');
}
});
});
For more information - http://flex.madebymufffin.com
Carousel slider - jCarousel
To make Carousel Slider Work you'll need some HTML markup and JQuery code. Example of html code:
<!-- LATEST WORK --> <div class="container clearfix"> <div class="sixteen columns m-bot-20"> <div class="latest-work-caption-container"> <div class="caption-main-container clearfix"> <div class="caption-text-container"> <span class="bold">LATEST</span> WORK </div> <div class="carousel-navi jcarousel-scroll"> <div class="jcarousel-prev"></div> <div class="jcarousel-next"></div> </div> </div> </div> </div> </div> <!-- jCAROUSEL --> <div class="jcarousel container latest-work-jc m-bot-25" > <ul> <!-- LATEST WORK ITEM --> <li class="four columns"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-1.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Lorem</span> Ipsum</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Lorem</span> Ipsum</a> </div> </div> <div class="under-box-bg"></div> <div class="content-container-white lw-item-text-container"> <p>Pellentesque tristique volutpat nunc, id rhoncus augue.</p> </div> </li> <!-- LATEST WORK ITEM --> <li class="four columns"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-2.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Amet</span> Mauris</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Amet </span> Mauris</a> </div> </div> <div class="under-box-bg"></div> <div class="content-container-white lw-item-text-container"> <p>Pellentesque tristique volutpat nunc, id rhoncus augue.</p> </div> </li> <!-- LATEST WORK ITEM --> <li class="four columns"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-3.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Craes</span> Nustro</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Craes</span> Nustro</a> </div> </div> <div class="under-box-bg"></div> <div class="content-container-white lw-item-text-container"> <p>Pellentesque tristique volutpat nunc, id rhoncus augue.</p> </div> </li> <!-- OUR PROJECTS ITEM --> <li class="four columns"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-4.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Sed</span> Lectus</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Sed</span> Lectus</a> </div> </div> <div class="under-box-bg"></div> <div class="content-container-white lw-item-text-container"> <p>Pellentesque tristique volutpat nunc, id rhoncus augue.</p> </div> </li> <!-- OUR PROJECTS ITEM --> <li class="four columns"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-5.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Poin</span> Placerat</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Poin</span> Placerat</a> </div> </div> <div class="under-box-bg"></div> <div class="content-container-white lw-item-text-container"> <p>Pellentesque tristique volutpat nunc, id rhoncus augue.</p> </div> </li> <!-- OUR PROJECTS ITEM --> <li class="four columns"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-6.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Mauris</span> Lectus</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Mauris</span> Lectus</a> </div> </div> <div class="under-box-bg"></div> <div class="content-container-white lw-item-text-container"> <p>Pellentesque tristique volutpat nunc, id rhoncus augue.</p> </div> </li> <!-- OUR PROJECTS ITEM --> <li class="four columns"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-7.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Sed</span> Lectus</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Sed</span> Lectus</a> </div> </div> <div class="under-box-bg"></div> <div class="content-container-white lw-item-text-container"> <p>Pellentesque tristique volutpat nunc, id rhoncus augue.</p> </div> </li> <!-- OUR PROJECTS ITEM --> <li class="four columns"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-8.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Amet</span> Lectus</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Amet</span> Lectus</a> </div> </div> <div class="under-box-bg"></div> <div class="content-container-white lw-item-text-container"> <p>Pellentesque tristique volutpat nunc, id rhoncus augue.</p> </div> </li> </ul> </div> <!-- jCAROUSEL End --> <!-- OUR PROJECTS End -->
//CAROUSEL--------------------------------------------------------
(function($){
$(document).ready(function(){
// Add classes for other carousels
var $carousel = $('.latest-work-jc, .latest-posts-jc, .testimonials-jc');
var scrollCount;
function adjustScrollCount() {
if( $(window).width() < 768 ) {
scrollCount = 1;
} else {
scrollCount = 1;
}
}
function adjustCarouselHeight() {
$carousel.each(function() {
var $this = $(this);
var maxHeight = -1;
$this.find('li').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$this.height(maxHeight);
});
}
function initCarousel() {
adjustCarouselHeight();
adjustScrollCount();
var i = 0;
var g = {};
$carousel.each(function() {
i++;
var $this = $(this);
g[i] = $this.jcarousel({
animation : 500,
scroll : scrollCount,
wrap: 'circular'
});
$this.jcarousel('scroll', 0);
$this.prev().find('.jcarousel-prev').bind('active.jcarouselcontrol', function() {
$(this).addClass('active');
}).bind('inactive.jcarouselcontrol', function() {
$(this).removeClass('active');
}).jcarouselControl({
target: '-='+scrollCount,
carousel: g[i]
});
$this.prev().find('.jcarousel-next').bind('active.jcarouselcontrol', function() {
$(this).addClass('active');
}).bind('inactive.jcarouselcontrol', function() {
$(this).removeClass('active');
}).jcarouselControl({
target: '+='+scrollCount,
carousel: g[i]
});
$this.touchwipe({
wipeLeft: function() {
$this.jcarousel('scroll','+='+scrollCount);
},
wipeRight: function() {
$this.jcarousel('scroll','-='+scrollCount);
}
});
});
}
$(window).load(function(){
initCarousel();
});
$(window).resize(function () {
$carousel.each(function() {
var $this = $(this);
$this.jcarousel('destroy');
});
initCarousel();
});
});
})(this.jQuery);
For more information - http://sorgalla.com/jcarousel/
Form validation
To make Form validation Work you'll need some HTML markup and JQuery code. Example of html code:
<form action="send.php" id="contact-form" method="post" class="clearfix"> <fieldset class="field-1-3 left"> <label>Name</label> <input type="text" name="name" id="Myname" onblur="if(this.value=='')this.value='Your name...';" onfocus="if(this.value=='Your name...')this.value='';" value="Your name..." class="text requiredField m-bot-20" > </fieldset > <fieldset class="field-1-3 left"> <label>Email</label> <input type="text" name="email" id="myemail" onblur="if(this.value=='')this.value='Your email...';" onfocus="if(this.value=='Your email...')this.value='';" value="Your email..." class="text requiredField email m-bot-20" > </fieldset> <fieldset class="field-1-3 left"> <label>Subject</label> <input type="text" name="subject" id="mySubject" onblur="if(this.value=='')this.value='Subject...';" onfocus="if(this.value=='Subject...')this.value='';" value="Subject..." class="text requiredField subject m-bot-20" > </fieldset> <fieldset class="field-1-1 left"> <label>Message</label> <textarea name="message" id="Mymessage" rows="5" cols="30" class="text requiredField m-bot-20" onblur="if(this.value=='')this.value='Your message...';" onfocus="if(this.value=='Your message...')this.value='';" >Your message...</textarea> </fieldset> <fieldset class="left"> <input name="Mysubmitted" id="Mysubmitted" value="SEND" class="button gray medium" type="submit" > </fieldset> </form>
//FORM VALIDATION JAVASCRIPT----------------------------------------------------
$(document).ready(function() {
$('form#contact-form').submit(function() {
$('form#contact-form .styled-box.iconed-box.error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('You forgot to enter your '+labelText+'');
$(this).addClass('inputError');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('You entered an invalid '+labelText+'');
$(this).addClass('inputError');
hasError = true;
}
}
});
if(!hasError) {
$('form#contact-form input.submit').fadeOut('normal', function() {
$(this).parent().append('');
});
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('form#contact-form').slideUp("fast", function() {
$(this).before('Your email was successfully sent. We will contact you as soon as possible.
');
});
});
}
return false;
});
});
For more information - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Dropdown menu - Superfish v1.4.8 - jQuery menu widget
To make Dropdown menu work you'll need some HTML markup and JQuery code. Example of html code:
<!-- TOP MENU --> <nav id="main-nav"> <ul class="sf-menu"> <li class="current"><a href="index.html">Home</a> <ul> <li><a href="index2.html">Home 2</a></li> <li><a href="index3.html">Home 3</a></li> <li><a href="index4.html">Home 4</a></li> <li><a href="index-all.html">Home all</a></li> </ul> </li> <li><a href="elements.html">Features</a> <ul> <li><a href="elements.html">Elements</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="pricing-tables.html">Pricing tables</a></li> <li><a href="404.html">404 Error</a></li> <li><a href="#">3D level menu</a> <ul> <li><a href="#">Menu item</a></li> <li><a href="#">Menu item</a></li> </ul> </li> </ul> </li> <li><a href="portfolio.html">Portfolio</a> <ul> <li><a href="portfolio.html">2 column v.1</a></li> <li><a href="portfolio-2.html">2 column v. 2</a></li> <li><a href="portfolio1-1.html">3 column v. 1</a></li> <li><a href="portfolio1-2.html">3 column v. 2</a></li> <li><a href="portfolio2-1.html">4 column v. 1</a></li> <li><a href="portfolio2-2.html">4 column v. 2</a></li> <li><a href="portfolio-single.html">Portfolio single</a></li> </ul> </li> <li><a href="blog.html">Blog</a> <ul> <li><a href="blog-single.html">Blog-single</a></li> </ul> </li> <li ><a href="contact.html">Contact</a></li> </ul> </nav>
//DROPDOWN MENU--------------------------------------------------
$(document).ready(function(){
$('ul.sf-menu').superfish({
autoArrows: false,
dropShadows: false
});
});
Adaptive menu - jQuery menu widget
To make Adaptive menu work you'll need some HTML markup and JQuery code. Example of html code:
<!-- TOP MENU --> <nav id="main-nav"> <ul class="sf-menu"> <li class="current"><a href="index.html">Home</a> <ul> <li><a href="index2.html">Home 2</a></li> <li><a href="index3.html">Home 3</a></li> <li><a href="index4.html">Home 4</a></li> <li><a href="index-all.html">Home all</a></li> </ul> </li> <li><a href="elements.html">Features</a> <ul> <li><a href="elements.html">Elements</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="pricing-tables.html">Pricing tables</a></li> <li><a href="404.html">404 Error</a></li> <li><a href="#">3D level menu</a> <ul> <li><a href="#">Menu item</a></li> <li><a href="#">Menu item</a></li> </ul> </li> </ul> </li> <li><a href="portfolio.html">Portfolio</a> <ul> <li><a href="portfolio.html">2 column v.1</a></li> <li><a href="portfolio-2.html">2 column v. 2</a></li> <li><a href="portfolio1-1.html">3 column v. 1</a></li> <li><a href="portfolio1-2.html">3 column v. 2</a></li> <li><a href="portfolio2-1.html">4 column v. 1</a></li> <li><a href="portfolio2-2.html">4 column v. 2</a></li> <li><a href="portfolio-single.html">Portfolio single</a></li> </ul> </li> <li><a href="blog.html">Blog</a> <ul> <li><a href="blog-single.html">Blog-single</a></li> </ul> </li> <li ><a href="contact.html">Contact</a></li> </ul> </nav>
//ADAPTIVE MENU
$(document).ready(function(){
// add select
$('<select />').appendTo('nav#main-nav');
//add options to select
$('<option />', {
'selected': 'selected',
'value' : '',
'text': 'Choise Page...'
}).appendTo('nav select');
$('nav#main-nav ul li a').each(function(){
var target = $(this);
$('<option />', {
'value' : target.attr('href'),
'text': target.text()
}).appendTo('nav#main-nav select');
});
// onclicking
$('nav#main-nav select').on('change',function(){
window.location = $(this).find('option:selected').val();
});
});
Black and white hover effect
To make Black and white hover effect Work you'll need some HTML markup and JQuery code. Example of html code:
<!-- OUR CLIENTS -->
<div class="container m-bot-35 clearfix">
<ul class="our-clients-container clearfix">
<li class="content-container-white">
<a href="">
<div class="bw-wrapper">
<img src="images/logo1.png" alt="client" >
</div>
</a>
</li>
<li class="content-container-white">
<a href="">
<div class="bw-wrapper">
<img src="images/logo2.png" alt="client" >
</div>
</a>
</li>
<li class="content-container-white">
<a href="">
<div class="bw-wrapper">
<img src="images/logo3.png" alt="client">
</div>
</a>
</li>
<li class="content-container-white">
<a href="">
<div class="bw-wrapper">
<img src="images/logo4.png" alt="client" >
</div>
</a>
</li>
<li class="content-container-white">
<a href="">
<div class="bw-wrapper">
<img src="images/logo5.png" alt="client" >
</div>
</a>
</li>
</ul>
</div>
//BLACK & WHITE HOVER EFFECT--------------------------------------
$(window).load(function(){
$('.bw-wrapper').BlackAndWhite({
hoverEffect : true, // default true
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 300 // 800ms for fadeOut animations
}
});
});
For more information - http://www.gianlucaguarini.com/
Back to top
To make Back to top Work you'll need some HTML markup and JQuery code. Example of html code:
<footer> <div class="footer-content-bg"> <a class="scrollup" href="#">Go To Top</a> </div> </footer>
//SCROLL TO TOP----------------------------------------------------
$(document).ready(function(){
$('.scrollup').click(function () {
$('body,html').animate({
scrollTop: 0
}, 600);
return false;
});
});
Portfolio filter
To make Portfolio filter hover effect Work you'll need some HTML markup and JQuery code. Example of html code:
<!-- CONTENT --> <div class="container filter-portfolio clearfix"> <ul id="portfolio" class="clearfix"> <!-- PORTFOLIO ITEM --> <li data-id="id-1" data-type="category1" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-1.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Lorem</span> Ipsum</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Lorem</span> Ipsum</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-2" data-type="category2" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-2.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Amet</span> Mauris</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Amet </span> Mauris</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-3" data-type="category3" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-3.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Craes</span> Nustro</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Craes</span> Nustro</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-4" data-type="category1" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-4.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Sed</span> Lectus</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Sed</span> Lectus</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-5" data-type="category2" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-5.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Poin</span> Placerat</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Poin</span> Placerat</a> </div> </div> </li> <!-- PORTFOLIO ITEM --> <li data-id="id-6" data-type="category3" class="eight columns m-bot-25"> <div class="content-container-white"> <div class="view view-first"> <img src="images/content/port-2-6.jpg" alt="Ipsum" > <div class="mask"> <h2><span class="w-b-bottom"><span class="bold">Mauris</span> Lectus</span></h2> <a href="images/content/port-big-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a> </div> </div> <div class="lw-item-caption-container"> <a class="a-invert" href="portfolio-single.html" ><span class="bold">Mauris</span> Lectus</a> </div> </div> </li> </ul> </div>
//PORTFOLIO FILTER----------------------------------------------------------------
$(document).ready(function(){
// Clone portfolio items to get a second collection for Quicksand plugin
var $portfolioClone = $("#portfolio").clone();
// Attempt to call Quicksand on every click event handler
$("#filter a").click(function(e){
$("#filter li").removeClass("current");
// Get the class attribute value of the clicked link
var $filterClass = $(this).parent().attr("class");
if ( $filterClass == "all" ) {
var $filteredPortfolio = $portfolioClone.find("li");
} else {
var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
}
// Call quicksand
$("#portfolio").quicksand( $filteredPortfolio, {
duration: 800,
easing: 'swing'
});
$(this).parent().addClass("current");
})
});
For more information - http://razorjack.net/quicksand
Accordion
To make Accordion Work you'll need some HTML markup and JQuery code. Example of html code:
<!-- Accordion --> <div class="in-one-third in-column"> <h3 class="title-block">Accordion</h3> <div id="accordion"> <h3><a href="#">Lorem ipsum</a></h3> <div> <p>Nunc ipsum risus, bibendum quis tincidunt a, tempor quis nunc. Aenean in odio in sapien porttitor sodales.</p> </div> <h3><a href="#">Vestilum pulvinar</a></h3> <div> <p>Nunc ipsum risus, bibendum quis tincidunt a, tempor quis nunc. Aenean in odio in sapien porttitor sodales.</p> </div> <h3><a href="#">Donec sedin</a></h3> <div> <p>Nunc ipsum risus, bibendum quis tincidunt a, tempor quis nunc. Aenean in odio in sapien porttitor sodales.</p> </div> </div><!-- End accordion --> </div>
//ACCORDION-----------------------------------------------------
$(document).ready(function() {
$("#accordion").accordion({
autoHeight: false,
/*icons: { "header": "plus", "headerSelected": "minus" }*/
});
});
Toggle
To make Toggle Work you'll need some HTML markup and JQuery code. Example of html code:
<!-- Toggle --> <div class="in-one-third in-column"> <h3 class="title-block">Toggle</h3> <ul id="toggle-view"> <li> <h3 class="ui-accordion-header"><span class="link"></span>Lorem ipsum</h3> <div class="panel"> <p>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.</p> </div> </li> <li> <h3 class="ui-accordion-header"><span class="link"></span>Vestilum pulvinar</h3> <div class="panel"> <p>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.</p> </div> </li> <li> <h3 class="ui-accordion-header"><span class="link"></span>Donec sedin</h3> <div class="panel"> <p>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.</p> </div> </li> </ul> </div>
//TOGGLE-------------------------------------------------------
$(document).ready(function () {
$('#toggle-view li').click(function () {
var text = $(this).children('div.panel');
if (text.is(':hidden')) {
text.slideDown('10');
$(this).children('.ui-accordion-header').addClass('ui-accordion-header-active');
} else {
text.slideUp('10');
$(this).children('.ui-accordion-header').removeClass('ui-accordion-header-active');
}
});
});
Google Maps
To make Google Maps Work you'll need some HTML markup and JQuery code. Example of html code:
<!-- JS --> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="js/jquery.gmap.min.js"></script> <!-- Google Maps --> <section class="google-map-container"> <div id="googlemaps" class="google-map"></div> </section> <!-- Google Maps / End -->
jQuery('#googlemaps').gMap({
maptype: 'ROADMAP',
scrollwheel: false,
zoom: 16,
markers: [
{
address: 'Level 13, 2 Elizabeth St, Melbourne Victoria 3000 Australia', // Your Adress Here
html: '',
popup: false,
}
],
});
Style Switcher
Style Switcher used for quick change colors or backgroud of template, if you do not need them, you can simply delete the code. To make Style Switcher work you'll need some CSS, HTML markup and JQuery code. Example of html code:
<!-- CSS --> <link rel="stylesheet" type="text/css" href="css/styler.css"> <!-- JS --> <script type="text/javascript" src="js/styler.js"></script> <!-- TEMPLATE STYLES --> <div id="template-styles"> <h2>Template Styles <a href="#"><img class="s-s-icon" src="images/setings.png" alt="Style switcher" /></a></h2> <div> <h3>Colors</h3> <ul class="colors" > <li><a href="#" class="yellow" title="yellow"></a></li> <li><a href="#" class="green" title="green"></a></li> <li><a href="#" class="light-blue" title="light-blue"></a></li> <li><a href="#" class="aqua" title="aqua"></a></li> <li><a href="#" class="navy" title="navy"></a></li> <li><a href="#" class="pear" title="pear"></a></li> <li><a href="#" class="peach" title="peach"></a></li> <li><a href="#" class="brown" title="brown"></a></li> <li><a href="#" class="orange" title="orange"></a></li> <li><a href="#" class="dark" title="dark"></a></li> <li><a href="#" class="blue" title="blue"></a></li> <li><a href="#" class="grey" title="grey"></a></li> </ul> <h3>Background Image</h3> <ul class="colors bg" id="bg"> <li><a href="#" class="bg1"></a></li> <li><a href="#" class="bg2"></a></li> <li><a href="#" class="bg3"></a></li> <li><a href="#" class="bg4"></a></li> <li><a href="#" class="bg5"></a></li> <li><a href="#" class="bg6"></a></li> <li><a href="#" class="bg7"></a></li> <li><a href="#" class="bg8"></a></li> <li><a href="#" class="bg9"></a></li> <li><a href="#" class="bg10"></a></li> <li><a href="#" class="bg11"></a></li> <li><a href="#" class="bg12"></a></li> <li><a href="#" class="bg13"></a></li> <li><a href="#" class="bg14"></a></li> <li><a href="#" class="bg15"></a></li> <li><a href="#" class="bg16"></a></li> <li><a href="#" class="bg17"></a></li> <li><a href="#" class="bg18"></a></li> <li><a href="#" class="bg19"></a></li> <li><a href="#" class="bg20"></a></li> </ul> </div> </div>
/* Template Styles
-----------------------------------------------------------------------------------*/
window.console = window.console || (function(){
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
return c;
})();
jQuery(document).ready(function($) {
// Color Changer
$(".yellow" ).click(function(){
$("#template-color" ).attr("href", "css/colors/yellow.css" );
return false;
});
$(".green" ).click(function(){
$("#template-color" ).attr("href", "css/colors/green.css" );
return false;
});
$(".light-blue" ).click(function(){
$("#template-color" ).attr("href", "css/colors/light-blue.css" );
return false;
});
$(".aqua" ).click(function(){
$("#template-color" ).attr("href", "css/colors/aqua.css" );
return false;
});
$(".navy" ).click(function(){
$("#template-color" ).attr("href", "css/colors/navy.css" );
return false;
});
$(".pear" ).click(function(){
$("#template-color" ).attr("href", "css/colors/pear.css" );
return false;
});
$(".peach" ).click(function(){
$("#template-color" ).attr("href", "css/colors/peach.css" );
return false;
});
$(".brown" ).click(function(){
$("#template-color" ).attr("href", "css/colors/brown.css" );
return false;
});
$(".orange" ).click(function(){
$("#template-color" ).attr("href", "css/colors/orange.css" );
return false;
});
$(".dark" ).click(function(){
$("#template-color" ).attr("href", "css/colors/dark.css" );
return false;
});
$(".blue" ).click(function(){
$("#template-color" ).attr("href", "css/colors/blue.css" );
return false;
});
$(".grey" ).click(function(){
$("#template-color" ).attr("href", "css/colors/grey.css" );
return false;
});
$("#template-styles h2 a").click(function(e){
e.preventDefault();
var div = $("#template-styles");
console.log(div.css("left"));
if (div.css("left") === "-135px") {
$("#template-styles").animate({
left: "0px"
});
} else {
$("#template-styles").animate({
left: "-135px"
});
}
})
$(".colors li a").click(function(e){
e.preventDefault();
$(this).parent().parent().find("a").removeClass("active");
$(this).addClass("active");
})
$(".bg li a").click(function(e){
e.preventDefault();
$(this).parent().parent().find("a").removeClass("active");
$(this).addClass("active");
var bg = $(this).css("backgroundImage");
$("body").css("backgroundImage",bg)
})
});
PHP in the template - top
This template uses PHP for Contact Form, it's calles "send.php"
"; mail($to, $subject, $message, $header); } ?>
You'll need to change "$to" part. So instead of "example@example.com" replace it with your Email adress, and that's all.
PSD files - top
I've Included PSD file in "PSD" folder.Layers are named, grouped and slices are named, ready to be export in PNG or JPG file if you want to change graphic element.
Credits and helpfull links - top
Fonts
Helpfull links
- Skeleton framework
- Hover effect
- Twitter feeds
- Flickr feeds
- Fancy box
- Sequence slider
- Flex slider
- jQuery Carousel
- Form validation
- Black and white hover effect
- Portfolio filter
- Google Fonts
- Google maps API
- Font Awesome
End of documentation
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
abcgomel