Rive.

• created: 03/13/2013
• latest update: 09/23/2013
• by: Cohhe

Thank you so much for purchasing this theme. I will be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

The newer method using your Wordpress Admin panel:

1. Download the ZIP package from Themeforest and Unzip it.
2. Within the unzipped folder you will see a folder named Rive_Theme - this is the Theme itself.
3. Zip it's content into Rive.zip.
4. Log into your Wordpress Dashboard and click on Appearance > Themes.
5. Next click on Install Themes then click on Upload.
6. Click Browse then locate the file named Rive.zip and click Install Now.
7. After the theme has installed click on Activate Theme and you are all set! Rive is now installed!
8. If you prefer to manually upload the theme through FTP you can simply copy the Rive_Theme folder from the downloaded ZIP package into your themes folder.

Updating is exactly like installing except you are using newer files. So once you have the newest version from your downloads on themeforest, unzip that main folder you just downloaded and inside you'll have the documentation, license etc. There will also be "Rive_Theme.zip".

You can use the wordpress admin to upload and install that zip file or unzip the file and upload via FTP right on top of the old theme files.

Before importing demo data you need to install The Events Calendar and Contact Form 7 plugins to prevent errors.

IMPORTANT: It will be much easier to understand how this theme works if you will import demo content as an example data in your wordpress. You can play around with this data and get idea how to get each feature working like on demo page.

1. Log into your Wordpress Dashboard and click on Tools > Import.
2. Next click on Wordpress.
3. Next choose a file from your computer and click on Upload file and Import.
4. If you also want to import demo images then check Download and import file attachments checkbox.
5. Next click on Submit.
6. After data is imported go to Appearance > Menus.
7. Then assign "Primary menu" menu to the "Primary menu" and "Our Partners" for "Bottom Menu". (see image below)
8. Next go to Administration > Settings > Reading panel
9. Set Front page displays: to a static page and choose the Home page for Front page.
10. Save changes

"Primary menu" is used for top toolbar menu and "Bottom Menu" for 'Our Partners' section at the bottom of page.

To add home page content slider you will need to add posts category which you want to use for slider, add posts in that category then in Theme Options page choose slider settings (category which to use and slider title) and last you will need to set template as 'With content slider' for page you want to add your slider.

1. Log into your Wordpress Dashboard and click on Appearance > Theme Options > Content slider.
2. Set all your desired slider settings and save changes.
3. Go to page you want to add slider.
4. As a template choose With content slider and save changes (see image below).
5. Add posts to your slider category you choose in Theme Options page .

Text and title of each post will be shown on slider as a cool scrolling text

To add home page tiled header you will need to create parent page for causes, add causes under that parent page and then in Theme Options page choose tiled header settings (parent page id from which to collect item or enter list of specific ids) and last you will need to set template as 'With Tiled Header' for page you want to add your tiled header.

1. Log into your Wordpress Dashboard and click on Appearance > Theme Options > Tiled Header Settings.
2. Set all your desired settings and save changes.
3. Go to page you want to add tiled header.
4. As a template choose With Tiled Header and save changes (see image below).
5. Add causes based in settings you choose in Theme Options page.

Title of each cause will be shown on item

1. Log into your Wordpress Dashboard and click on Appearance > Menus.
2. Add image for menu item by clicking on Select Image button.
3. Select your previously uploaded image from media popup window (see image below).
4. After you have set images for each menu item click Save Menu.

1. When you have added gallery shortcode add additional parameter link="custom_url". So that your shortcode looks something like this [gallery size="gallery-large" type="standard-gallery" include="COMMA_SEPARATED_LIST_OF_IMAGE_IDS" orberby="menu_order" link="custom_url" order="DESC" columns="3"]
2. Go to Media > Library.
3. Click on Edit for image you want to add custom link.
4. Set custom link by adding it to Custom Link field (see image below).
5. Click on Update Media.

