Overview

Contour is a unique, modern and multipurpose Drupal 7 theme perfect for creative single portfolios, agencies, studios and even eCommerce. 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: 06/25/13
Author: Refaktor
Docs powered by: TOC
Original design by Hasan Ali

Installation

There are several ways Contour 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 Drupal_7 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 Contour, 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 Drupal_7 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.

Contour Sub-Theme

Contour comes with a shell sub-theme called Contour_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 Contour_sub in the list of themes available. If you did the standalone install you can find the Contour_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 Contour_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 /Contour/templates folder into the /contour_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/contour_sub to configure the theme settings for the sub-theme. You also need to configure the block regions separately.

Menu

Contour has a block region called Header Menu Left 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.

Dropdown Menus

In order for the dropdown menus to function properly on touch devices the parent level menu items need to be dummy hashtag links. For example if your site is welovecats.com then all of your parent level menu items with child links need to use the url http://welovecats.com/#

Modules

You can find all of the modules used in the demo in the 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

Project Planner

Shop

Notes

Contact

Contour 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 Contour Content Data module to create the additional content types, fields and Views needed to fully utilize the theme. You will find it in the root of the directory that contains the download files. This module is a custom Features module and will not run without it. We recommend copying all of the modules from the /drupal_7/sites/all/modules folder into your install if you do not already have them. After you have all the modules simply upload and activate the Contour Content Data module and the content types, fields and Views will automatically be created.

Content Types

Contour utilizes several different custom content types that all have their own custom theme template files that are used to achieve various layouts and styles. If you are not working off of the full demo install please use the Contour Content Data plugin referenced above to automatically generate all these content types and their fields. We will also go over each of the content types as well as their fields and corresponding template files below:

Flexslider

This content type is used to manage the slides that are used in a Flexslider view block (like the one used on the front page of the demo).



Fields:

Template files:

Portfolio

This content type is used to manage the portfolio items used in the various Portfolio template styles Contour offers. All the styles are managed by this single content type and below is the list of fields and corresponding template files used by this content type:



Fields:

Template files:

Product Display

This content type is used display Drupal Commerce products as node content.



Fields:

Template files:

Testimonials

This content type is used to create the testimonial items used in the Testimonials view block (like the one used on the front page of the demo).



Fields:

Template files:

Theme Settings

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

Pages and Headings

Contour does not require any custom fields for the Basic Page content type, but the theme demo does utilize custom heading blocks on each page. The blocks are configured to only be shown on their respective pages using the block visibility settings. Heading blocks are best used in the "Before Content No Wrapper" block region. Below is an example of the markup used in a Contour page heading block:

<div class="container container-color bigpadding top-grey">
	<section class="row">
	<h6 class="text-color-alt largefont bold">WE ARE CONTOUR</h6>
	</section>
	<section class="row">
	<h2 class="bold text-color">BUILDING BRANDS SINCE 1999.</h2>
	</section>
	<section class="row">
	<h6 class="text-color smallfont bold">WE CREATE OUT OF THIS WORLD EXPERIENCES FOR OUT OF THIS WORLD BRANDS AND ACTIVATE THEM ACROSS ALL DIGITAL MEDIA.</h6>
	</section>
</div>

Portfolio

Contour includes six main portfolio styles (as well as two extra block styles)that can be used to display the portfolio content on your site. Each is powered by a Views block and we will outline each one as well as the two single item styles.

Portfolio (Main) - Example: http://refaktorthemes.com/contour/portfolio

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-page.txt to import this View. Then simply place the "View: Portfolio Block Page" in the Content region and configure the block visibility settings to your liking.

Portfolio Two - Example: http://refaktorthemes.com/contour/portfolio-two

This is the second standard Portfolio style which utilizes the "Portfolio Two" 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-two.txt to import this View. Then simply place the "View: Portfolio Two" in the Content region and configure the block visibility settings to your liking.

Portfolio Three - Example: http://refaktorthemes.com/contour/portfolio-three

This is the third standard Portfolio style which utilizes the "Portfolio Three" 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-three.txt to import this View. Then simply place the "View: Portfolio Three" in the Content region and configure the block visibility settings to your liking.

Portfolio Mason - Example: http://refaktorthemes.com/contour/portfolio-mason

This is the mason Portfolio style which utilizes the "Portfolio Mason" 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-mason.txt to import this View. Then simply place the "View: Portfolio Mason" in the Content region and configure the block visibility settings to your liking.

