1. Start
  2. About the Template
  3. Twitter Bootstrap
  4. Css Files and Structure
  5. JavaScript
  6. How to: Logo
  7. How to: Navigation
  8. How to: Resposivity
  9. How to: Img and Video background
  10. How to: Parallax
  11. How to: Portfolio
  12. How To: Gallery
  13. PSD files
  14. Credits

Exit

Html/css template

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

About the Template

Welcome, 

This is Exit, responsive single page html/css portfolio template. Exit is perfect for freelancers or small creative agencies and it comes in two homepage wariants. One with single image background and second one with movie background. Main ingridient of this template is powerfull parallax effect, it is easy to set up but very effective. Read this documentation carefully. If you have any questions, problems with customisation check out FAQ section on this template page on themeforest, or send me a mail: webdesign@shegy.pl.

 

Template structure and files

This is one page template so it has only one .html file witch is actual template. Other files within this template:

So after this short intro, let`s start.

Twitter Bootstrap

This template is based on customised version of Twitter Bootstrap. I have used this framework only for basic styling, column system and responsivity. Each other functionality is made ouside the framework. 

Info: This template is not compatible with Twitter Bootstrap.

Please check: http://twitter.github.com/bootstrap/

There you can find some info about how to make columns of text, base css styling and other customisations.

Css Files and Structure

All css files used by this template are included in "css" folder. Below is the list of css files and its role in the template.

Css files are easy to follow, I have ordered the stylings by part of the website they relate.

 

JavaScript

Exit it powered by jQuery, it uses several JavaScript files, the files are included in "js" folder. Below is the list of js fles and their function in the template.

 

Please note that alterations to JS files could result in certain features not working - you should not attempt to alter javascript unless you are experienced - please use the web site references next to each JS file listed above for further details and help.

How to: Navigation

Two types of navigation.

This is a responsive template and in the effect there are two versions of navigation, one for desktop and tablet version of the template and one for smartphone version.

Exit is one page template so the navigation scrolls between sections of the page, for example - #home, #about, #services...

 

Editing the desktop, tablet navigation.

To edit the desktop and tablet navigation first find this code on the site:

 

<!-- NAVBAR ############################################### -->

<div class="nav-container hidden-phone">

<nav>

<div id="logo_small"><a href="#home"><img src="img/logo_small.png" alt="Logo small" ></a></div>

<ul>

<li><a href="#home" class="selected">Home</a></li>

<li><a href="#about">About Us</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#works">Works</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</div>

<!-- /NAVBAR ############################################### -->

Then just edit the li elements of unordered list. Remember, herf targets must corespond to actual sections id`s on the site.

If you want to change the type and speed of scroll animation, edit the navbar.js file.

Find this code in navbar.js file:

 

navigation_links.click( function(event) {              

              $.scrollTo(

                         $(this).attr("href"),

                         {

                         duration: 2000,

                         easing:'easeInOutExpo',

                         axis:'y',

                         }

                         );

              return false;

              });

edit the duration and easing type.

 

Mobile navigation.

find this code on the page:

 

<!-- NAVBAR Mobile############################################### -->

<div class="container nav-mobile hidden-tablet hidden-desktop">

<select class="dropmenu" name="dropmenu" onChange="$.scrollTo(this.value, 1500, {easing:'easeInOutExpo', axis:'y'})">


<option value="" selected="selected">Menu</option>

              

<option value="#home">Home</option>

<option value="#about">About Us</option>

<option value="#services">Services</option>

<option value="#works">Works</option>

<option value="#contact">Contact</option>

</select>

</div>

<!-- /NAVBAR Mobile############################################### -->

The mobile navigation is select box enhanced with the some smooth scrolling effect. 

To edit the nav elements just edit option values href and labels, as usual remember href targets must corespond with sections id`s o the page.

In addition here you can edit the scroll options: speed and easing type.

To edit the speed of animation change the value I have bolded below:

 

<select class="dropmenu" name="dropmenu" onChange="$.scrollTo(this.value, 1500, {easing:'easeInOutExpo', axis:'y'})">

To edit the type of easing replace 'easeInOutExpo' with another type of easing. Easing samples you can find here:

http://matthewlein.com/experiments/easing.html 

 

How to: Resposivity

Exit is responsive template, powered with parallax effect, but, unfortunatelly the parallax effect wont work on mobile devices such as iPad, iPhone. I have figured out that the parallax effect will work on desktop version of the site and will be disabled on smaller devices. To achive that parallaxed images are followed by normal images and when the resolution indicates user is using mobile device template hides parallaxed images and show normal ones. 

I have made 3 steps for resposivity in this template:

desktop : width >1026px

tablet : width 768px - 1025px

mobile: width: <767px

 

How to: Img and Video background

Exit comes with 2 homepage variants, one with static background and one with video.

Editing the static background homepage.

To change the background image find in styles.css file #home and #home_bg and edit backgrounds url`s for this selectors.

