Porto Documentation

## Overview

Porto is a professional, multipurpose Drupal theme perfect for any business or portfolio website. For theme support that cannot be found in this documentation, please visit our support forum. Once you have registered please contact us via the ThemeForest author page with your forum username so you can be granted posting rights.

Updated: 09/12/14
Author: Refaktor
Docs powered by: TOC
Original design by Okler

## Porto 1.X vs 2.X

There are a lot of differences between version 1.X and 2.X that users looking to upgrade need to be aware of. Users that have made significant customizations are advised to consider not updating, or at the very least prepare the update in a separate install location which can be easily transferred to your live site.

For all information pertaining to the differences between the two versions please refer to this forum thread.

## Installation

There are several ways Porto can be installed. For existing sites that already have content, the first method will only involve the installation and activation of the theme. The second option includes a full Drupal 7 install with the same SQL database file used to create the theme demo. Please choose which installation method works best for you and follow the instructions. We do highly recommend you perform the full install, especially if you plan on using the Commerce functionality.

### Theme Only

Option 1:

- Visit yourdomain.com/admin/appearance/install
- Upload the Porto.zip file
- Enable and set to default

Option 2:

- Extract the Porto.zip file and upload via FTP to /sites/all/themes
- Visit yourdomain.com/admin/appearance/
- Scroll down to "DISABLED THEMES" and set and enable Porto

### Full Drupal Install

The following steps are designed for people that have experience manually installing Drupal and importing databases. If you do not feel comfortable performing these steps yourself, contact your server administrator for help. NOTE this option is for a completely new Drupal install. Do not import the provided SQL file into an existing Drupal database or you will lose all of your data!

1. Create a database for this installation of Drupal and import the SQL file that came with the theme.
2. Follow these directions to create the settings.php file. Save this file somewhere so you can copy it over to the Drupal installation we have provided.
3. Copy the entire contents of the /demo/porto folder to the location on your web server where you want your site to be accessed. If you want your primary domain to point to your install of Porto, copy everything to the root folder. If you want your site to be accessed as a subsection of your domain (for example: yourdomain.com/drupal) then simply rename the /demo/porto folder to the desired name and upload to the root of your server. Also be sure to copy over the settings.php file mentioned in the previous step
4. Login to your site with the username Steve and the password admin and visit /admin/people to change the admin username and password.
5. Go through the Drupal configuration found in /admin/config options and update all the necessary information to reflect your website. Also be sure to visit /admin/config/media/file-system and change the Temporary Directory.

## Porto Sub-Theme

Note: as of version 1.1.2 the sub-theme is the default active theme in the full demo installation.

Porto comes with a shell sub-theme called Porto_sub that you can use to make customizations to the style and template structure of the parent theme without having to modify the parent theme itself. This is useful if you plan on updating the parent theme as we release updates on ThemeForest. If you performed the full install you will already see Porto_sub in the list of themes available. If you did the standalone install you can find the Porto_sub.zip file in the root of the download files and you can install it like any other theme.

There is an empty stylesheet already defined which is /css/custom.css (inside the Porto_sub folder). Use this file to add all of the custom CSS that you plan on using. You can also copy any template file from the /Porto/templates folder into the /Porto_sub/templates folder and it will listen to the sub-themes template file first. This will allow you to update the parent theme as we make updates without losing your customizations. Just pay attention to the changelog and compare the parent theme files with yours and make any adjustments as needed.

You will need to configure the sub-themes theme settings separately from the parent theme's, so visit /admin/appearance/settings/porto_sub to configure the theme settings for the sub-theme. You also need to configure the block regions separately.

## Menu

Porto has a block region called Header Menu which can be used to add any menu block you like. The demo simply uses the default Main Menu block but you can create a custom menu block if you like.

Note: make sure to check the "show as expanded" box on all parent items with children to ensure the dropdown menu works correctly.

## Modules

You can find all of the modules used in the demo in the /modules/modules.zip archive in the root of the folder you downloaded from ThemeForest. Not all modules are required to use the theme, but below is a list of modules you will need to utilize various elements of the theme

