Kube

Jump to: navigation, search
Kube.jpg
Thank you for purchasing Kube theme. If you have any questions that are beyond the scope of this help document, please use our Support system to open support ticket.

To get official help with your support related questions, please open support ticket in our support page.

Contents

Intro

Kube is powered by the award winning Visual Composer plugin, which lets you to create a complex layouts with simple drag-n-drop interface. Nowadays many websites have complex grid layouts with columns, tabs, sliders and etc. In the past, to create that type of layouts you should be html guru or shortcodes operator ninja.

But not anymore! I've prepared a short video for you to get you up running in no time. See yourself how easy it is. Complex layouts combined with professionally designed plugins made easy!

http://www.youtube.com/watch?v=CglFoJ1gwuc

* Video is showing Visual Composer possibilities using another theme, but it will work the same in Kube.

General Information

Thank you for purchasing my theme. This is a truly unique premium WordPress theme designed for individuals or small business to showcase their work with style and simplicity. I hope that you will find it easy and enjoyable to use.

This user manual contains information, tips, and tricks to get help you use this theme to it's fullest. Most of the options are straight forward, but further explanation is given where it is needed. If you have a question about the use or functionality of this theme, or perhaps you may have a suggestion for an enhancement or feature request, please send a direct message to me from my ThemeForest profile page.

Also, be sure to check out and participate in the discussion forums for additional assistance from myself and helpful users. Community forums.

Support is only available to registered users that have purchased this theme. Contractors: please provide a means to validate your client's purchase (e.g., Item Purchase Code and account that was used to purchase this theme). Support is limited at best if the theme files have been modified. Please refer to the abundant tutorials on the Internet about CSS editing.

Theme Installation

Kube installation doesn't differ from any other theme installation process, so you might be familiar with this process already. If not, please follow instructions below.

  1. Download the theme files to your computer.
  2. Unzip the theme package onto your local hard drive. Within the theme package is another zipped file (Kube.zip), which contains all of the theme files.
  3. Login to your WP administration dashboard.
  4. Go to 'Themes' in the WordPress 'Appearance' panel
  5. Click on the 'Install Themes' tab.
  6. Click 'Upload'.
  7. Click 'Choose File' and browse to and select the theme files zip folder.
  8. Click on the 'Install Now' button to begin automatically unpacking and installing the theme.
  9. From your WordPress administration page, go to 'Themes' in the WordPress 'Appearance' panel.
  10. From the 'Manage Themes' tab, activate the theme so that it becomes the current theme.
  11. Right after theme activation you should see Theme options page. Now refer to "Theme settings" section of this file.

That's it!

Theme Settings

After activating the theme you’ll notice a new "Theme options" panel in the WordPress menu on the left (Appearance->Theme options). Click "Theme options" link to review and modify the theme settings. When you've completed making changes to the theme options and before you navigate away from the theme options page, be sure to click the "Save Changes" button to apply the new settings.

General Settings

  1. Custom Logo - Upload a custom logotype
  2. Favicon - Upload a square image that will represent your website's favicon, .ico is preferred format
  3. Disable right click - Put switch in "On" position to disable right click on your site
  4. Tracking Code - Paste your Google Analytics (or other) tracking code here. This will be added into the footer template of your theme

Blog

  1. Blog page - By default excerpt (teaser) will be shown on archive page. Switch between content/excerpt here

Portfolio

  1. Portfolio posts per page - Number of portfolios posts to display on one portfolio archive page
  2. Images layout - How images in single portfolio view should be viewed by default
  3. Image slider interval - FlexSlider is used in single portfolio and blog pages. Enter interval for auto slides rotation
  4. Image slider FX - Select transition effect for FlexSlider
  5. Hide image captions - Select this to hide image caption in single portfolio view
  6. Archive style - Select default layout for portfolio archive pages
  7. Show isotope filter in archive - Check this to show isotope filter before archive by default
  8. Show other projects - Uncheck this checkbox to remove other projects thumbnails in single portfolio view
  9. Thumbnails count - Number of portfolios posts to display in single portfolio page below main content
  10. Thumbnails order - Select how thumbnails should be ordered