Important! Keep in mind that you can only add links to standard gallery images

This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with an class of "white-bg". The sidebar's (column #2) content is within a div with an class of "sidebar-right" or "sidebar-left". The general template structure is the same throughout the template. Here is the general structure.

.content .white-bg p {
    color: #someColor;
} 

.content .white-bg .one_half p {
    color: #someColor;
}

I'm using multiple CSS files in this theme. The first one is a bootstrap framework file (bootstrap.css). Bootstrap is a Sleek, intuitive, and powerful front-end framework for faster and easier web development. It contains all the basif stuff that is neede for faster development, like buttons css, tables styling etc.

/* Structure */
some code

/* Header */
some code

/* Sidebar */
some code

/* Footer */
some code

etc, etc. 

.slider-container .featured-slides .featured-slide-text-container {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);   /* IE6 & 7 */
    zoom: 1;
}

I've included four psds with this theme:

1. The main layout
2. Blog layout
3. Causes layout
4. Events layout
5. Staff layout

This theme comes with a very powerful options panel. After the theme is installed you can access the options panel by logging into the Wordpress dashboard and clicking Appearance > Theme Options. All options are extremely self explanitory.

In Payment gateway section you can configure PayPal settings which will be used for donations. Paypal email, Thank you page ID, Currency code and Currency symbol are required! Without these settings donation page will not work.

1. Currency code - Select one of available currency codes.
2. Currency symbol - Select one of available currency signs.
3. Thank you page ID - Please enter the page ID to which user will be redirected after successfull donation.
4. Payment gateway - Select "PayPal" as payment gateway.
5. Paypal email - Paypal business email which will receive donations.
6. Paypal page logo - Upload a custom logo for your paypal donation page.

In Payment gateway section you can configure Authorize.net settings which will be used for donations. API Login ID, Transaction key, Thank you page ID, Currency code and Currency symbol are required! Without these settings donation page will not work.

1. Currency code - Select one of available currency codes.
2. Currency symbol - Select one of available currency signs.
3. Thank you page ID - Please enter the page ID to which user will be redirected after successfull donation.
4. Payment gateway - Select "Authorize.net" as payment gateway.
5. API Login ID - Login ID you can get from your authorize.net account. More information here
6. Transaction key - This key you can get from your authorize.net account. More information here

In Tiled header Settings section you can configure home page tiled header.

1. Select projects from... - You have two options, either to select all projects from parent page or select projects based on exact id's.
2. Project ID's - Specify one or more ID's separated by ';'. Example: 123;456;543;211
3. Hover effect - Tiled header image hover effect. (normal, linear, ease, ease-in)
4. Hover effect slide speed - Enter the desired amount of time in which hover effect should complete itself (in milliseconds).

In Content Slider Settings section you can configure home page content slider.

1. Slider Title - Enter the desired slider title.

In General Settings section you can set most used settings.

1. Website Logo - Upload a custom logo for your Website.
2. Default Layout - Select a layout style. (full, left side sidebar, right side sidebar)
3. Login Screen Logo - Upload a custom WP login screen logo.
4. Favicon - Upload an image to use as your favicon.
5. Disable Breadcrumbs - Breadcrumbs are displayed by default.
6. Breadcrumb Delimiter - This is the symbol that will appear in between your breadcrumbs.
7. Tracking Code - Google Analytics tracking code.

In CSS Settings section you can add custom CSS.

In Javascript Settings section you can add Google Maps API Key (v2 or v3), which later will be used for Google Maps widget.

In Typography section you can configure font size, line height for the fonts.

You can choose for different font types, set font style and font color.

Please keep in mind that CSS3 fonts and Google fonts use a technique which is not supported in IE7/8.

In Footer section you can select the number of columns you would like to display in the footer.

In 404 page section you can set the page title and message that is displayed on the 404 Error Page.