Portfolio Mason Two - Example: http://refaktorthemes.com/contour/portfolio-mason-two

This is the mason Portfolio style which utilizes the "Portfolio Mason Two" 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-mason-two.txt to import this View. Then simply place the "View: Portfolio Mason Two" in the Content region and configure the block visibility settings to your liking.

Portfolio Mason Three - Example: http://refaktorthemes.com/contour/portfolio-mason-three

This is the mason Portfolio style which utilizes the "Portfolio Mason Three" 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-mason-three.txt to import this View. Then simply place the "View: Portfolio Mason Three" in the Content region and configure the block visibility settings to your liking.

Portfolio (block) - Example: http://refaktorthemes.com/contour/

This is a View that displays the four latest standard portfolio items in a block (see the front page of the demo for an example). 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.

Note: to edit the default heading text for this block edit /templates/views/views-view--portfolio-block.tpl.php

More Projects - Example: http://refaktorthemes.com/contour/portfolio/19/

This is a View that displays the three latest standard portfolio items in a block (see the bottom of the Item Basic page on the demo). If you are not using the full demo or did not use the Custom Content module you can use the code in /views_exports/more-projects.txt to import this View. Then simply place the "View: More Projects" in the Content region and configure the block visibility settings to your liking.

Portfolio Item: Basic - Example: http://refaktorthemes.com/contour/portfolio/19/

This is the default style for the single Portfolio nodes. It displays the Portfolio Slider to the left of the content, and below is an example of the node content used for the demo portfolio items:

<h5 class="text-color grey">PROJECT SOLUTION</h5>
<p class="midpadding">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. <br><br>
	Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
</p>
<!-- specifics -->
<h5 class="text-color grey smalltopmargin">SERVICES OFFERED</h5>
<ul class="midtoppadding">
	<li class="text-color"><i class="icon-plus"></i><span class="greytext">Identity &amp; Branding</span></li>
	<li class="text-color"><i class="icon-plus"></i><span class="greytext">Web Design</span></li>
	<li class="text-color"><i class="icon-plus"></i><span class="greytext">Web Development</span></li>
</ul>
<!-- button -->
<div class="medium color-button btn fifty">
	<a href="#">LAUNCH WEBSITE</a>
</div>

Portfolio Item: Wide - Example: http://refaktorthemes.com/contour/portfolio/16/

This is the wide style for the single Portfolio nodes. It displays the Portfolio Slider to the left of the content, and below is an example of the node content used for the demo portfolio items:

<div class="container folio container-color bigpadding">
	<section class="row">
	<!-- first section -->
	<div class="four columns">
		<h5 class="text-color grey">PROJECT BRIEF</h5>
		<p class="midpadding">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
		</p>
	</div>
	<!-- second section -->
	<div class="four columns">
		<h5 class="text-color grey">THE SOLUTION</h5>
		<p class="midpadding">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. <br/><br/>
			Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
		</p>
	</div>
	<!-- third section -->
	<div class="four columns">
		<h5 class="text-color grey">SERVICES OFFERED</h5>
		<ul class="midtoppadding">
			<li class="text-color"><i class="icon-plus"></i> Identity &amp; Branding</li>
			<li class="text-color"><i class="icon-plus"></i> Web Design</li>
			<li class="text-color"><i class="icon-plus"></i> Web Development</li>
		</ul>
		<!-- button -->
		<div class="medium primary btn eight columns">
			<a href="#">Launch Website</a>
		</div>
	</div>
	</section>
</div>

Note:

back up /templates/node/node--portfolio.tpl.php and then duplicate /templates/node/node--portfolio-wide.tpl.php and rename it /templates/node/node--portfolio.tpl.php if you wish to use this as your Portfolio node style.

Portfolio Filters:

The Mason portfolio pages seen on the demo include 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 Mason views.

Notes (posts)

If you would like to use Article (recommended) or Blog posts on your site Contour comes equipped with several templates that modify the look and feel of the posts list and single items. The default post page on the demo can be seen here, a single post can be seen here and an alternate list format can be seen here. There are no extra content types or custom fields that you need to set up and we will cover each template below:

Default Notes View

The default page seen on the demo here is a View page of the Article content type. You can either use the Contour Content Data module to create the view or you can use the export code found in /views_exports/notes.txt. The following theme file(s) are associated with this template:

Note List View

The Note List is an alternative template for displaying a list of your posts and is also a View page of the Article content type. You can either use the Contour Content Data module to create the view or you can use the export code found in /views_exports/note-list.txt. The following theme files are associated with this template:

Note Single

The Note Single is simply the layout of a single post of the Article or Blog content type on your site (we recommend using Article). The following theme files are associated with this template:

Commerce (Shop)

Contour supports the Drupal Commerce module, a powerful eCommerce framework for building online stores. Drupal Commerce has a complete set of documentation which we highly recommend reading if you have never used DC before. We will go over some of the basics and highlight the aspects of the theme that enhance DC and how you can use them on your site. If you do plan on using Drupal Commerce with your install of Contour we also highly recommend you install the full demo content as it will provide you a completely functional configuration of Drupal Commerce to begin working with.

Product Types

When the Commerce module is activated you can visit /admin/commerce to begin configuring Drupal Commerce. We will not be going over every options page, but we will outline the creation of Product Types and explain how that relates to the "Product Display" content type. Visit /admin/commerce/products/types to begin creating your own Product Types. Below is an example of what the fields look like on a Contour demo product type:



Product Types have some default fields like SKU which are required for Commerce products to function correctly, but you can create as many additional fields as you need for your products.

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 Content Types section of the documentation, Contour 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:

Product Search

If you visit the demo Shop page you will see various options in the left sidebar for narrowing down the products that are shown. This is called faceted search and is a very powerful way to handle stores with a lot of different products. To fully utilize faceted search with Drupal Commerce, the following modules are required:

Visit /admin/config/search/search_api to begin the process of configuring Commerce to utilize the Search API. Two elements are needed: the search server and the search index. The search server can be enabled and configured with the default options already provided. The real configuration happens with the search index.

Note: before proceeding with the setup of your search index, visit /admin/config/system/cron and manually run cron to ensure your products will be available for searching.

Visit /admin/config/search/search_api/add_index to add your index. Give your search index a name you can identify later on as this search index will actually be used in a View to create the actual store page itself. For the "item type" option select Node from the dropdown menu as you will be searching from the Product Display nodes. Under "server" select the search sever you just created before (likely called "default" if you used the default server). After you are done press "Create Index"

When you click on the name of your search index while on the /admin/config/search/search_api page you will be able to configure all the various options available. If you click on the Fields tab you will be able to select the fields that will be made available to search. If you are working off your own custom Product Types the fields you will want to enable will likely be different from the ones we enabled for the demo content, but here is the list of nodes that have been selected for the Demo store as a reference:

The facets tab is the other important section to configure. There you can select the different facet search blocks that you will make available on your store page. Each facet has a set of options that you can configure to your liking. These facets show up as block regions so you can add them to the sidebar region or wherever you choose to display them. Keep in mind these facet search blocks will only display on a View page displaying the search index content. Once you have set up your search index you are ready for the final step which is the creation of your store View page.

Creating a "Shop" page.

The key to making everything tie together is the View page which uses the search index to display the products. This is done by creating a View like you would any other View, but by selecting your search index from the "Show" select menu during the initial view creation. This View is an unformatted list of the rendered entity, and no other special configurations are needed. The following template files are associated with Contour's demo shop page:

Note: if you use a different URL alias for your store page you will need to carry out the following steps:

Shop Header Block

The demo store page uses a custom header block to handle the display of the necessary store links. The following markup is used in a block inside the Header Branding Right region and set to only display on the store related pages:

<?php global $user, $base_url; ?>
<ul id="header-links">
	<li><?php $block = module_invoke('views', 'block_view', 'header_cart_block-block_1'); print render($block['content']); ?> </li>
	<li><a href="<?php echo $base_url; ?>/cart"><i class="icon-shopping-cart right"></i></a></li>
	<?php if (!$user->uid): ?>
	<li class="text"><a href="<?php echo $base_url; ?>/user/register" title="Sign-up">Sign-up</a></li>
	<li class="text"><a href="<?php echo $base_url; ?>/user" title="Login">Login</a></li>
	<?php endif; ?>
	<?php if ($user->uid): ?>
	<li class="text"><a href="<?php echo $base_url; ?>/user" title="Login">My Account</a></li>
	<?php endif; ?>
  <li class="text"><a href="<?php echo $base_url; ?>/wishlist" title="Wishlist">Wishlist</a></li>