Colors + Typography

  1. Body Background color - Pick a custom color for background color of the theme e.g. #F3F3F3
  2. Background pattern - Select pattern for background
  3. Default Background Image - Upload an image for the theme's background
  4. Default Background image position - Select how you would like to position the background
  5. Default Header Image - Upload an image for the page's background
  6. Default Header image position - Select how you would like to position header image
  7. Main accent color - Select color to spice up your theme. This color will replace default orange accent color
  8. Second accent color - Select color that should be used for links in Primary navigation, widget titles in sidebar, h1-h6 headings, page header background and other places where brown color is used in default color scheme
  9. Main content area background color - Pick a custom color for main content background color of the theme e.g. #FFFFFF
  10. Main content area shadow - Enable or disable shadow around main content block
  11. Use custom typography - Enable the use of custom typography for your site
  12. General typography - Set general font, size and color
  13. Headings typography - Set custom font for headings (h1-h6), navigation and widget titles
  14. H1 - H6 Sizes - Select sizes for heading elements

Footer

  1. Copyright text in the footer - This text will be printed in the footer copyright area.

Custom CSS

  1. If you need to place custom CSS code to alter themes default styles, then use this field to store your code.

Import/Export

  1. If you need you can import or export theme settings here. Check this video to see how to import predefined styles that come with this theme.

Theme Setup

Importing demo_content.xml