Log into the Wordpress dashboard and click Appearance > Theme Options. Please select Twitter widget settings and add required API keys. You can get those API keys on https://dev.twitter.com/apps.

1. Log into https://dev.twitter.com/apps using your twitter access credentials
2. Click on "Create a new application" and fill all the required details
3. You are not done yet, please click on "Create my access token" to get the rest of API keys
4. Now you should see all your API keys that is required for your twitter widget. See screenshot below.

This theme's menus are controlled through Wordpress Menus. You can access the Menu control panel by clicking Appearance > Menus.

This theme allows for an unlimited amount of sidebars. You can create new sidebars by clicking Appearance > Sidebars.

1. Log into your Wordpress dashboard and click on Appearance > Manage Sidebars.
2. Click on Add New Sidebar and give your new sidebar a name.
3. Now that you have created your new sidebar, you can access this sidebar on the Widgets page. Click on Appearance > Widgets.
4. Scroll down and you will see your new sidebar on the right hand side on the bottom of the list.
5. Drag and drop widgets into the sidebar just as you normally would. Once you are finished you will now need to assign the sidebar to the page of your choice.
6. Click on Pages and edit the page you wish to modify.
7. Once on the page editing screen, scroll down and you will see a new box named Sidebars.
8. Select the sidebar you wish to display from the dropdown list and save your page. You are now completed!

For a full list of shortcodes and example usages, see the theme's demo shortcode section.

1. Log into your Wordpress Dashboard and click on Causes > Add New.
2. Enter how much money is needed to reach the goal in "How many donations are needed" box (see image below).
3. Enter title and text for your cause (see image below).
4. Set featured image for cause (see image below).

Now when you have created some causes you need to add [cause] shortcode to the page on which you want to display causes.

 

You have two options how to select causes, either to select all causes from parent page or select cause based on exact id.

 

In case you want to select specific cause and display it on page:

 

Add this example cause shortcode to a page: [cause post_id="1312"]. Where '1312' is cause id.

 

In case you want to select multiple causes and display them on page:

 

1. Order your causes so that you have multiple causes under parent page. (see image below)
2. Add this example cause shortcode to a page: [cause parent="3245"], where '3245' is your parent cause id. In this case on the page you added this shortcode you will see all causes which are put under this parent cause.

 

P.S. When you create parent page you really don't need to add anything to that page, it can be simple dummy page and it's just there so that you can add child pages and use it as selector.

 

1. Log into your Wordpress Dashboard and click on Staff > Add New.
2. Enter members position (see image below).
3. Enter title and text for your member (see image below).
4. Set featured image for your staff member (see image below).

1. Order your members so that you have multiple members under parent page. (see image below)
2. Add this example staff shortcode to a page: [staff parent="3245"], where '3245' is your parent staff id. In this case on the page you added this shortcode you will see all members which are put under this parent member.

For events to work you will need to install this plugin: The Events Calendar

Here is a screencast which explains how to customize your theme

A common complaint about the edit posts, pages, media, links, categories, tags and users pages is that there is no easy way to see the ID of the specific item. This plugin (Reveal IDs) will add a new column titled 'ID' that will display each items ID.

This theme is compatible with the falowing plugins:

1. Contact Form 7 - if you will want to use contact form, we recomend you tu use this plugin.
2. The Events Calendar - if you will want to add events like on demo page then you will need this plugin.
3. Recent Posts Plus - already integrated
4. WP-PageNavi - already integrated
5. WordPress Landing Pages - already integrated
6. Sidebar Generator - already integrated

I've used the following images, icons or other files as listed.

1. jQuery
2. jCarousel
3. jquery.tweet
4. Sixpack status - free icon pack
5. Superfish menu
6. Recent Posts Plus
7. WP-PageNavi
8. Sidebar Generator
9. The Events Calendar
10. The Entypo Pictogram Suite
11. Free Logo Maker
12. WordPress Landing Pages
13. Paul Robert Lloyd - social icons