#home_bg will be displayed on desktop version of the site, and home is displayed on the tablet and mobile version.

 

#home { background: url(../img/home_bg.jpg) no-repeat center center;

 

#home_bg { background: url(../img/home_bg.jpg) no-repeat center center;

 

Editing the video background.

With the video homepage variant you can find "video" folder with some files in it. The best and easiest way is to replace the files with your own videos. 

To cover all browsers you need to have several filetypes of the same video : .mp4, .ogg, .webm and jpg witch will be displayed when video is loading or when somehow the browser does not support video.

Best way to convert your video is to use:

http://video.online-convert.com/ 

just convert your video, change the file names and replace the files.

If you are more advanced user you can try to edit custom.js file. 

How to: Parallax

Parallax effect is achived using stellar.js. In order to explain you how it works I`ll focus on one header:

 

<!-- Header -->

<div class="header" >

<div class="container visible-desktop" id="parallax" data-stellar-ratio="1.1" data-stellar-vertical-offset="0"></div>

<div class="container visible-tablet" id="parallax_mobile" ></div>

<div class="container visible-desktop" id="parallax_2" data-stellar-ratio="0.8" data-stellar-vertical-offset="50"></div>

<div class="container visible-tablet" id="parallax_2_mobile" ></div>

<div class="container visible-desktop" id="about_header" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="0"><h1>ABOUT US</h1></div>

<div class="container visible-tablet" id="about_header_mobile" ><h1>ABOUT US</h1></div>

</div>

<!-- /Header -->

As I have mentioned before parallaxed images are followed by non parallaxed for mobile version of website.

here is the code without nonparallaxed images:

 

<div class="container visible-desktop" id="parallax" data-stellar-ratio="1.1" data-stellar-vertical-offset="0"></div>

<div class="container visible-desktop" id="parallax_2" data-stellar-ratio="0.8" data-stellar-vertical-offset="50"></div>

<div class="container visible-desktop" id="about_header" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="0"><h1>ABOUT US</h1></div>
The parallax effect is based on 4 layers witch scrolls in different speed in relation to whole site scroll. 
background, first image, header text, and front image.
Header text moves with normal speed but all other layers with different speed.
 
to edit the speeds just edit data-stellar-ratio and data-stellar-background-ratio values. You can also edit the offset values. 
 
You can find more about the configuration of stellar here: http://markdalgleish.com/projects/stellar.js/
 
In addition I have included psd file with headers, they are heighter than the header because you need to have some overlap distance, for scrolling purpose.
 
Be sure to include all most important graphics between central guidelies. All graphics beside background save as png file, background as jpg.

How to: Portfolio

In the portfolio section I have included flexslider. The sample code for single portfolio work :

<!-- Portfolio work 1 -->

<div class="span12">

<h2 class="centered">Target - landing page</h2>

<div class="flexslider" id="portfolio1">

<ul class="slides">

<li>

<img src="img/portfolio1_a.jpg" alt=""/>                                      

</li>

<li>

<img src="img/portfolio1_b.jpg" alt=""/>                                      

</li>

</ul>

</div>

                          

<div class="row margin90">                             

<div class="span8">                                  

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

                              

<div class="span4">

<div class="client">

<h5><strong>Client: </strong>Microsoft&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Date: </strong>01/05/2012</h5>

<button type="button" name="" value="" class="cta">Check Online Version</button>

</div>

</div>                              

</div>

<hr>

</div>

<!-- /Portfolio work 1 -->

To edit the images just edit the li elements of the ul list, then edit the description and cta button target.

If you want to add/remove works in portdolio section, add/remove sliders you also need to add flexsliders id`s on the end of the side:

 

 

<script type="text/javascript">

        $(window).load(function() {

                       $('#portfolio1, #portfolio2, #portfolio3').flexslider({slideshow: false});

                       });

</script>

I have also included psd file with mockups used in live preview so you can easly insert your work.

 

PSD files

I have included several psd files for easier customisation. 

Parallax_headers - here you can edit the headers with parallax effect. Save background layer as jpg and then each next layer as png files with transparency. In order to move things around just move it in the graphic file. It is much easier than positioning each element in css file.

Portfolio_mockups - I have also included mockups I have used in the template preview. Most of them are based on smart objects and are easy to edit.

Portfolio_slider_nav1, Portfolio_slider_nav2 - graphisc used in the slider controls.

Services - badges with services category names.

Gallery_background - background for the gallery section with fading on the sides - this file can also be used to edit the homepage background.

Credits

Fonts:

Source Sans Pro - http://www.google.com/webfonts/specimen/Source+Sans+Pro

Images:

All beautiful images used in this templae are by: http://photodune.net/user/ollyi/portfolio and parallaxed images are included in the template.

Video in the background:

http://videohive.net/item/dust-red-loop/123739 , video is not included in the template.