#### General Required Modules

- jQuery update (7.x-2.x-dev)
- ctools
- Views
- jQuery Colorpicker
- LESS CSS Preprocessor

#### NivoSlider

- Nivo Slider

### Porto Content Data

If you used the "theme only" option to install the theme on an existing install that already has content we recommend you use our Porto Content Data module to create the additional content types, fields and Views needed to fully utilize the theme. You will find it in the /assets folder contained in the file you downloaded from ThemeForest. This module is a custom Features module and will not run without it. We recommend copying all of the modules from the /modules folder into your install if you do not already have them. After you have all the modules simply upload and activate the Porto Content Data module and the content types, fields and Views will automatically be created.

## Image Sliders

#### Mega Slider

Porto includes the Drupal Mega Slider module. This module offers an incredible number of options to create the exact slider to meet your needs. To begin configuring your slider visit /admin/structure/md-slider and press the "add new slider" link. You can find documentation for the slider inside the md_slider module folder and you can reference the video below.

#### NivoSlider

If you would like to use a NivoSlider image slider on your site, simply install the NivoSlider module and visit /admin/structure/nivo-slider to set up and configure your slider. A block region is created for your slider that you can use in any block region of your choosing.

## Front Page

The front page seen on the Porto demo consists of various block regions. Some are generated by modules (ie Mega Slider), others by Views, and some are custom blocks with special markup. You can find all of the example markup used on the demo front page inside the /assets/examples/ folder in the root of the theme folder.

## One Page Site

New in version 1.1 is support for a "one-page" style page where all of the content is on a single page. For an example of what this looks like you can refer to the demo page here. The theme uses a content type called "One Page" and a corresponding template to create this one page style layout. If you don't have this content type already create it via /admin/structure/types. It requires no additional fields but we recommend you disable commenting and author information. You can add content directly into the node or add blocks to the One Page Content region which will only display on a one page node.

#### One Page Menu

The one page template also supports a smooth scrolling effect to #anchor elements. For example, you have four sections on your page: #about, #services, #team, #contact. Each of your menu items can link to those anchor elements by using the following URL structure: "node/ID/#contact". ID in this case is the node ID of the page you have created to use for the "one-page" template. To find the id simply visit /admin/content and press edit on that page. The URL will tell you the ID.

If you are using the Latest Projects block, you can link to #projects. If you are using the One Page Team block, you can link to #team. If you wish to link to a custom block with your own markup, simply add an id="" attribute to the main div of your block content that matches your menu link.

## Theme Settings

Visit /admin/appearance/settings/Porto to configure your theme's settings. You can select your color scheme, add your own custom CSS, add your own custom logo, etc.

## Custom Content Types

#### Portfolio

Fields:

- Body: The default body field.
- Image: The default Image field used for uploading the images.
- Portfolio Category: This is a term reference field that is linked to a vocabulary created specifically for this content type.
- Portfolio Description: An optional text field for adding a small description to your portfolio item.
- Portfolio Link: An optional text field for adding a link to a separate page such as an external website.
- Portfolio Skills: An optional term reference (autocomplete term widget) field associated with a taxonomy vocabulary called "Portfolio Skills".
- Portfolio Client: An optional text field for listening the project client.

Portfolio Block - Example: http://refaktorthemes.com/porto/portfolio-4-columns

This is the standard Portfolio style which utilizes the "Portfolio Block Page" View. If you are not using the full demo or did not use the Custom Content module you can use the code in /views_exports/portfolio-block.txt to import this View. Then simply place the "View: Portfolio Block" in the Content region and configure the block visibility settings to your liking.

Template files

- /templates/node/node--portfolio.tpl.php
- /templates/field--field_image--portfolio.tpl.php
- /templates/node/node--view--portfolio--block.tpl.php
- /templates/views/views-view--portfolio-block.tpl.php

#### Portfolio Columns

To change the number of items appear in a row in the Portfolio block visit the theme settings (/admin/appearance/settings/Porto).

#### Related Projects:

Porto also includes support for a "Related Projects" block that you can use to showcase additional Portfolio items on the single Portfolio node pages, or anywhere else you would like. If you are not using the full demo or did not use the Custom Content module you can use the code in /views_exports/related-projects.txt to import this View. Then simply place the "View: Related Projects" in the Content region and configure the block visibility settings to your liking.

Template files

- /templates/node/node--view--related-projects--block.tpl.php
- /templates/views/views-view--related-projects.tpl.php

#### Portfolio Filters:

The Portfolio includes support for an Isotope filter effect powered by Taxonomy terms. To utilize this effect visit /admin/structure/taxonomy and create a new vocabulary (example: Portfolio). After creating your vocabulary you can create the terms you wish to use to categorize your portfolio items. This taxonomy vocabulary can be linked to the Portfolio content type via a term reference field so you can select the category or categories you want to place your items into.

The filters are powered by a View called Portfolio Filters that is placed in the View header as a global view area. If you don't already have this view you can use the code in /views_exports/portfolio-filters.txt to import as a View for placement in the View header of the Portfolio view.

Template files

- /templates/views/views-view-list--portfolio-filters.tpl.php
- /templates/views/views-view-fields--portfolio-filters.tpl.php

#### Team

Team Block - Example: http://refaktorthemes.com/porto/team

Fields:

- Image: The default Image field used for uploading the images.
- Team Category: This is a term reference field that is linked to a vocabulary created specifically for this content type.
- Team Bio: A text field used to enter a short description about the team member.
- Facebook Link: Used to add a link to the team member's Facebook page.
- Twitter Link: Used to add a link to the team member's Twitter page.
- LinkedIn Link: Used to add a link to the team member's LinkedIn page.

Somewhat similar to the Portfolio, the Team block can be used to showcase your site or company's team members. If you are not using the full demo or did not use the Custom Content module you can use the code in /views_exports/team.txt to import this View. Then simply place the "View: Team" in the Content region and configure the block visibility settings to your liking.

Template files

- /templates/node/node--view--team--block.tpl.php
- /templates/views/views-view--team.tpl.php

#### Team Filters:

The Team block view also includes support for an Isotope filter effect powered by Taxonomy terms. To utilize this effect visit /admin/structure/taxonomy and create a new vocabulary (example: Team). After creating your vocabulary you can create the terms you wish to use to categorize your portfolio items. This taxonomy vocabulary can be linked to the Team content type via a term reference field so you can select the category or categories you want to place your items into.

The filters are powered by a View called Team Filters that is placed in the View header as a global view area. If you don't already have this view you can use the code in /views_exports/team-filters.txt to import as a View for placement in the View header of the Team view.

Template files

- /templates/views/views-view-list--team-filters.tpl.php
- /templates/views/views-view-fields--team-filters.tpl.php

#### Carousel

This content type lets you create a Flexslider-powered image carousel. It utilizes just the standard Image field (field_image) set to allow an unlimited number of images.

Fields:

- Image: The default Image field used for uploading the images.

Template files

- /templates/node/node--carousel.tpl.php
- /templates/views/views-view--client-carousel.tpl.php
- /templates/views/views-view-unformatted--client-carousel.tpl.php

The export code /views-exports/carousel.txt can be used to create the Carousel View which uses a Block display. This block can then be added to the region of your choice.

#### Testimonials

Fields:

- Testimonial Content: Used for the written content of the testimonial.
- Testimonial Image: The default Image field used for uploading the testimonial author's image.
- Testimonial Name: A text field for the name of the testimonial's author.
- Testimonial Info: A text field for adding additional info about the testimonial's author such as their company or organization.

Template files

- /templates/node/node--testimonials.tpl.php
- /templates/views/views-view--testimonials.tpl.php
- /templates/views/views-view-unformatted--testimonials.tpl.php

The export code /views-exports/testimonials.txt can be used to create the Testimonials View which uses a Block display. This block can then be added to the region of your choice.

