Porto 3.5.1
Responsive HTML5 Template
- created: 02/15/2013
- latest update: 12/19/2014
- by: Okler Themes
- email: okler@okler.net
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form or to our support forum at http://www.okler.net.
Tips
Most of the questions are already answered in the FAQ's:
http://www.okler.net
Due to local security restrictions, some things will not work locally, especially in Chrome. But everything will work once the files have been updated to your website.
Use Firebug or Chrome Developer Tools.
Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
Getting an error message? Someone might have seen it too, try a google search for a quick fix.
Explore the live demo for pages ideas and sample code.
Files Structure
/HTML
/css (Template CSS)
/fonts (Font Faces, Font Awesome, etc..)
/skins
default.css
... (Create your own skin)
/img (All Images)
/js (Template JS)
/views (JS to run in specific pages. I.E: Home or Contact Us)
/master (You don't need to include that folder in your project, it has only the Style Switcher functions)
/php (PHP Helpers - I.E: Contact Us form.)
/vendor (All external libs. We keep all of them in this folder to make updates easily.)
/video (All Videos)
Javascript
It's possible to change the JS settings by extending the defaults from the template, that way is so much easier to update the theme changing only one JS file.
Changing Settings
1) Example: Changing the "scroll to top" icon: (js/custom.js)
$.extend(theme.PluginScrollToTop.defaults, {
iconClass: 'fa fa-chevron-up'
});
2) Example: Changing the "word rotate" default delay: (js/custom.js)
$.extend(theme.PluginWordRotate.defaults, {
delay: 3000
});
You can find all the defaults of the plugins and partials in the file js/theme.js as you can see here:
Changing Plugins Options
The template includes a very simple way to configure the elements that are initialized automatically, such as the sliders, you just need to put the settings in the "data-plugin-options" attribute, as you can see below:
<div class="slider" data-plugin-revolution-slider data-plugin-options='{"startheight": 700}'>
It works the same way for most of the plugins included in the template: owlCarousel, Word Rotate, Twitter Feed, etc...
If you want to disable the auto initialization you can just add a class "manual" or remove the data-plugin-* attribute:
<div class="slider manual" id="myRevolutionSlider>
So now you can initialize that using the standard JS mode:
$(document).ready(function() {
$('#myRevolutionSlider').revolution({
delay:9000,
startwidth:960,
...
...
});
});
Remove/Disable a Plugin or Partial
If you want to remove/disable a plugin or partial that has a "initialize" function completely, follow this example:
(js/custom.js)
theme.PluginScrollToTop.initialize = false;
You can find all the available plugins and partials in the file js/theme.init.js as you can see here:
Manually Initializing a Plugin
Some of the plugins/elements are initialized automatically, if you want to disabled that and call the plugin via Javascript, follow these steps:
FROM (HTML):
<div class="owl-carousel" data-plugin-options='{"items": 6, "singleItem": false, "autoPlay": true}'>
TO (HTML):
<div class="owl-carousel manual" id="owl-example">
(Javascript):
$(document).ready(function() {
$("#owl-example").owlCarousel({
"items": 6,
"singleItem": false,
"autoPlay": true
});
});
HTML Structure
The template is based on Bootstrap 3 Framework - http://getbootstrap.com
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Basic HTML Markup
<div class="row">
<div class="col-md-12">
Level 1 column
<div class="row">
<div class="col-md-6">Level 2</div>
<div class="col-md-6">Level 2</div>
</div>
</div>
</div>
If you need more information, please visit this site: http://getbootstrap.com/css/#grid
CSS Structure
The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:
- theme.css - (The basic layout structure styles) - theme-elements.css - (Elements such as sliders, boxes, titles, etc...) - theme-shop.css - (Shop Pages styles) - theme-blog.css (Blog Pages styles) - theme-animate.css (CSS Animations) - custom.css (Add all customizations into this file) - ie.css (Internet Explorer fixes)
Customization & Styles
Colors
The style switcher was made to support unlimited skin colors, for that we use Less (http://www.lesscss.org/) to process the CSS dinamically in the demo and show the color right away.
You don't need to use LESS in your project, after you done customizing your skin you may want to grab the generated code and save it in a file in the folder: /css/skins/(skin-name).css
Layout Style (Normal/Boxed)
The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the following class in the <html>:
<html class="boxed">
You can also customize the background color or image.
Background Color (Light/Dark)
The template has two different background colors, Light and Dark. The light one is the default option, if you want to use the Dark version, add the following class in the <html>:
<html class="dark">
Fonts
To change the embedded font, please take a look in the head part of the website and you will find this tag:
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.
Icons
Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.
If you need more information, please visit this site: http://fontawesome.io/
HTML Markup:
<i class="fa fa-edit"></i> <i class="fa fa-search"></i> ...
Sliders
Home Page Sliders
Revolution Slider
This is one of the best slider plugins we have seen so far.
"Slider Revolution is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. On top of that, Slider Revolution is fully responsive and mobile optimized and can take on any dimensions."
More details on http://themes.themepunch.com/?theme=revolution_jq
Lightbox
The filter is driven by Magnific Popup script.
For more information check the documentation.
http://dimsemenov.com/plugins/magnific-popup/
Video Background
The video background are driven by the Vide Plugin - https://github.com/VodkaBears/Vide
Here's an example of usage:
<section class="video" data-video-path="video/dark" data-plugin-video-background data-plugin-options='{"posterType": "jpg", "position": "50% 50%"}'>
Prepare your video in several formats like '.webm', '.mp4' for cross browser compatability, also add a poster with .jpg, .png or .gif extension and set in the attribute data-video-path.
Filtering
The filter is driven by the Isotope script - http://isotope.metafizzy.co/
Here's an example of usage:
Filter Options:
<ul class="nav nav-pills sort-source" data-sort-id="team" data-option-key="filter">
<li data-option-value="*" class="active"><a href="#">Show All</a></li>
<li data-option-value=".leadership"><a href="#">Leadership</a></li>
<li data-option-value=".marketing"><a href="#">Marketing</a></li>
<li data-option-value=".development"><a href="#">Development</a></li>
<li data-option-value=".design"><a href="#">Design</a></li>
</ul>
Filter Data:
<ul class="team-list sort-destination" data-sort-id="team">
<li class="col-md-3 isotope-item leadership">
<div class="team-item thumbnail">
<a href="#" class="thumb-info team">
<img alt="" src="img/team/team-1.jpg">
<span class="thumb-info-title">
<span class="thumb-info-inner">John Doe</span>
<span class="thumb-info-type">CEO</span>
</span>
</a>
<span class="thumb-info-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</p>
<div class="thumb-info-social-icons">
<a rel="tooltip" data-placement="bottom" target="_blank" href="http://www.facebook.com" data-original-title="Facebook"><i class="icon-facebook"></i><span>Facebook</span></a>
<a rel="tooltip" data-placement="bottom" href="http://www.twitter.com" data-original-title="Twitter"><i class="icon-twitter"></i><span>Twitter</span></a>
<a rel="tooltip" data-placement="bottom" href="http://www.linkedin.com" data-original-title="Linkedin"><i class="icon-linkedin"></i><span>Linkedin</span></a>
</div>
</span>
</div>
</li>
.....
</ul>
PHP Scripts
Regarding contact form as main part of Contact Us section, only thing you need to do is to setup your email address.
To do this, please open "php/contact-form.php" file and change this line:
$to = 'you@domain.com';
One notice: this will be functional only on your server, php file can not be executed on your local computer.
Skin
Generate your own skin color using the Preview on ThemeForest:
Copy that and save as a css skin file.
Make sure that the path to the skin file is correct.
Search
If you want to use Google Custom Search on your website you have to create an API Key and configure following these steps: - Go to: http://www.google.com/cse
You'll see that the search redirects you to the file - page-search-results.html:
Open that file and paste there the code you copied from Google.
Twitter Feed
1) Open up the HTML files and put your twitter in the attribute "data-account-id".
2) Go to: https://apps.twitter.com/
3) Click on "Create new APP": 
4) Enter the information about your website:
5) Click in the API Keys tab and in the button "Create my access token": 
(Wait 1 minute and refresh the page)
6) Get the keys and put in the file: php/twitter-feed.php:
Effects
You can add some Animations / Transitions to the elements which fires when an element scrolls into view, it's pretty simple to use and you can add it in any element.
Usage:
<div data-appear-animation="bounceIn" data-appear-animation-delay="200">
...
</div>
Heads up: The Attribute data-appear-animation-delay is Optional and is set in Miliseconds.
The animation can be set to:
- flash
- shake
- bounce
- tada
- swing
- wobble
- wiggle
- pulse
- fadeIn
- fadeInUp
- fadeInDown
- fadeInLeft
- fadeInRight
- fadeInUpBig
- fadeInDownBig
- fadeInLeftBig
- fadeInRightBig
- bounceIn
- bounceInUp
- bounceInDown
- bounceInLeft
- bounceInRight
- rotateIn
- rotateInUpLeft
- rotateInDownLeft
- rotateInUpRight
- rotateInDownRight
Admin Extension
How to integrate Porto Admin Extension on Porto.
The Admin Extension is a package with some features from Porto Admin template that can be used in the Front-End (Porto - Responsive HTML5 Template).
- Porto - Responsive HTML5 Template comes with a few samples files, such as feature-admin-charts.html, feature-admin-forms-advanced.html, etc... with those, you can see the HTML Markup and the working pages from the preview.
- In each page you can see which CSS/JS files you need to include to get the elements working.
Steps to use the admin extension:
1) Add the CSS files for that specific page (in this example, based on feature-admin-forms-advanced.html):
(Make sure the paths for the admin match with your own structure, in this example, the path is /admin/...)
2) Add the JS files for that specific page:
(Consider to combine and compress all those files on your project)
3) That's it, now you can start to use the features from the admin as seen in the preview.
SKIN: If you want to change the color skin, don't forget to generate the extension skin file and save in the file (assets/stylesheets/skins/extension.css):
Source & Credits
The images included in preview are for demonstration purposes and should always be replaced with your own work.
Images: http://photodune.net/
Subtle Patterns: http://subtlepatterns.com/
Fonts:
Google Fonts - http://www.google.com/webfonts
Icons Font-face - http://fontawesome.io/
Scripts:
jQuery - http://www.jquery.com/
Bootstrap 3 - http://getbootstrap.com/
Revolution Slider - http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Nivo Slider - http://dev7studios.com/nivo-slider/
Isotope Jquery plugin - http://isotope.metafizzy.co
Modernizr - http://modernizr.com/
jQuery gMap 2 - Google Maps API V3 - http://labs.mario.ec/jquery-gmap/
Owl Carousel - http://owlgraphic.com/owlcarousel
Respond.js - https://github.com/scottjehl/Respond
Twitter JS Api - http://code.google.com/p/twitterjs/
Jquery Flickr Plugin - http://www.newmediacampaigns.com/page/jquery-flickr-plugin
Jquery Easing - http://gsgd.co.uk/sandbox/jquery/easing/
Magnific Popup - http://dimsemenov.com/plugins/magnific-popup/
Jquery Validate - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Jquery Cookie - https://github.com/carhartl/jquery-cookie
Stellar.JS- http://markdalgleish.com/projects/stellar.js/
Jquery Appear - https://github.com/bas2k/jquery.appear/
Vide - https://github.com/VodkaBears/Vide
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions.
Social Media - Icons
Here's the css classes of the available social media icons in the template: