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.
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.
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.
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.
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 chenge the logo?
There are two logo places in this template - one on the homepage and the second one on the navbar.
How tho change homepage logo?
First find Home section in the index.html file, then div with id="logo", as you can see:
<div id="logo"><img src="img/logo.png" alt="Logo" ></div>
you just need to replace the src with your logo or replace the file logo.png in the img folder. He file is a png file with transparency. There are no dimention boundries.
How to change navbar logo?
You need to find div with id="logo_small":
<div id="logo_small"><a href="#home"><img src="img/logo_small.png" alt="Logo small" ></a></div>
As with the homepage logo you just need to replace the logo-small.png file in the img folder. The navbar is 70px height so the logo shouldnt be heighter.
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
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.
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>
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 <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.
In this template I have also included Gallery section, for those of you who do not have the need for extensive discriptions and multiple images for their single portfolio piece. The single piece of work in the gallery looks like this:
<figure><a class="enlarge fancybox" href="img/img_placeholder.jpg"><img src="img/gallery_img1.jpg" alt="img" ></a></figure> <h3>The Dutch Contraption</h3>
It is made from two elements:
All you need to do is to enter the paths for thumb and big image, add the title, and you are ready to go. Thumb image should be 220px width.
The thumbinals are placed in 3 column layout so loy can arange them as you want moving the code between corresponding columns.
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.
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.