#### FAQ

Fields:

- Active: This is a simple boolean field type used to set whether or not the FAQ item is open or "active" by default.

Template files

- /templates/node/node--faq.tpl.php
- /templates/views/views-view--faq.tpl.php
- /templates/views/views-view-unformatted--faq.tpl.php

The export code /views-exports/faq.txt can be used to create the FAQ View which uses a Block display. This block can then be added to the region of your choice.

#### Parallax

Fields:

- Background Image: The standard image field for uploading the image background for your Parallax content.
- Parallax Icon: Add a Font Awesome icon class to use in your Block. Classes can be found here.
- Big Caption: Use this field to add a large size caption to your content.
- Small Caption: Use this field to add a small size caption to your content.
- Text Color: select either black or white text color.
- Parallax Category: term reference field to add a taxonomy term association with your Parallax content..

Template files

- /templates/node/node--parallax.tpl.php
- /templates/views/views-view--parallax.tpl.php
- /templates/views/views-view-unformatted--parallax.tpl.php

The export code /views-exports/parallax.txt can be used to create the Parallax View which uses a Block displays. These blocks can then be added to the region of your choice.

#### Contact

This content type lets you create a custom "Contact" page featuring the Drupal contact form and a Google map.

Fields:

- Map Address: A text field for the physical address to be displayed on the map.
- Map HTML: A text field the text/markup that will be displayed with the map marker.
- Map Latitude: A text field the latitude of the map marker.
- Map Longitude: A text field the longitude of the map marker.
- Body: The default body field.

Template files

- /templates/node/node--contact.tpl.php

The export code /assets/views-exports/contact.txt can be used to create the contact View which uses a Block display. This block can then be added to the region of your choice.

#### Home Concept

This content type lets you create content for the "Home Concepts" circles block.

Fields:

See the above image for a list of all the fields if you are creating this content type manually.

Template files

- /templates/node/node--home-concept.tpl.php

The export code /assets/views-exports/home-concept.txt can be used to create the "Home Concept" view which uses a Block display. This block can then be added to the region of your choice.

#### One Page

Fields:

This content type does not use any custom fields.

Template files

- /templates/page/page--node--one-page.tpl.php

#### Our History

This content type lets you create content for the "Home Concepts" circles block.

Fields:

- History Image: Image field for the history item.
- History Date: Date for the history item.
- Body: The default body field.

Template files

- /templates/views/views-view--our-history.tpl.php

The export code /assets/views-exports/our-history.txt can be used to create the "Our History" view which uses a Block display. This block can then be added to the region of your choice.

#### Twitter Feed

This content type lets you create a "Twitter Feed" view block. To get the necessary authentication keys you must visit https://dev.twitter.com/apps and log in with your Twitter account. Once there you can create an app and generate the OAuth keys needed to enter into corresponding fields.

Fields:

- Twitter Handle: A text field for the handle of the Twitter account you would like to display feed for.
- Twitter Consumer Key: A text field for the Twitter oAuth Consumer Key.
- Twitter Consumer Secret: A text field for the Twitter oAuth Consumer Secret.
- Twitter User Token: A text field for the Twitter oAuth User Token.
- Twitter User Secret: A text field for the Twitter oAuth User Secret.
- Tweet Count: A text field for the number of Tweets to display in the feed.

Template files

- /templates/node/node--twitter-feed.tpl.php

The export code /assets/views-exports/twitter-feed.txt can be used to create the "Twitter Feed" view which uses a Block display. This block can then be added to the region of your choice.

#### Video Background

This content type lets you create a "Video Background" view block.

Fields:

- Video Image: An image field for a fallback image to be used in case the videos cannot render.
- Body: Default Drupal body field that will display inside the video background block.
- MP4 Video: A file field for uploading an MP4 version of the video background.
- OGG Video: A file field for uploading an OGG version of the video background.
- Video Background Category: A term reference field linked to the "Video Background" taxonomy vocabulary. This can be used to assign taxonomy terms to your video background nodes to use as view filter criteria..