This theme comes with demo_content.xml file. This file contains all demo content that you've seen at the theme's demo site. To import that content, complete this steps:

  1. Navigate to Tools->Import
  2. Select import from WordPress. WordPress will offer you to install "WordPress Importer" plugin if you don't have one already. Follow the on screen instructions to install and activate that plugin.
  3. On the import content screen, click "Browse" button and select demo_content.xml from your computer (demo_content.xml is in the .zip file you've downloaded from ThemeForest).
  4. Click "Upload file and import" button. Then, at the next screen, select "Download and import file attachments" and then click "Submit" button.

Now when you have imported all demo content in to your site. You should, set few more things. Like: which page should be used as a home page, which page should contain your blog posts.

Set Home page

In WordPress you should set which page should be used for the home page. So here’s what you should do.

  1. Create new page and give it a title ("Home" for example).
  2. Go to the Settings->Reading and set "Home" page as a home page.

Note: If you have imported demo_content.xml, then instead of creating empty page, proceed to the 2nd step and select one of the imported pages.

Set Portfolio page

To create a Portfolio page, go to Pages->Add new and create new page with title of your choice, then in the "Page attributes" sidebar select "Portfolio" as template and publish this page. Don't forget to add it to the menu structure in the Appearance->Menus. You can also go to the Settings->Reading and set this page as a home page, that way your homepage will show your portfolio items.

Note: if you imported demo_content.xml, then there's no need to create another page with "Portfolio page" template selected, you can use imported page instead.

Set Blog page

To create a Blog page, go to Pages->Add new and create new page with title of your choice. Don't forget to add it to the menu structure in the Appearance->Menus. Then in Settings->Reading select this page in "Posts page:" drop down menu and hit save button.

Note: if you imported demo_content.xml, then there's no need to create "Blog" page, it's already created. So simply go to the Settings->Reading and set previously imported page as "Posts page".

Create Contact page

To create contact page same as on the demo server, create static page (Pages->Add new) and enter your contact information. For contact form Contact Form7 plugin is used, it's free and available in WordPress.org plugin repository.

Install plugin following WordPress plugin installation steps, then activate it and create new form. To replicate form as on demo site use this code:

<div class="row-fluid">
   <div class="span6"><p><label for="your-name">Your Name*</label>[text* your-name] </p></div>
   <div class="span6"><p><label for="your-email">Your Email*</label> [email* your-email] </p></div>
</div>
 
<div class="row-fluid">
   <div class="span12">
      <p><label for="your-message">Your Message</label> [textarea your-message] </p>
      <p>[submit class:wpb_button  class:btn-primary class:btn-small "Send"]</p>
   </div>
</div>

Main Menu

To create menu you should follow this steps:

  1. Click "Menus" from the "Appearance" panel in the WordPress menu on the left.
  2. Create menu if you don't have one.
  3. Assign your menu to the themes Primary menu location (Or other menu location of your choice).
  4. Check boxes for the Pages and/or Categories you want to include in your main menu and click "Add to Menu".
  5. You can also add a custom menu link, like "Home" or link to an external site.
  6. Drag-n-drop the order you want the menu items to appear.
  7. Save menu.

Making a post / page / portfolio item

Posts, Portfolio items have custom options available, scroll to the bottom of the post edit page screen and look for the "Options Settings" section.

Post Options

  1. Link - Enter URL, it is used for "Link" format posts.
  2. Video - Enter YouTube or Vimeo url, to associate video with current post. It is used for "Video" format posts.
  3. Images - Select images. They will be used for "Gallery" format post type.
  4. Custom Header Image - Upload an image for the page's header.
  5. Custom Header Image Position - Select how you would like to position header image.
  6. Custom Background Image - Upload an image for the page's background.
  7. Custom Background Image Position - Select how you would like to position the background.

Page Options

  1. Hide title block - check to hide title block on this page.
  2. Page caption - Enter optional page caption.
  3. Sequencer Slider - To place previously created sequence slider on top of your page, select it from dropdown.
  4. Custom Header Image - Upload an image for the page's header.
  5. Custom Header Image Position - Select how you would like to position header image.
  6. Custom Background Image - Upload an image for the page's background.
  7. Custom Background Image Position - Select how you would like to position the background.

If you will select "Portfolio" in Page Attributes->Template, then additional options will be visible.

  1. Archive style - Select archive style.
  2. Block width - Select width of portfolio block in portfolio archive.
  3. Show filter in archive - Select to show isotope filter before archive
  4. Categories - To narrow portfolio output by portfolio categories, select them here.
  5. Sort portfolios by - Select how portfolio items should be sorted on the portfolio archive page

Portfolio Options

  1. Hide title block - check to hide title block on this page.
  2. Page caption - Enter optional page caption.
  3. Sequencer Slider - To place previously created sequence slider on top of your page, select it from dropdown.
  4. Portfolio layout - Select how to display attached images.
  5. Images - Select which images attach to this portfolio item.
  6. Videos - Enter YouTube or Vimeo url, to associate video with current post.
  7. Project URL - If project have URL then place it here.
  8. Weight - This option will be used for sorting portfolio items on portfolio archive page. Items with lower "weight" will be placed at the end of the list.
  9. Custom Header Image - Upload an image for the page's header.
  10. Custom Header Image Position - Select how you would like to position header image.
  11. Custom Background Image - Upload an image for the page's background.
  12. Custom Background Image Position - Select how you would like to position the background.

Featured Image

Some posts can have a featured image, this image will be used in the blog layout for posts and in the portfolio items grid for portfolio items. To set a featured image click "Set featured image" link in the sidebar.

Video walk-throw.

Theme Widgets

This theme has various widget areas you can use. You can check them in the Appearance->Widgets section.

Also this theme comes with custom built in widgets:

  1. Flickr - WPBakery – for displaying your flickr photo stream.
  2. Twitter - WPBakery – for displaying your latest twitter updates.
  3. Video - WPBakery – for displaying your video in the sidebar.

WPSequencer slider

This theme comes with a WPSequencer slider built in. WPSequencer has a drag-n-drop interface, which will assist you in the slider creation process.

WPSequencer is truly unique WordPress slider plugin. With simple to use drag and drop slider builder you can create stunning animation in minutes. 40+ predefined animation presets and Google fonts support – out of the box! More information about WPSequencer.

Related Videos

  1. Install Contact Form 7 Plugin
  2. How to configure the menus in WordPress
  3. How to Set a Featured Image in WordPress
  4. How to Disable Comments on WordPress Pages

FAQ

On your demo site you have nice square icons, how can I insert them on my site?

On the demo site I've used free icons from "Mimi Glyps" collection. Find a right icon for you, then upload and insert it to your content with WordPress WYSIWYG editor. Edit image properties and under advanced tab, enter Class name: square_icon or round_icon. Here's a video walk-throw.

Upload error: "The following themes are installed but incomplete. Themes must have a stylesheet and a template."

You are getting this message because you forgot to unzip archive file that you downloaded from ThemeForest. Please unzip that file, inside of it you’ll find documentation folder and theme_name.zip. And then upload theme_name.zip inside of the Wordpress theme installer, after that your theme will be installed.

How can I update my theme files?

Go to appearance –> themes and activate the default WordPress theme. Delete the theme in question and upload the new version you will have to download from ThemeForest. The process is the same as the first installation and you will not loose saved settings.

How can I disable comments for certain page/post?

To disable comments edit page/post where you want to turn comments off and look for section called "Discussion", inside that section uncheck "Allow comments." and "Allow trackbacks and pingbacks on this page." checkboxes, then hit "Update" button, to update your page/post. If you can't find "Discussion" section below the main content field, then make sure that "Discussion" is checked in "Screen Options" (Top right corner).

Outro

Thank you for your purchase. If you have any questions that are beyond the scope of this help file, please use our Support system to open support ticket.

Michael, WPBakery

Don't be shy - join us on Facebook. WPbakery website · Portfolio · Twitter @wpbakery

Personal tools