Porto

Documentation

  • Version: 3.7.0
  • Created: 02/15/2013
  • Latest Update: 01/09/2015

Thank you for purchasing the #1 selling HTML Site template on ThemeForest.
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

Files Structure

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.
Here are a few samples on how to do that:


Changing Settings


1) Changing the "scroll to top" icon: (js/custom.js) 
$.extend(theme.PluginScrollToTop.defaults, {
	iconClass: 'fa fa-chevron-up'
});


2) 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 = function() {};

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.



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


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
 
Learn More: How to change the Skin

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.


Skin

You can generate your own skin color:






Copy that and save as a css skin file css/skins/default.css

RTL

To activate the RTL mode please follow the steps:


1) Add the "dir" attribute in the HTML tag:


2) Add the Bootstrap RTL version after the default Bootstrap file in the HTML:


3) Move and Replace all the files from the folder: HTML/master/rtl/css to the default css folder HTML/css.

Social Media - Icons

Here's the css classes of the available social media icons in the template:

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/ 

<i class="fa fa-edit"></i>
<i class="fa fa-search"></i>
...

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.

Newsletter

If you want to use the newsletter you need to have a MailChimp account (the funcional Newsletter works only with MailChimp - http://mailchimp.com/). Once you have the MailChimp account you have to configure the subscription file with your APIKey, ListID and set the Datacenter. Open the file /php/newsletter-subscribe.php and change the variables:

$apiKey = 'your-api-key';
-How get your Mailchimp API KEY - http://kb.mailchimp.com/article/where-can-i-find-my-api-key 


$listId = 'your-list-id';
- How to get your Mailchimp LIST ID - http://kb.mailchimp.com/article/how-can-i-find-my-list-id

Twitter Feed

1) Open up the HTML files and put your twitter username.



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:


Admin Extension

View Topic: How to integrate Porto Admin Extension on Porto

Source & Credits


Changelog

View Changelog