Template files

- /templates/node/node--video-background.tpl.php

The export code /assets/views-exports/video-background.txt can be used to create the "Video Background" view which uses a Block display. This block can then be added to the region of your choice.

## Blog (posts)

The Porto demo uses a View to display the article content type nodes. If you do not already have this View using one of our different installation methods you can use the code found in /views-exports/blog.txt to import the View and all its settings. To change the style of image on that View page you can use the Blog View Image option in the theme settings (/admin/appearance/settings/Porto).

#### Author bio

To display a small author bio on the article node page, install the Profile2 module and follow these steps to configure it:

1. Visit /admin/structure/profiles and create a new profile type called "main". If this already exists skip to the next step.
2. Add a field to that profile called "Bio". If this exists skip to the next step.
3. Visit /admin/people and edit your user. Then click on the "Main Profile" tab in the top right corner next to the "Account" link to add your author bio.

## Block Regions

Porto features 16 block regions where you can add your own custom content. Visit yourdomain.com/admin/structure/block to add your own content to the defined block regions. Press "Add Block" to create a new custom blog, or select an existing block from the Disabled list below the defined block regions.

#### Header Block Regions

Porto features five header regions: Header Top, Header Search, Branding, Header Menu and Header Icons. You can use the "demonstrate block regions" link on /admin/structure/block to see exactly where these are located, but the names are fairly self explanatory. If you would like to mimic the social icon region seen next to the menu on the demo you can use the following markup in a block:

    <div class="social-icons">
      <ul class="social-icons">
        <li class="facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook">Facebook</a></li>
        <li class="twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter">Twitter</a></li>
        <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin">Linkedin</a></li>
      </ul>
    </div>

#### Content Block Regions

Porto has a total of five content block regions: Before Content, Content, Sidebar Left, Sidebar Right and After Content. Like the Header regions described above these regions are fairly self explanatory. One thing to note is that the before and after content regions are called outside of the main content wrap so you can use completely full width content (like the Image Slider) or use your own custom wrappers. Those regions are there to do whatever you like with and are not restricted by any additional markup.

Porto also supports Flexslider, and to display a slideshow in your articles simply upload more than one image to the Image field setting when editing your article node.

#### Footer Block Regions

Finally there are 6 footer block regions available, four individual four column regions and two additional six column regions below.

## Extras/Examples

#### Font Awesome

Porto includes support for the popular Font Awesome library. See a full list of all the icons here and below is an example of how you can use an icon in your content:

    <i class="icon icon-anchor"></i>

#### Tabbed Recent/Popular posts block

We have included support for a tabbed recent/popular posts block powered by views. If you're not working off the full install and did not use the custom content module to create all the theme content types, fields and views you can import the /assets/views_exports/tabbed-recent-posts.txt and /assets/views_exports/tabbed-popular-posts.txt views (in that order) which will create the necessary views. From there add the "Tabbed Popular Posts" block to the region of your choice (not the recent posts block, that is used inside the popular posts view block). You can also add an optional "thumbnail" field to your article content type to upload a small thumbnail image that is used within the block.

#### Flickr Feed

The following markup can be used to generate a Flickr Feed anywhere on your site:

    <ul class="thumbnail-gallery flickr-feed"></ul>
    <script>
      jQuery(document).ready(function ($) {
        $('ul.flickr-feed').jflickrfeed({
        limit: 6,
        qstrings: {
    	    id: '93691989@N03'
        },
        itemTemplate: '<li><a rel="flickr[pp_gal]" href="{{image_b}}"><span class="thumbnail"><img alt="{{title}}" src="{{image_s}}" /></span></a></li>'
        });
      });
    </script>

#### Lightbox

The following is an example of how you can create a very simple image lightbox in your node content:

    <a class="img-thumbnail lightbox pull-left" data-plugin-options="{"type":"image"}" href="img.jpg"><img class="img-responsive" src="img.jpg" width="215" /> <span class="zoom"> <i class="icon icon-16 icon-white-shadowed icon-search"></i></span> </a>

