Rise is a beautiful multi purpose one page parallax responsive template perfectly tailored for creative professionals or agencies. For theme support that cannot be found in this documentation, please visit our support forum.
Updated: 04/26/14
Author: Refaktor
Docs powered by: TOC
Original design by
codeblvck
There are two ways Rise 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 if you are new to Drupal or don't have any existing content you need to work with.
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!
Rise comes with a shell sub-theme called Rise_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 Rise_sub in the list of themes available. If you did the standalone install you can find the Rise_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 Rise_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 /Rise/templates folder into the /Rise_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/Rise_sub to configure the theme settings for the sub-theme. You also need to configure the block regions separately.
Below are the modules required to fully utilize the theme:
These are additional modules used in the demo but are not required:
Rise uses a custom menu module to create the "scroll to" style menu used on the front page. The module can be found inside the /modules folder in the download files and can be uploaded to /sites/all/modules. When activated, it creates an empty menu called Rise Menu which is the only menu this module will affect. When creating/editing a menu link in the Rise Menu, an option to enable the Scroll-To effect can be found at the top of the edit menu link page (see image below):
When that option is checked, a select menu appears with a list of all the blocks inside the "Front Content" region. Select the block you would like the menu item to link to and the module takes care of the rest. You can also create a standard menu item by not checking the "Enable Scroll-To" option which results in the standard options normally seen on the edit menu item page. The Rise Menu supports dropdowns as well so make sure to check the "show as expanded" box on all parent items with children to ensure the dropdown menu works correctly.
If you used the "theme only" option to install the theme on an existing install that already has content we recommend you use our Rise Custom Content module to create the additional content types, fields and Views needed to fully utilize the theme. You will find it in the /assets folder in 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 /modules folder into your install if you do not already have them. After you have all the modules simply upload and activate the Rise Custom Content module and the content types, fields and views will automatically be created.
Rise is a "One Page" style theme so the vast majority of your content should be found there. We've provided a lot of content types and templates for you to set up your front page how you want. Please refer to the "Content Types" portion of this documentation below for a detailed outline of all the different content types available, but for now we're going to briefly explain how to set up your front page.
If you want your Rise powered site to have a blog we have prepared a couple template files just for that purpose. Rise utilizes a content type called Blog Page, so if you don't already have that set up refer to the Content Types documentation below for how to set that up. Here are the steps you can take to create a blog page like the one seen on the Rise demo:
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Front Page About" to display the "About" content. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/about.txt file. This view will create a block called View: Front Page About that can be added to the "Front Content" region and linked to via the Rise Menu.
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Blog" to display the "About" content. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/blog.txt file. This view will create a block called View: Blog that can be added to the "content" region (see the "Blog" section of these docs for more instructions regarding the blog page).
This content type is used to create the page that displays the "Blog" view block. It uses no additional fields and is only used in coordination with the following template file: /templates/page/page--node--blog-page.tpl.php. To use this page as your blog page, simply create a node with this content type and you can use the block visibility settings on the Blog view block to only display that block on this node page.
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Front Page Clients" to display the "Clients" content. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/clients.txt file. This view will create a block called View: Front Page Clients that can be added to the "Front Content" region and linked to via the Rise Menu.
Note: if you plan on using the testimonials feature as well, import the testimonials view first as the default "Front Page Clients" view uses the Testimonials view inside it's footer.
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Intro Block" to display the "Intro" content. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/intro.txt file. This view will create a block called View: Front Page Clients that can be added to the "Front Content" region and linked to via the Rise Menu.
Special Instructions:
To display a simple slider of text captions as seen on the demo, the following markup can be used inside the Intro Content field:
<!-- intro text carousel --> <div class="intro-text-slider"> <ul class="slides"> <li><h5>SELF PROCLAIMED DIGITAL NINJA.</h5></li> <li><h5>MAKER OF BEAUTIFUL DIGITAL THINGS.</h5></li> <li><h5>COFFEE JUNKIE AND A NIGHT OWL.</h5></li> </ul> </div>
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses two views that display content from the Parallax content type but you can create as many instances of Parallax content as you like. We will outline each one individually:
Front Parallax Solutions:
The content for this Parallax block is some basic markup using three individual columns. Below is the markup used in this block:
<div class="dots"></div> <!-- first block --> <div class="four columns center pull-left"> <!-- main icon --> <div class="main-icon"> <i class="fa fa-expand"></i> </div> <!-- columns info --> <h4>RESPONSIVE DESIGN</h4> <p> Lorem ipsum dolor sit amet, adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor et, rhoncus sem. </p> </div> <!-- second block --> <div class="four columns center"> <!-- main icon --> <div class="main-icon"> <i class="fa fa-apple"></i> </div> <!-- columns info --> <h4>RETINA READY</h4> <p> Lorem ipsum dolor sit amet, adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor et, rhoncus sem. </p> </div> <!-- third block --> <div class="four columns center"> <!-- main icon --> <div class="main-icon"> <i class="fa fa-star-o"></i> </div> <!-- columns info --> <h4>WELL DOCUMENTED</h4> <p> Lorem ipsum dolor sit amet, adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor et, rhoncus sem. </p> </div> <!-- end four columns -->
This particular demo View can be imported using the code from the /assets/views/front-parallax.txt file.
Blog Parallax:
This particular demo View can be imported using the code from the /assets/views/blog-parallax.txt file.
Special Instructions:
As noted the theme demo is using a taxonomy vocabulary called Parallax linked to the Parallax content type via a term reference field. You can create/manage taxonomy vocabularies via /admin/structure/taxonomy and these taxonomy terms can be used within Views to call specific nodes of Parallax content. Only one Parallax content node can be used per view so this taxonomy vocabulary is needed if you plan on having multiple Parallax view blocks.
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Front Page Testimonials" to display the content of the testimonials content type. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/testimonials.txt file.
Special Instructions:
As noted above in the "Clients" section, this view is displayed inside the footer of the Clients view to be a part of the Clients view block.
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Skills and Services" to display the content of the same name. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/skills.txt file. This view will create a block called View: Skills and Services that can be added to the "Front Content" region and linked to via the Rise Menu.
Note: Before you can use the Twitter widget you will need the necessary authentication keys. 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 corresponding content type fields.
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Front Page Twitter" to display the Twitter feed content. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/twitter.txt file. This view will create a block called View: Front Page Twitter that can be added to the "Front Content" region and linked to via the Rise Menu.
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Portfolio" to display the content of the same name. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/portfolio.txt file. This view will create a block called View: Portfolio that can be added to the "Front Content" region and linked to via the Rise Menu.
Portfolio Filters:
The Portfolio Block view 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 block called Portfolio Filters that should be added to the header of the Portfolio view. If you don't already have this view you can use the code /assets/views/portfolio-filters.txt to import this view block.
Template files:
This content type can be used to create a block like the one pictured above. It uses the following fields:
Fields:
Template files:
Views:
The demo uses a view called "Front Page Contact" to display the custom contact block. If you are working off a fresh install and did not use the Rise Custom Content module you can manually import the view using the code from the /assets/views/contact.txt file. This view will create a block called View: Front Page Contact that can be added to the "Front Content" region and linked to via the Rise Menu.
There are several blocks seen on the demo that are just some simple HTML markup that didn't really warrant a dedicated content type and node templates. We will outline each of those for you here and provide some sample markup you can use in your blocks to replicate what you see. Keep in mind you will want to use the full HTML text filter when using any of this markup.
<div class="grey"> <!-- stat section heading --> <section class="row heading"> <h3 class="s-bold">SOME RANDOM FACTS FOR FUN</h3> </section> <!-- animating statistics --> <section class="row center bigtoppadding"> <div class="three columns"> <!-- add stat number to data-perc --> <div class="stat-counter" data-perc="703"> <span class="count"></span> <h5 class="stat-title">ITEMS SOLD</h5> </div> </div> <!-- END three COLUMNS --> <div class="three columns"> <!-- add stat number to data-perc --> <div class="stat-counter" data-perc="32"> <span class="count"></span> <h5 class="stat-title">SATISFIED CLIENTS</h5> </div> </div> <!-- END three COLUMNS --> <div class="three columns"> <!-- add stat number to data-perc --> <div class="stat-counter" data-perc="130"> <span class="count"></span> <h5 class="stat-title">PROJECTS COMPLETED</h5> </div> </div> <!-- END three COLUMNS --> <div class="three columns"> <!-- add stat number to data-perc --> <div class="stat-counter" data-perc="472"> <span class="count"></span> <h5 class="stat-title">PICTURES TAKEN</h5> </div> </div> <!-- END three COLUMNS --> </section> </div>
<div id="method"> <div class="white"> <!-- section heading --> <section class="row heading"> <h3>MY WORK METHOD</h3> <h2>DESIGN SHOULD NEVER SAY LOOK AT ME <br> IT SHOULD SAY LOOK AT THIS </h2> </section> <section class="row bigtoppadding"> <!-- method divided into two six containers --> <div class="six columns"> <!-- method 1 --> <div class="method-field"> <div class="two columns"> <span class="method-number">01</span> </div> <!-- method detail --> <div class="ten columns method-detail"> <h5>DISCUSS IDEAS</h5> <p> At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the �bad conscience�: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. </p> </div> </div> <!-- method 2 --> <div class="method-field"> <div class="two columns"> <span class="method-number">02</span> </div> <!-- method detail --> <div class="ten columns method-detail"> <h5>DISCUSS IDEAS</h5> <p> At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the �bad conscience�: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. </p> </div> </div> <!-- method 3 --> <div class="method-field"> <div class="two columns"> <span class="method-number">03</span> </div> <!-- method detail --> <div class="ten columns method-detail"> <h5>DISCUSS IDEAS</h5> <p> At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the �bad conscience�: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. </p> </div> </div> <!-- method 4 --> <div class="method-field"> <div class="two columns"> <span class="method-number">04</span> </div> <!-- method detail --> <div class="ten columns method-detail"> <h5>DISCUSS IDEAS</h5> <p> At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the �bad conscience�: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. </p> </div> </div> <!-- method 5 --> <div class="method-field"> <div class="two columns"> <span class="method-number">05</span> </div> <!-- method detail --> <div class="ten columns method-detail"> <h5>DISCUSS IDEAS</h5> <p> At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the �bad conscience�: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. </p> </div> </div> </div> </section> </div> </div>
<div class="grey"> <section class="row"> <!-- left side --> <div class="six columns"> <h2 class="light">INTRINSIC VIDEO <span class="s-bold">EMBEDDING</span></h2> <p class="smallbottompadding"> At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the �bad conscience�: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. </p> </div> <!-- right side --> <div class="six columns"> <!-- always embed video as below --> <article class="vimeo video"> <iframe src="http://player.vimeo.com/video/55068714"> </iframe> </article> </div> </section> </div>
<!-- section heading --> <section class="row heading"> <h4>COME FIND ME</h4> <h5 class="eight columns centered grey-text">I am usually cooking something up at one of these social networks. Lets be friends.</h5> </section> <!-- social media icons --> <section class="row"> <ul class="ring-list"> <!-- link to phone info modal --> <li class="fade"> <a href="#" class="switch" gumby-trigger="#phone-info"><i class="fa fa-phone"></i></a></li> <!-- add social media links here --> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-github"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </section> <!-- copyright --> <section class="row copyright"> <p class="grey-text"> © Rise Template 2014. All rights reserved<br> Template by Refaktor. </p> </section>
The Rise theme settings can be accessed via /admin/appearance/settings/ and then clicking on the name of your active theme. There are four sections, including the standard Drupal settings. Go through each tab and configure the settings to your liking.
Rise features 10 block regions where you can add your blocks. 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.
Thank you very much for purchasing the Rise Responsive Drupal 7 theme. Once again if you have any issues or feedback please connect via the ThemeForest author page. Enjoy using Rise!
© 2014 Refaktor.