1. Thank you for your Purchase!

Theme Details
  • Created: 16 June 2012
  • Authors: Christian Lundgren, Farid Hadi & Shu Miyao
  • Theme version: 1.8
  • Foundry Panel version: 1.1.7
Contact Details
Useful Information

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please visit our dedicated forum at support.udfrance.com. To access the forum you will need your Item Purchase Code.

Need help finding your item purchase code?

Click here. Keep in mind that for a quicker response please use the support forum.

2. Theme Installation

2.1 Uploading and Activating
  1. Make sure to have WordPress v. 3+ installed. If so move on to the next step. If you are new to WordPress and do not have wordpress installed, please click here.
  2. Unzip the downloaded folder from Themeforest and locate the folder labeled 'Voltage'. This is the folder that you should upload to your server.
  3. Connect to your web server using an FTP client and upload the 'Voltage' folder to 'wp-content/themes/'. If you do not have an FTP client consider using FileZilla.
  4. Now log into wordpress and and go to 'Appearance' and click the 'Activate' for 'Voltage'
2.2 Import Demo Data

figure 1

figure 2

figure 3

The demo xml file can be found in your download folder and is labeled: 'demo-content.xml'

  1. Click 'Tools' > 'Import' in the wordpress menu. ref. figure 1.
  2. Select Wordpress as your import option, which is last in the list. ref. figure 2.
  3. Once installed, click 'browse' and select the xml sample data file found in the 'Voltage' folder. ref. figure 3.
  4. Click 'Upload file and import' ref. figure 3.
  5. Once imported you will need to set up the menus and widgets.

3. Page Setup

3.1 Adding a Page

figure 1

figure 2

figure 3

  1. Click the 'Pages' > 'Add New' tab in the wordpress menu. ref. figure 1
  2. Start by filling in the title, thereafter the content.
  3. As needed, you can set the 'Page Attributes' such as order, template and whether its main menu item or sub menu item .ref. figure 2
  4. When you are ready, click Publish .ref. figure 3
3.2 Page Templates

This theme comes with three page templates. These are selected from the 'Page Attributes' section when creating a page. ref. figure 2. above. If you want to use a particular page template follow the steps in 3.1 and simply select the template that you require from the Template combobox.

Note: Each page template has unique settings and options which are described briefly below. Keep in mind to always save your settings once you have modified them. This is done by clicking the Update all the setting items above button that appears at the very end of the settings.

CONTACT TEMPLATE

Use this page template to set up your contact page. Selecting this template will add a contact form automatically.

FULL WIDTH TEMPLATE

Use this template to have no sidebar.

PORTFOLIO INDEX TEMPLATE

This template is used to create a portfolio index with a filter menu.

3.3 Page Options and Uploading images

Please refer to Portfolio setup

3.4 Homepage Slider
Note: Image size used in the demo are : 2100x504px

For the homepage slider video tutorial please click here. For shortcode slider video tutorial pleaseclick here

figure 1

  1. Click the 'Settings' > 'Reading'.
  2. Under Front page displays make sure that A static page (select below) is selected
  3. Choose your Front-Page from the select box, in this case Home
  4. Click Save Changes

figure 1

  1. Click the 'Upload/Insert' > 'From Computer' > 'Select Files'.
  2. Select all files you want to appear in the homepage slider and click Ok.
  3. Once you images have uploaded, go through each image one by one and click the show link in the left hand corner of each upload.
  4. Add your caption to the Description area.
  5. Chose the slide media type - image or video. If you select Vimeo or YouTube, simply paste the id. If you select FlowPlayer you need to paste the full url.
  6. Select caption style if you have entered a caption
  7. Select caption width. This will set the width of the caption container; Hence, allowing you to style the captions based on the image.
  8. Set slide background color. This is only necessary if you are using images that are relatively small. Enter background color using hex e.g. #ffffff for white

4. Sidebar & Widgets