</ul>

Wishlist

To make use of the Wishlist functionality that can be seen on the Contour demo you will need to install the Flag module. Once you do visit /admin/structure/flags/import to import the following code: 

$flags = array();
// Exported flag: "Shop Wishlist".
$flags['shop'] = array(
  'content_type' => 'node',
  'title' => 'Shop Wishlist',
  'global' => '0',
  'types' => array(
    0 => 'product_display',
  ),
  'flag_short' => 'Add to Wishlist',
  'flag_long' => '',
  'flag_message' => '',
  'unflag_short' => 'Remove from Wishlist',
  'unflag_long' => '',
  'unflag_message' => '',
  'unflag_denied_text' => '',
  'link_type' => 'toggle',
  'roles' => array(
    'flag' => array(
      0 => '1',
      1 => '2',
    ),
    'unflag' => array(
      0 => '1',
      1 => '2',
    ),
  ),
  'weight' => 0,
  'show_on_form' => 0,
  'access_author' => '',
  'show_on_page' => 0,
  'show_on_teaser' => 0,
  'show_contextual_link' => 0,
  'i18n' => 0,
  'api_version' => 2,
);
return $flags;

Then if you don't already have it you can use the code in /views_exports/wishlist-block.txt to create a View to display a block of the Wishlist items.

Project Planner

The Project Planner uses a Webform module block called inside of the node content of a basic page. Once the module has been installed you can visit /node/add and add a new Webform. Once you have added all the fields you want in your form, click the "Webform" tab and then "Form Settings". Scroll down to the Advanced Setting panel and check off the "Available as Block" option.

Use the example markup in /examples/planner.php in a basic page content node. You will notice that the block region is called manually with PHP. To get the correct value for the Webform block you just created visit /admin/structure/block/ and click the Configure link on your Webform block. In the URL in your browser part of the URL will be client-block-X (x being a number). Replace the client-block-58 in the example code with whatever client-block-x is for your particular block.

Shortcodes

Padding Shortcodes:

Example:

<div class="midpadding"></div>

Margin Shortcodes:

Example:

<div class="midmargin"></div>

Text Styles:

Example:

<div class="blacktext"></div>

Color Scheme Shortcodes:

In addition to the shortcodes above we created a set of selectors that provide color based on the color scheme selected in the theme settings.

Example:

<div class="text-color"></div>

Block Regions

Contour features 17 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

Contour features four header regions: Header Branding Left, Header Branding Right, Header Menu Left and Header Menu Right. 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 in the top right hand corner of the demo you can use the following markup in a block:

<ul id="header-links">
<li><a href="#" title="Google +"><i class="icon-google-plus"></i></a></li>
<li><a href="#" title="Linked-in"><i class="icon-linkedin"></i></a></li>
<li><a href="#" title="Twitter"><i class="icon-twitter"></i></a></li>
<li><a href="#" title="Facebook"><i class="icon-facebook"></i></a></li>
</ul>

Content Block Regions

Contour has a total of 7 content block regions: Before Content No Wrapper, Before Content, Content, Sidebar Left, Sidebar Right, After Content and After Content No Wrapper. Like the Header regions described above these regions are fairly self explanatory. One thing to note is that the "No Wrapper" 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.

Footer Block Regions

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

Extras

Code Examples

We've included some code examples inside the /examples folder in the root of the theme with some markup used on several of the demo page templates. The full HTML version of the theme can also be found in the root of the download files (contour-html.zip). Inside you can find a ton of code examples for all the different page templates.

Twitter Widget

Before you can use the Twitter widget you need to configure the Twitter options in the theme settings (/admin/appearance/settings/contour). 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 the theme settings. Once you have those entered you can use the following markup in a Block (make sure to set the text filter to PHP code):

<h6 class="whitetext bold meta">CONTOUR ON TWITTER</h6>
<div class='tweet query midtoppadding'></div>
<script type="text/javascript">
                        
    jQuery(document).ready(function ($) {
      
      $(".tweet").tweet({
        modpath: '<?php global $theme_root; echo $theme_root;?>/includes/twitter/',
        username: "envato",
        avatar_size: 34,
        count: 3,
        loading_text: "loading tweets..."
      });
    
    });
    
  </script>

Thank You

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

© 2013 Refaktor.