#### Social Icons

You can easily display social icons with a roll-over effect with the following markup:

    <div class="social-icons">
      <ul class="social-icons">
        <li class="facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook">Facebook</a></li>
        <li class="twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter">Twitter</a></li>
        <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin">Linkedin</a></li>
      </ul>
    </div>

Here is a list of the following icons that are supported:

- digg
- dribble
- facebook
- flickr
- forrst
- googleplus
- html5
- icloud
- lastfm
- linkedin
- myspace
- paypal
- picasa
- pinterest
- reddit
- rss
- skype
- stumbleupon
- tumblr
- twitter
- vimeo
- wordpress
- yahoo
- youtube
- github
- behance
- yelp
- mail
- instagram
- foursqaure
- zerply

#### Toggle

If you want to manually create a toggle section like the FAQ page you can use the following markup:

    <div class="toogle">
      <section class="toggle active">
        <label>Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
        <div class="toggle-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc.</p>
        </div>
        </section>
        <section class="toggle">
          <label>Curabitur eget leo at imperdiet vague iaculis vitaes?</label>
          <div class="toggle-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa.</p>
          </div>
      </section>
    </div>

#### Featured Highlight

    <section class="featured highlight footer">
      <div class="container">
        <div class="row center counters">
          <div class="col-md-3">
            <strong data-to="7000" data-append="+">7000+</strong>
            <label>Happy Clients</label>
          </div>
          <div class="col-md-3">
            <strong data-to="15">15</strong>
            <label>Years in Business</label>
          </div>
          <div class="col-md-3">
            <strong data-to="352">352</strong>
            <label>Cups of Coffee</label>
          </div>
          <div class="col-md-3">
            <strong data-to="159">159</strong>
            <label>High Score</label>
          </div>
        </div>
      </div>
    </section>

#### Progress Bars

    <div class="progress-bars">
      <div class="progress-label">
        <span>HTML/CSS</span>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-primary" data-appear-progress-animation="100%" style="overflow: hidden; width: 100%;">
          <span class="progress-bar-tooltip" style="opacity: 1;">100%</span>
        </div>
      </div>
      <div class="progress-label">
        <span>Design</span>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-primary" data-appear-progress-animation="85%" data-appear-animation-delay="300" style="-webkit-animation: 300ms; overflow: hidden; width: 85%;">
          <span class="progress-bar-tooltip" style="opacity: 1;">85%</span>
        </div>
      </div>
      <div class="progress-label">
        <span>WordPress</span>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-primary" data-appear-progress-animation="75%" data-appear-animation-delay="600" style="-webkit-animation: 600ms; overflow: hidden; width: 75%;">
          <span class="progress-bar-tooltip" style="opacity: 1;">75%</span>
        </div>
      </div>
      <div class="progress-label">
        <span>Photoshop</span>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-primary" data-appear-progress-animation="85%" data-appear-animation-delay="900" style="-webkit-animation: 900ms; overflow: hidden; width: 85%;">
          <span class="progress-bar-tooltip" style="opacity: 1;">85%</span>
        </div>
      </div>
    </div>

#### CSS3 Animations

Version 1.1.2 of the theme introduced support for CSS3 animations which can be seen here on our demo. Please refer to the /assets/examples/animations.html file for code examples for each of the animations.

#### More Examples

Please refer to the /assets/examples/elements.html file for more code examples.

## Internet Explorer 8

For Porto to function properly in ie8 bootstrap.css is called in html.tpl.php before the global $scripts variable is called to solve the @import conflict with respond.js. If you wish to call bootstrap.css in the .info file you will have to use CSS aggregation in order for the layout to function properly in ie8.

## Thank You

Thank you very much for purchasing the Porto Responsive Drupal 7 theme. Once again if you have any issues or feedback please connect via the ThemeForest author page. Enjoy using Porto!

© 2014 Refaktor.