Accessing the sidebar widgets is done by clicking Appearance > Widgets. Voltage uses three different right aligned sidebars and four footer widget areas

Sidebars:

  1. Blog Sidebar
  2. Page Sidebar
  3. Contact Page Sidebar

Footer Widget Areas:

  1. First Footer Widget Area
  2. Second Footer Widget Area
  3. Third Footer Widget Area
  4. Fourth Footer Widget Area

The theme support standard widgets as well as:

  1. Twitter Widget

    To activate the twitter widget simply trage the text widget to your prefered sidebar. Thereafter paste the twitter shortcode in the text area e.g.

    [tweets username="udfrance"]

  2. Featured Project Slider

    To activate the featured project slider simply drag it to your prefered sidebar and set the title.

    [slider id="335"]

  3. Google Map

    To activate the Google Map widget simply trage the text widget to your prefered sidebar. Thereafter paste the Google Map shortcode in the text area e.g.

    [map id="" lat="" long="" zoom="" width="" height="" info_title="" info_content=""]

5. Posts & Categories

Note For pages and posts with a sidebar the size is 680px*300px.

Full details on creating a post/writing can be found here.

5.1 Creating categories
  1. Click 'Post' > 'Categories' in the wordpress menu.
  2. Enter the 'Name' of your category.
  3. If this is a main category leave 'Parent' set to 'None'. If this is a sub category, then select the parent category from the combobox.
  4. Click 'Add New Category' and your category will appear on the right.
5.2 Creating a post
  1. Log in to your WordPress Administration Panel (Dashboard).
  2. Click the 'Posts' in the wordpress menu.
  3. Click the 'Add New' sub tab.
  4. Start by filling in the title, thereafter the post.
  5. As needed, select a category, add tags, and make other selections from the right hand menu.
  6. When you are ready, click Publish.

6. Folio Setup

Note For Full-width and Portfolio pages the image size is 960px*475px.

For the portfolio video tutorial please click here.

6.1 Adding a portfolio item

figure 1

figure 2

  1. Log in to your WordPress Administration Panel (Dashboard).
  2. Click the 'Voltage' in the wordpress menu. ref. figure 1
  3. Click the 'Portfolio' sub tab .ref. figure 1
  4. Click the 'Add new' button next to the Portfolio title ref. figure 2
6.2 Portfolio, Page and Post Options
  1. Display Title - we set our project title here if we want to use font variation in the title e.g.

    My <span>Project</span>

    If you do not want to use font variation you can simply enter the title in the normal title field.
  2. Teaser or Tagline - Use this space to introduce the project. Either use a simple tagline or teaser for a more comprehensive layout. You can use shortcodes to styles this area.
  3. Gallery Title(only portfolio) - If you want to show addtional images or videos in the form of a gallery then set the title here.
  4. Portfolio layout (or post/page layout) - Default or Video. The former allows you to display either one featured image with custom caption or a slider. The latter allows you to display a video in this area.
  5. Featured Project (only portfolio) - Whether project will be featured in the sidebar featured slider or not.
6.3 Uploading & Managing Photos
  1. Description - Add slide or featured image caption here
  2. Display In (only portfolio) - Select whether image should be displayed in slider or in gallery or in neither
  3. Media Type - Choose your media type Image, FlowPlayer, YouTube, or Vimeo
  4. Video URL - Fill this in only if the Media type has been set to anything but Image. For YouTube and Vimeo simply enter the video ID, for FlowPlayer add the full url to the video.
  5. Caption Style - If you have entered a caption then select the way this caption should be displayed
  6. Caption Width - Set the width of the caption to style it differently.
  7. Slider Background Color - Set a slide background color using hex value

Once you have set all options for all uploaded image selection which image should be the featured image, this is the image that will appear as a thumbnail in the portfolio index. ref. fig.1

figure 1

Note: Posts and Page options are the same except that they do not have a Gallery title option nor Featured project option.
6.4 Project Order

You can select whether projects should be ordered by date or simply by menu order. For the former the latest project will by default appear first.

