This awesome template uses most popular technologies for an awesome look and feel, and it all works in all major browsers.
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. I will answer in max 24-48 hours due to the tons of mails I recieve. Thanks so much!
This templates is a HTML5 coded and Reposnive!
The general template features you get in this HTML powered template.
50 Template Color Versions for you to choose from.
Awesome Responsive layout
30 HTML PAGES Versions for you to play with.
6 Awesome Homepage Versions for you to play around
Pricing Table.You can use this awesome modern looking pricing table to show your pricing plans to your customers.
Filterable Portfolio to show your work in a modern dinamic way. Choose which one do you prefer and easily add categroy you want to filter and there you go.You can easily add your own layout like one column portfolio or two columns portfolio using the grid this templates has.
40 Fully Layered Grid PSD files are included in download version.
Here's a list of the folder within the download package.
Folder Name | Description |
---|---|
HTML | Here You will template you will use. |
PSD | PSD files included in the template |
HELP | Well you already use this, it's a help file. |
Here you will learn how to edit any HTMl file you want to work with.We'll start with homepages, and that switch to portfolio pages, pricing tables and contact page, plus will get a bit into templates typography.
Tag | Description |
---|---|
index.html |
This is a deafult hompage slider with Layer Slider |
Here's a an example of HTML yode you need to run this nice slider.We'll see Javascript that's needed later in JavaScript Section.
Make it work:You need to have div with #layerslider
to make it run as it should.
Adding slides is pretty easy too.Just add a div with the class ls-layer
, list and put your images or videos.
<div id="layerslider"> <div class="ls-layer" style="slidedirection: bottom; slidedelay: 8000; durationin: 1500; durationout: 1500; easingin: easeInOutQuint; easingout: easeInOutQuint; delayin: 0; delayout: 0; timeshift: 0; transition3d: 42; "> <img src="images/slider/layer/1/bg.jpg" class="ls-bg" alt=" "> <h1 class="ls-s-1 ls_large_text_01" style="position: absolute; top:100px; left: 0px; slidedirection : top; durationin : 1000; durationout : 1000; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 500; delayout : 0; showuntil : 0;"> Create Modern Looking Websites</h1> <h1 class="ls-s-1 ls_large_text_01" style="position: absolute; top:160px; left: 0px; slidedirection : left; durationin : 1200; durationout : 1000; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 500; delayout : 0; showuntil : 0;"> Using This Awesome Responsive Template</h1> <h1 class="ls-s-1 ls_large_text_01" style="position: absolute; top:220px; left: 0px; slidedirection : right; durationin : 1400; durationout : 1000; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 500; delayout : 0; showuntil : 0;"> Which Comes in 15 Color Versions</h1> <h1 class="ls-s-1 ls_large_text_01" style="position: absolute; top:280px; left: 0px; slidedirection : bottom; durationin : 1600; durationout : 1000; easingin : easeInOutBack; easingout : easeInOutQuint; delayin : 500; delayout : 0; showuntil : 0;"> And Fullwidth & Boxed Layout</h1> <img class="ls-s-1 " src="images/slider/layer/1/man-01.png" alt=" " style="position: absolute; top: 50px; left: 485px; durationin : 1000; durationout : 1000; easingin : easeInSine; easingout : easeOutSine; delayin : 300; delayout : 0; showuntil : 0; "> </div> </div>
Here's the example of how to use social feeds in your template. You can use flickr photos, dribbble shots, or instagram photos. Easy to use as always.
<div class="flickr-widget"></div>
<div class="twitter-feeds"></div>
Here's the example of how to use Jquery powered accordion menu feeds in your template. Easy to use as always.
<ul class="accordion"> <li class="accordion-item"> <div class="accordion-switch"> <span class="togglegfx"></span>This is Accordion Menu Title. Goe and use it! </div> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p> </div> </li> <li class="accordion-item"> <div class="accordion-switch"> <span class="togglegfx"></span>This is Another Accordion Menu Title. </div> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p> </div> </li> <li class="accordion-item"> <div class="accordion-switch"> <span class="togglegfx"></span>This is Accordion Menu Title. Goe and use it! </div> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p> </div> </li> <li class="accordion-item"> <div class="accordion-switch"> <span class="togglegfx"></span>This is Accordion Menu Title. Goe and use it! </div> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p> </div> </li> </ul>
Here's the example of how to use Jquery powered tab menu feeds in your template. Easy to use as always.
<ul class="tabs-nav"> <li class="active"><a href="#tab1">First Tab</a></li> <li><a href="#tab2">Second</a></li> </ul> <div class="tabs-container"> <div class="tab-content" id="tab1"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p> </div> <div class="tab-content" id="tab2"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p> </div> </div>
Now You'll see how to use typography features in this template.
This template uses "Arial" font as a body font and "Myriad Pro" for headings.Other than that you see in some areas it uses "Georgia" and "Crimson Text".
If you want to change body font color or it's size you just need to change some CSS code.
body { background: #FFF url("../images/background-patterns/body-bg-1.jpg") repeat; color: #898989; font-family: 'Roboto', Arial, Verdana; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-size:13px; line-height:21px; }
Just change the css code above!
If you want to change headings font color or it's size you just need to change some CSS code.
h1,h2,h3,h4,h5,h6 { font-weight: 700; font-variant: normal; white-space: normal; color: #404040; margin-bottom: 20px; font-family: 'Roboto', arial, helvetica, sans-serif; } h1 { font-size: 26px; line-height: 32px; } h2 { font-size: 24px; line-height: 30px; } h3 { font-size: 22px; line-height: 30px; } h4 { font-size: 16px; line-height: 22px; } h5 { font-size: 16px; line-height: 22px; } h6 { font-size: 14px; line-height: 22px; }
Just change the css code above!
There's no really need to explain pricing tables too much but here's some info for your further use. Pricing tables & Boxes are 100% tableless, modern looking and easy to edit.
HTML code is plain as it can be so i won't talk much about it, here's an example of a CSS code for Pricing Table
ul.pricing-boxes { float: left; margin: 0px 0px 40px 0; padding: 0px; list-style: none; } ul.pricing-boxes li { float: left; list-style: none; text-align: center; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } ul.pricing-boxes li.best-plan { position: relative; top: -10px; } ul.pricing-boxes li.best-plan:hover { box-shadow: 0px 0px 15px rgba(0,0,0,0.20) } ul.pricing-boxes.five li { width: 20%; /*width: 188px;*/; } ul.pricing-boxes.four li { width: 25%; /*width: 235px;*/; } ul.pricing-boxes.three li { width: 33%; /*width: 313px;*/; } ul.pricing-boxes li:nth-child(even) { background: #FFF } ul.pricing-boxes li:nth-child(even) { background: #f6f7fb } ul.pricing-boxes li.best-plan .plan-name { padding: 20px 0 15px 0 } ul.pricing-boxes li.best-plan .plan-features { padding: 0px 0px 35px 0px } .plan-name { background: #656d78; box-shadow: inset 0px 1px 0px rgba(0,0,0,0.14),inset -1px 0px 0px rgba(0,0,0,0.14); padding: 15px 0 10px 0; border-radius: 4px 4px 0 0; } .plan-name.color { box-shadow: inset 0px 1px 0px rgba(0,0,0,0.1) } .plan-name h4 { color: #FFF; font-size: 16px; font-family: "Roboto", Arial; font-weight: 300; margin-bottom: 5px; } .plan-name h1 { color: #FFF; text-align: center; margin-bottom: 5px; line-height: 64px; margin-top: 7px; } .plan-name h1 i { color: #FFF; border-radius: 100%; border: 2px solid #FFF; padding: 15px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .plan-price { background: #434a54; box-shadow: inset 0px 1px 0px rgba(0,0,0,0.14),inset -1px 0px 0px rgba(0,0,0,0.14); padding: 15px 0 10px 0; } .plan-price h4 { color: #FFF; font-size: 13px; font-family: "Roboto", Arial; font-weight: 300; margin-bottom: 5px; } .plan-price h4 i { margin-right: 5px } .plan-price h4 span { color: #FFF; font-size: 13px; } ul.pricing-boxes li:hover .plan-name, ul.pricing-boxes li:hover .plan-price { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } ul.pricing-boxes li:hover .plan-name h1 i { border: 4px solid #FFF } ul.pricing-boxes li:hover .plan-name { background-color: #555d68 } ul.pricing-boxes li:hover .plan-price { background-color: #383f49 } .plan-features { background: #fff; border: 1px solid #e6e9ee; border-top: 0; padding: 0px 0px 25px 0px; border-radius: 0 0 4px 4px; float: left; } ul.pricing-boxes li .plan-features { border-right: none } ul.pricing-boxes li:last-child .plan-features { border: 1px solid #e6e9ee } ul.pricing-boxes.standalone li .plan-features { border: 1px solid #e6e9ee!important } .plan-features ul { float: left; list-style: none; margin-bottom: 25px; } .plan-features ul li { padding: 10px 0; text-align: center; border-bottom: 1px solid #f0f0f0; float: left; width: 100%; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%!important; float: left; } .plan-features ul li i { margin-right: 10px; font-size: 16px; } .plan-features ul li:hover { box-shadow: none } .plan-name.dark { background: #656d78 } .plan-price.dark { background: #434a54 }
Layer Sliders Jquery Code
The JavaScript code you need to run Layer Sliders in the Shifter Template
Located in "custom.js" file in "js" folder of the template!
if ($('#layerslider').length && jQuery()) { $('#layerslider').layerSlider({ width: '100%', height: '450px', responsive: true, responsiveUnder: 940, sublayerContainer: 940, autoStart: true, pauseOnHover: true, firstLayer: 1, animateFirstLayer: true, randomSlideshow: false, twoWaySlideshow: true, loops: 0, forceLoopNum: true, autoPlayVideos: false, autoPauseSlideshow: 'auto', keybNav: true, touchNav: true, navButtons: true, navStartStop: false, skin: 'fullwidth', skinsPath: 'images/layer-slider/skins/', }); }
Main Navigation Jquery Code
The JavaScript code you need to run Navigation
Located in "custom.js" file in "js" folder of the template!
$('ul.main-menu').superfish({ delay: 100, // one second delay on mouseout animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation speed: 'fast', // faster animation speed autoArrows: false // disable generation of arrow mark-up });
Responsive Main Navigation Jquery Code
The JavaScript code you need to run responsive navigation
Located in "custom.js" file in "js" folder of the template!
var $menu_select = $("<select />"); $("<option />", {"selected": "selected", "value": "", "text": "Site Main Navigation"}).appendTo($menu_select); $menu_select.appendTo("#main-navigation,#main-navigation-2"); $("#main-navigation ul li a,#main-navigation-2 ul li a").each(function(){ var menu_url = $(this).attr("href"); var menu_text = $(this).text(); if ($(this).parents("li").length == 2) { menu_text = '- ' + menu_text; } if ($(this).parents("li").length == 3) { menu_text = "-- " + menu_text; } if ($(this).parents("li").length > 3) { menu_text = "--- " + menu_text; } $("<option />", {"value": menu_url, "text": menu_text}).appendTo($menu_select) }) field_id = "#main-navigation select,#main-navigation-2 select"; $(field_id).change(function() { value = $(this).attr('value'); window.location = value; });
Twitter Feeds (Edit custom.js)
Twitter plugin is easy to use, you just have to change out your username and number od tweets to be displayed, and that's it.
Change username: "trendywebstar"
username "trendywebstar" to your own username!
count: 1
Number of tweets you want to display.
That's pretty much it, everything else is easy customize too!
$.getJSON('twitter.php?url='+encodeURIComponent('statuses/user_timeline.json?screen_name=trendyWebStar&count=1'), function(tweets){ //Put your username here $("#twitter").html(tz_format_twitter(tweets)); });
Flickr Photos (Edit custom.js)
$('.flickr-widget').jflickrfeed({ limit: 12, qstrings: { id: '52617155@N08' },itemTemplate: '<li><a href="{{image_b}}" target="_blank"><img src="{{image_s}}" alt="{{title}}" /></a></li>' });
Google maps JQuery
Google Maps Plugin is very easy to use, just change the address, and you'll have it work as a charm!
zoom: 18
zoom the map as you wish.
That's pretty much it, for more informations visit the official plugin page
var $map = $('#map'); if( $map.length ) { $map.gMap({ address: 'Level 13, 2 Elizabeth St, Melbourne Victoria 3000 Australia', zoom: 18, markers: [ { 'address' : 'Level 13, 2 Elizabeth St, Melbourne Victoria 3000 Australia' } ] }); }
Contact Form
Here's how to change contact form's default alert messages. Anything else, you don't touch.Black Magic!
<div class="error-message">You forgot to enter your '+labelText+'</div>
this is a deafult error message, if forgot to enter some field.You can change it if you wish.
<div class="error-message">You entered an invalid '+labelText+'</div>
this is a deafult error message,if didn't enter valid values.You can change it if you wish.
<div><span class="fancy-success">Your email was successfully sent. We will contact you as soon as possible.</span></div>
this is a deafult success message, you can change it if you wish.
if ( $( '#contact-form' ).length && jQuery() ) { $('form#contact-form').submit(function() { function resetForm($form) { $form.find('input:text, input:password, input:file, select, textarea').val(''); $form.find('input:radio, input:checkbox') .removeAttr('checked').removeAttr('selected');} $('form#contact-form .error').remove(); var hasError = false; $('.requiredField').each(function() { if(jQuery.trim($(this).val()) == '') { var labelText = $(this).prev('label').text(); $(this).parent().append('<div class="error">You forgot to enter your '+labelText+'</div>'); $(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('<div class="error">You entered an invalid '+labelText+'</div>'); $(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){ $('#contact-form').prepend('<div><span class="fancy-success">Your email was successfully sent. We will contact you as soon as possible.</span></div>'); resetForm($('#contact-form')); $('.fancy-success').fadeOut(5000); });}return false; });}
All CSS are located in the "css" folder of the template version you're using.All CSS Files are well commented and easy to usen ad customize to your own needs.Here's the list of the CSS files in each template version.
This template has only one php file, which is for sending mail via contact form,.Here's the php code for it.
You just need to change $to = 'example@example.com';
.So change the example@example.com
to your email adress.
And that's it you have yourself a working contact form!
$email_to = "email@yourprovidername.com";/* CHANGE THIS WITH YOUR OWN EMAIL ADDRESS */ $name = $_POST["name"]; $email = $_POST["email"]; $url = $_POST["url"]; $message = $_POST["message"]; $text = "Sender's Name: $name
Sender's Email: $email
Sender's Website: $url
Sender's Message: $message"; $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html; charset=utf-8" . "\r\n"; $headers .= "From: <$email>" . "\r\n"; mail($email_to, "Message", $text, $headers);
I've included 40 Fully Layered PSD Files with this theme:
Fully layerd Grid perfect PSD file, well structured, and easy to customize.
I've used the following images, icons or other files as listed.
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.