Shifter - Simple HTML5 Template - Help File

This awesome template uses most popular technologies for an awesome look and feel, and it all works in all major browsers.

Item Support via Mail

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!

P.S. - Read the documentation before going nuts about "something not working!" :D

This templates is a HTML5 coded and Reposnive!


General Features

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.

    • Internet Explorer 8
    • Internet Explorer 9
    • Internet Explorer 10
    • Internet Explorer 11
    • Firefox 2
    • Firefox 3
    • Firefox 3.5
    • Firefox 3.6
    • Firefox 4
    • Firefox 5
    • Firefox 6
    • Firefox 7+
    • Safari 4
    • Safari 5
    • Opera
    • Chrome 4
    • Chrome 5
    • Chrome 6
    • Chrome 7+

So let's get this party started Here you can see how files are organized in each folder, how to use them, edit them, abuse them or whatever you want to do, not my business to wonder :D

Folders Organization

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.

Homepage HTML Files

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

Responsive Layer Slider

Index.html

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>

Social Feeds

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.

Flickr Photos

<div class="flickr-widget"></div> 		

Twitter Feeds

<div class="twitter-feeds"></div> 		

Using Accordions

Here's the example of how to use Jquery powered accordion menu feeds in your template. Easy to use as always.

Accordion Menu

<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> 		

Using Tabs

Here's the example of how to use Jquery powered tab menu feeds in your template. Easy to use as always.

Tab Menu

<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>		

Typography


Body Font

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!

This is just a small introduction to a typography in this template, everything else is in css file you're using, which is easy to navigate and to edit.

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 }
	

Slider Jquery Code:

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:

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:

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 Plugin:

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:

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:

P.S. Some images are no included due to the copyrights

I've used the following images, icons or other files as listed.

JavaScript

  1. jQuery — jQuery is a fast and concise JavaScript Library.
  2. Flex Slider — Awesome Business Slider.
  3. Camera Slider — Awesome Business Slider.
  4. Google Maps — Google Maps Plugin
  5. prettyPhoto — Photo modal dialog Plugin
  6. toolTip — Simple Jquery tooltip Plugin

Images

  1. PhotoDune — Images are bought on PhotoDune ( which rocks btw!)

Fonts

  1. Webfonts — Some fonts are taken from google webfonts.

Icons

  1. Brankic1979 — A set of 350 pixel perfect glyphs icons. - Thank You "brankic1979"!

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.