By Date

Projects are organized by date of creation. You can, however, change the project order by simply modifying the project date. To do this, click Portfolios, thereafter click "Quick edit" and change the date of creation of the portflio item you want to reorganize

By Menu Order

If you have selected menu order you set order by change menu order number.

7. Foundry Panel Setup

For the Foundry Panel Video Overview click here.

Foundry Panel Settings
  1. Welcome
  2. General
    • General Settings
      • Header Info e.g. tel/e-mail
      • Scroll to top speed
    • Contact Form - Title and contact form messages
    • Social Networks - Social network icons and links
    • Footer Content - Copyright statement
    • SEO - Google analytics tracking code
  3. Appearance
    • Layout
      • Theme skin
      • Blog layout
      • Recent Posts on front-page
      • Recent Post title
      • Number of posts to display
      • Post Category Id - which category to pull posts from
    • Logos - Upload theme logos
    • Fonts - Theme fonts
    • Title & Link Colors
    • Slider - All slider options
    • Custom CSS - Css editor for custom styles
  4. Shortcode Settings
    • Google Map - Controls and Custom Marker

8. Shortcodes

Voltage contains a range of different shortcodes for quick and easy layout creation. All shortcodes used in Voltage can be found in the 'Shortcode' section of the demo.

Layout and Style Shortcodes
  1. Clear

    Constructed: [clear]
    Attributes Possible values
    n/a n/a
    Note: This shortcode is used to specify which sides of an element where other floating elements are not allowed.
  2. H Tag Variation

    Constructed: Your [span]Title[/span] Here
    Attributes Possible values
    n/a n/a
    Note:: This shortcode is usable for all content, widgets, and slide-in footer.
  3. Column shortcodes

    Constructed: [column_one_half] ...your content... [/column_one_half] [column_one_half_last] ...your content... [/column_one_half_last]
    Attributes Possible values
    none column_one_half, column_one_third, column_one_fourth, column_one_fifth, column_two_thirds
    Note: we add the suffix '_last' to the last column to remove its right margin, ensuring that the columns align nicely.
  4. Drop cap shortcodes

    Constructed: [drop_cap style="color:#ff6a28;"]...letter...[/drop cap]
    Attributes Possible values
    style custom style information (overrides default values)
  5. Blockquote shortcodes

    Constructed: [blockquote align="" text_align="" cite="" style=""]...quote...[/blockquote]
    Attributes Possible values
    align left or right
    text_align leave blank for default, or center
    cite text i.e. John Doe
    style custom style information (overrides default values)
  6. Button shortcodes

    Constructed: [button size="" url="" color="" style=""]Button Title[/button]
    Attributes Possible values
    url target url i.e. http://www.google.com
    size small, medium, large
    color gray, white, turquoise, yellow, orange or blank for default
    style custom style information (overrides default values)
  7. Highlight shortcodes

    Constructed: [highlight color="" highlight_type="" style=""]...your content...[/highlight]
    Attributes Possible values
    color gray, white, turquoise, yellow, orange or blank for default
    highlight_type bold or italic
    style custom style information (overrides default values)
  8. List shortcodes

    Constructed:

    [list list_style='' style='']
    <ul>
     <li>
      <span>...list content...  </span>
     </li>
    </ul>

    [/list]
    Attributes Possible values
    color darkGray, white, turquoise, yellow, orange or blank for default
    type Dot, Arrow1, Arrow2, Tick, Plus, Dash
    style custom style information (overrides default values)
    Note: List types are created as follows: type + color > darkGrayDot, turquoiseArrow1 etc. See demo for all examples
