Header Height / Scroll Offset

Depending on your logo height, the header height may change and it will effect the scroll offsets. You need to edit style/js/scripts.js. The default value of header height is 80px in the template. Please measure your header height and if it is different than the original value, then replace the value 80 on highlighted areas.

style/js/scripts.js

$(document).ready(function(){     /* ANCHOR SCROLL */
    $('.scroll').localScroll({
	    offset: {top:-80, left:0}  /* make sure the minus sign stays */
    });
  }); 
  
...  
  
  
$(document).ready(function () { /* CONTENT SLIDER */
	 var speed=600;
	 var speed2=500;
	 var header_offset = 80;
  

Retina Logo

In order to display a high resolution logo on devices with retina display, you need two versions of your logo. One with regular size and another with twice its size. The high resolution one should have the exact same name with @2x at the end.

Social Icons (Complete List)

The list of all available styled social icons to use in the footer or any other place.

<ul class="social">
	<li><a href="#"><i class="icon-s-rss"></i></a></li>
	<li><a href="#"><i class="icon-s-twitter"></i></a></li>
	<li><a href="#"><i class="icon-s-facebook"></i></a></li>
	<li><a href="#"><i class="icon-s-dribbble"></i></a></li>
	<li><a href="#"><i class="icon-s-pinterest"></i></a></li>
	<li><a href="#"><i class="icon-s-flickr"></i></a></li>
	<li><a href="#"><i class="icon-s-vimeo"></i></a></li>
	<li><a href="#"><i class="icon-s-youtube"></i></a></li>
	<li><a href="#"><i class="icon-s-skype"></i></a></li>
	<li><a href="#"><i class="icon-s-tumblr"></i></a></li>
	<li><a href="#"><i class="icon-s-linkedin"></i></a></li>
	<li><a href="#"><i class="icon-s-behance"></i></a></li>
	<li><a href="#"><i class="icon-s-github"></i></a></li>
	<li><a href="#"><i class="icon-s-delicious"></i></a></li>
	<li><a href="#"><i class="icon-s-500px"></i></a></li>
	<li><a href="#"><i class="icon-s-grooveshark"></i></a></li>
	<li><a href="#"><i class="icon-s-forrst"></i></a></li>
	<li><a href="#"><i class="icon-s-digg"></i></a></li>
	<li><a href="#"><i class="icon-s-blogger"></i></a></li>
	<li><a href="#"><i class="icon-s-klout"></i></a></li>
	<li><a href="#"><i class="icon-s-dropbox"></i></a></li>
	<li><a href="#"><i class="icon-s-songkick"></i></a></li>
	<li><a href="#"><i class="icon-s-posterous"></i></a></li>
	<li><a href="#"><i class="icon-s-appnet"></i></a></li>
	<li><a href="#"><i class="icon-s-gplus"></i></a></li>
	<li><a href="#"><i class="icon-s-stumbleupon"></i></a></li>
	<li><a href="#"><i class="icon-s-lastfm"></i></a></li>
	<li><a href="#"><i class="icon-s-spotify"></i></a></li>
	<li><a href="#"><i class="icon-s-instagram"></i></a></li>
	<li><a href="#"><i class="icon-s-evernote"></i></a></li>
	<li><a href="#"><i class="icon-s-paypal"></i></a></li>
	<li><a href="#"><i class="icon-s-picasa"></i></a></li>
	<li><a href="#"><i class="icon-s-soundcloud"></i></a></li>
</ul>

Contact Form

To receive the messages sent through the contact form, edit line 5 of
contact/form-handler.php

$emailto = 'yourname@yourdomain.com';

For SMTP support edit line 4. Set to 1 if you want to use SMTP to send the email. Default is 0, which uses the standard PHP mail function.

$use_smtp = '1';

If using SMTP you will also need to fill in the 4 SMTP variables - lines 64 - 67.

$SmtpServer = 'SMTP SERVER';
$SmtpPort = 'SMTP PORT';
$SmtpUser = 'SMTP USER';
$SmtpPass = 'SMTP PASSWORD';

Responsive Design

Media queries are included in both style/css/bootstrap-responsive.css and at the end of style.css for responsive design. If you would like to disable the responsiveness you will have to remove the link of bootstrap-responsive.css from your HTML files and delete responsive css styles from style.css file.

Color Scheme

There are 6 color options: blue, gray, green, orange, pink, and yellow, the default being yellow. To change the default color scheme you will have to edit the color css file name in each HTML page.

<link href="style/css/color/yellow.css" rel="stylesheet">

Google Map

Copy the HTML code of your map from Google Maps website and paste it into your HTML page wrapped in
<div class="map">

<div class="map">
        <iframe width="100%" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?source=embed&amp;hl=en-US&amp;ie=UTF8&amp;ll=41.525287,-87.450485&amp;spn=0.099472,0.263844&amp;t=m&amp;z=13&amp;output=embed"></iframe>
</div>

PSD Mockups

You can find the mboile device mockups that can be seen in slider in the sources folder of the template package and apply your own images to them.

Gridview

Basic structure of the portfolio gridview:

<div class="primary portfolio">
  <div class="container box portfolio-wrapper">
    <div class="light-wrapper">
      <h1 class="page-title pull-left">Our Latest Works</h1>
      <div class="portfolio-filter btn-group pull-right">
        <button class="btn inverse dropdown-toggle bm0" data-toggle="dropdown">Filter Portfolio</button>
        <!-- /.btn -->
        <ul class="dropdown-menu filter">
          <li><a class="active" href="#" data-filter="*">All</a></li>
          <li><a href="#" data-filter=".branding">Branding</a></li>
          <li><a href="#" data-filter=".poster">Poster</a></li>
          <li><a href="#" data-filter=".illustration">Illustration</a></li>
          <li><a href="#" data-filter=".video">Video</a></li>
          <li><a href="#" data-filter=".audio">Audio</a></li>
        </ul>
        <!-- /.filter .dropdown-menu --> 
      </div>
      <!-- /.portfolio-filter -->
      <div class="clearfix"></div>
      <div class="divide15"></div>
      <ul class="items">
        <li class="item branding"> <a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".primary .container">
          <div class="overlay">
            <div class="info">
              <h3>Headlight Media</h3>
              <span>Logo, Branding</span> </div>
          </div>
          <img src="style/images/art/p1.jpg" alt="" /></a> </li>
        <li class="item poster"> <a href="#" data-contenturl="portfolio-post2.html" data-callback="callPortfolioScripts();" data-contentcontainer=".primary .container">
          <div class="overlay">
            <div class="info">
              <h3>Media Icons</h3>
              <span>Icons, Vector</span> </div>
          </div>
          <img src="style/images/art/p2.jpg" alt="" /></a> </li>
      </ul>
      <!--/.items--> 
    </div>
    <!--/.light-wrapper--> 
  </div>
  <!--/.container--> 
</div>
<!--/.primary-->

Detailview

There are 4 different layouts available for you to choose from. Of course, you can mix and/or alter these and create your own layouts.

Markup

Two surrounding DIVs are the basic holder for the slider:

Homepage slider

<div class=".fullscreen-container">
   <div class=".fullscreenbanner" >...</div>
</div>

Portfolio Post slider

<div class="portfolio-bannercontainer">
   <div id="portfolio-banner" >...</div>
</div>

An unordered list inside holds the different slides as list elements

<ul>
<!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE -->

 <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de"> 
   <img src="images/slides/image1.jpg">
   <div class="caption sft huge" data-x="center" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">TEXT</div>
   <div class="caption sfb big" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">TEXT</div>
   <div class="caption lfr small" data-x="510" data-y="210" data-speed="300" data-start="2000">TEXT</div>
 </li>
...
</ul>

Heights

Slider heights are 600px. To change the height, you need to edit both style.css and style/js/scripts.js files.

style/js/scripts.js

...
$('.fullscreenbanner').revolution({ /* homepage slider */
	delay: 9000,
	startheight: 550,
...
$('.portfolio-banner').revolution({ /* portfolio post slider. Under PORTFOLIO SLIDER & CALL PORTFOLIO SCRIPTS */
		delay: 9000,
		startheight: 550,
...

style.css

...
.fullscreen-container { /* homepage slider */
    width: 100% !important;
    position: relative;
    padding: 0;
    max-height: 550px !important;
    overflow: hidden;
}
...
.portfolio-bannercontainer { /* portfolio slider */
    width: 100% !important;
    position: relative;
    padding: 0;
    max-height: 550px !important;
    overflow: hidden;
}
...

Slider Items

Every list item represents a new banner/slider item.

Captions

Captions are containers which can be customized via CSS, classes for the start animation and some data options.

Colored Background Instead of Images

In order you wish to use a colored Background instead of some images as main Image in the Slider you can use the transparent image with a colored background style.

<img alt="" src="style/images/art/transparent.png" style="background-color:#ff0000">

Videos

You can embed videos via iframe of your favorite video site that allows this kind of embedding.

<li data-transition="slideup" data-slotamount="20">
<img src="images/slides/image20.jpg"  >
            <div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900"
                 data-start="500" data-easing="easeOutBack">
                 <iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0" width="460"
                 height="259"></iframe>
            </div>
</li>

Fullwidth Videos

In order to play FullWidth Videos, use the class "fade fullscreenvideo" in the caption where you embeded the iframe. Use data-x="0" and data-y="0" and data-speed="500" and data-start="10" for best effect. The width and height of the iframe should be 100%!
In case you wish to use autoplay, just use the data-autplay="true" parameter in the div where you embeded the iframe.

<li data-transition="slideup" data-slotamount="20">
<img src="images/slides/image20.jpg"  >
            <div class="caption fade fullscreenvideo" data-x="0" data-y="0"
                data-speed="500" data-start="10" data-easing="easeOutBack">
                <iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0" width="100%"
                height="100%"></iframe>
            </div>
</li>