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.

Updated: 10/04/15
Author: Refaktor
Docs powered by: TOC
Original design by Okler

Porto 2.X vs 3.X

There are some minor differences between 2.x and the latest 3.x version of the theme. If you plan on updating it is advised to do so in a local or testing environment first, or at the very least back up your existing theme folder in case you wish to revert.

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

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

NivoSlider

Theme Modules

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.

Drupal Commerce

Porto now includes styles, views and template support for the Drupal Commerce eCommerce module. In these docs we will go over the Product Display content type and the corresponding views we have utilized in the demo to display products. Drupal Commerce is a complex module, so for additional documentation and information about addon modules please visit https://drupalcommerce.org/.

All modules utilized in the demo are included in the modules.zip file in the download files. For basic Commerce configuration visit /admin/commerce where you can manage customer profiles and orders, manage products and product types, and set other configuration options.

Product Display



Porto utilizes a content type called Product Display to create and display product information. It includes a Product Reference field which is the link between the node and the actual product within Commerce.

Fields:

Template files

Important: Any product fields that are intended to function as attribute selection fields on Add to Cart forms need to be configured to do so. When editing that field, scroll down to the ATTRIBUTE FIELD SETTINGS option and enable the option. For example, if you have several variations of a "Hat" product (red, blue, green) and you want the customer to be able to select the color they want when adding the item to the cart, the Color field would need to be configured in this way.


Creating products using "Product Display"

As described earlier in the documentation, Porto uses a content type called Product Display which acts as a bridge between Drupal and Commerce products. The "Product Reference" field allows you to create your product(s) at the same time of the node creation. Below is a step by step guide for using this content type to create a Drupal Commerce product node in Contour:

Views

Porto utilizes several views to display products. There is a main "shop" view which displays all available products as well as a "Related Products" and "Top Rated" which display products related to the current product being viewed and the top rated products via the Fivestar ratings field. Finally there is a simple "Header Cart" view which will display the number of items in the cart and the cart total. It is intended to be placed in the header but it would work in any region.

The export code /assets/views-exports/shop.txt and /assets/views-exports/header-cart.txt(in the root of the folder you downloaded from ThemeForest) can be used to create the shop views.

Note: Two of the shop views utilize a new custom display plugin option in the Porto Views module. If you are upgrading from a 2.x installation update your existing version with the latest found inside the modules.zip file in the download files.

Custom Content Types

Portfolio



Fields:

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

This is the four column version of the standard Portfolio style which utilizes the "Porto Portfolio" 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/porto-portfolio.txt to import this View. Then simply place the "View: Porto Portfolio: Portfolio 4 Columns" block in the block region and configure the block visibility settings to your liking.

Portfolio Full Width - Example: http://refaktorthemes.com/porto/portfolio-full-width

This is the portfolio fullwidth layout which utilizes the "Porto Portfolio" 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/porto-portfolio.txt to import this View. Then simply place the "View: Porto Portfolio: Portfolio Full Width" block in the block region and configure the block visibility settings to your liking.

Portfolio Lightbox Block - Example: http://refaktorthemes.com/porto/portfolio-lightbox

This is the lightbox portfolio layout which utilizes the "Porto Portfolio" 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/porto-portfolio.txt to import this View. Then simply place the "View: Porto Portfolio: Portfolio Lightbox" block in the block region and configure the block visibility settings to your liking.

Portfolio Timeline - Example: http://refaktorthemes.com/porto/portfolio-timeline

This is the portfolio timeline layout which utilizes the "Porto Portfolio" 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/porto-portfolio.txt to import this View. Then simply place the "View: Porto Portfolio: Portfolio TImeline" block in the block region and configure the block visibility settings to your liking.

Template files

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/porto-portfolio.txt to import this View. Then simply place the "View: Porto Portfolio: Related Projects" in the Content region and configure the block visibility settings to your liking.

Template files

Portfolio Filters:

The Portfolio view (Timeline excluded) 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 Porto Taxonomy 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/porto-taxonomy.txt to import as a View for placement in the View header of the Portfolio view.

Template files

Team

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



Fields:

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/porto-team.txt to import this View. Then simply place the "View: Porto Team: Team Main" in the Content region and configure the block visibility settings to your liking.

Template files

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 Porto Taxonomy 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/porto-taxonomy.txt to import as a View for placement in the View header of the Team view.

Template files

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:

Template files

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:

Template files

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:

Template files

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:

Template files

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:

Template files

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

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

Our History



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

Fields:

Template files

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:

Template files

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:

Template files

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/porto-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 visit admin/config/people/accounts/fields and create a long text field called Author Bio (machine name field_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:

Toggle

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

<div class="toggle toggle-primary" data-plugin-toggle="">
  <section class="toggle active">
    <label>Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content" style="display: block;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
    </div>
  </section>
  <section class="toggle active">
    <label>Curabitur eget leo at imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content" style="display: block;">
      <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor.</p>
    </div>
  </section>
  <section class="toggle">
    <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 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.</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.