Media Shortcodes
  1. Image + Lightbox

    Constructed: [lightbox id="" width="" height="" thumbnail_url="" url="path" style=""]
    Attributes Possible values
    id thumb id
    width numeric value e.g. 200px
    height numeric value e.g. 200px
    thumbnail_url path to thumbnail
    url path to target image
    style custom style information (overrides default values)
  2. Video + Lightbox

    Constructed: [lightbox id=" width="" height="" thumbnail_url="" url="" media_type="video"]
    Attributes Possible values
    id thumb id
    width numeric value e.g. 200px
    height numeric value e.g. 200px
    thumbnail_url path to thumbnail
    url path to target video - youtube, vimeo or selfhosted
    style custom style information (overrides default values)
  3. Image + Captions

    Constructed: [image width="" height="" caption_width="" url="path" caption_style=""]caption content[/image]
    Attributes Possible values
    width numeric value e.g. 200px
    height numeric value e.g. 200px
    caption_width numeric value e.g. 200px
    url path to image
    caption_style impact, box, black_box, top_box, black_top_box, descrete
    style custom style information (overrides default values)
  4. Embed Video

    Constructed: [video type="" url=""]
    Attributes Possible values
    type vimeo, youtube, or flowplayer
    url id or path(only for flowplayer)
  5. Slider

    Constructed: [slider id=""]
    Attributes Possible values
    id slider post id
    Note:A slider id is found in the url of a slider post e.g. http://udfrance.com/dev/t5/wp-admin/post.php?post= 335&action=edit
Miscellaneous Shortcodes
  1. Google Map

    Constructed: [map id="" lat="" long="" zoom="" width="" height="" info_title="" info_content=""]
    Attributes Possible values
    id map id, necessary if two or more maps are displayed on one page
    lat map latitude value
    long map longitude value
    width numeric value e.g. 200px, leave blank for default of 100%
    height numeric value e.g. 200px, leave blank for default of 210px
    info_title tooltip title
    info_content tooltip text content
    Note: For lat/long of a location please visit: http://www.gorissen.info/Pierre/maps/googleMapLocationv3.php

9. Sources & Credits

Preview Photos

A special thanks to photographer/s Ethan Yang(http://www.ethanyangphotography.com/blog/ and art director H1 (http://h1.io/) for granting us permission to use their photos! Please note these photos are copyrighted by the respective photographers and can therefore NOT be included in the download file. And to their team:

Preview Videos

A thanks to H1 for granting us permission to use the following vimeo videos:

Videos:

  • NEGARIN LONDON A /W 12-13,
  • Chris Styles @ IBIZA ,
  • Busta Rhymes “Why Stop Now ft. Chris Brown” Music Video
  • Amanda, by H1
  • Rick Genest aka Rico the Zombie - Embrace Everything That Is Different - by The Avant/Garde Diaries

Video Credits:

Third Party Scripts
Icons and other sources

Social Networking icons by Fresh Ideas -Visit Website

All other graphic assets and/or logos are created by, belong to, and are copyrighted by UnlimitDesign.

10. Outro

Once again, thank you so much for purchasing this theme. As stated in the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but our support staff will do the 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 UnlimitDesign Team

Help us improve this & future themes!

We would like to hear what you think about our product, both the positive and negative! Use the form below to share your thoughts. By sending us a review you agree that your response can be used for marketing purposes i.e. testimonials. Thank you!


*required

Version 2.8

Changelog:
  • WordPress 3.9 Ready
Files affected:
  • style.css
  • z_admin/ (directory)
  • z_usr/ (directory)

Version 2.7

Changelog:
  • WordPress 3.8 Ready
  • Updated the Foundry Theme Options Panel to version 4.2.5
  • Updated Slider
  • Added Honeypot Spam Prevention to Contact Form
  • Boxed Layout Title Colorpicker bugfix
  • Updated .po & .mo files,
Files affected:
  • style.css
  • js/black/jquery.voltageSlideshow.js
  • js/black/contact.js
  • js/white/jquery.voltageSlideshow.js
  • js/white/contact.js
  • languages/default.po
  • languages/default.mo
  • z_usr/ (directory)
  • z_admin/ (directory)
  • foundry-functions.php (deleted)
  • foundry-settings.php
  • functions.php
  • header.php
  • page-contact.php