Installing Backbone Theme Framework

There are two ways to install Backbone theme on your WordPress:

1. Installing via WordPress Dashboard

1. Navigate to your WordPress Admin Menu and open Appearance → Themes section
2. Switch to Install Themes tab
3. Select Upload
4. Browse for .zip file on your computer and install it
5. Activate theme

2. Installing via FTP

1. Open your FTP Client Application (example: FileZilla)
2. Fill the login details (host, username and password) then press Quickconnect
3. Go to ‘wp-content’ folder
4. Go to ‘themes’ folder
5. Extract the Backbone.zip file into your local drive then search the current location and upload the Backbone folder

Got an error during installation process? Try the following:

• If you are upgrading the Backbone theme via WordPress Admin menu, open your ‘Backbone.zip’ and rename the ‘Backbone’ folder before uploading. Eg: Backbone2. Then press Enter
• Make sure you are using the latest version of WordPress
• Make sure your hosting is running the latest version of PHP and MySQL
  Try to upload manually via FTP (FileZilla)

Start of page

Backbone Overview

Backbone is a theme framework with ultra clean and simple design. It is easy to use, easy to customize layout, features and first rate SEO Optimization. It including special features such responsive layout, customization possibilities of the layout and features, many page templates available for your needs, single layout settings in every post or page, theme styling and customization and ad management.

Backbone Default Theme

Start of page

Page Template

In default theme, Backbone have 6 page templates available. You can choose which match to your need. They are:

Portfolio Template

Photoblog

Magazine

Business

Sitemap

Contact

Start of page

Backbone Child Theme

Using Backbone theme framework you can install various Backbone child themes inside of it. But it might be different with the default theme. Backbone Child themes are developed for specific needs. So not all of the page templates will be available in every child themes. In case of specific child themes, only few page templates will be available depend on the theme type. For example Backbone with business theme (See Kirei) and Backbone with video blogging theme (See Vidio).

Start of page

Theme Panel

Backbone uses a new version of our theme panel. This new panel will provides you more impressive experience to explore our themes. Soon, it also will be implemented in other themes.

There are 6 sub menus inside of it. They are:

• Dashboard

Dashboard panel contains a lot of settings to customize Backbone theme. Within this panel you can configure the theme, customize its layout and optimize your website’s SEO. Just drag and drop the option from the left column into the right column to show all sub-options inside of it.

• Custom File editor

Within this panel there is a text editor you can use to edit your theme file.

• Update Framework

You will be informed the version of the theme panel framework you are currently use. Also you can update you framework to the latest version within this panel.

• Readme

Read the brief instruction about Backbone theme framework.

• Theme Info

This contains general information about Backbonesuch as product version, framework vesion, license type and links to product support.

• Import Export Settings

This provides a feature for you to import or export your theme settings into a text file.

Start of page

Theme Options

There are many options you can use to customize the theme, social networking, thumbnail images, ad settings and also page templates. It contains 14 settings. They are:

General Settings

1. Go to Backbone → Dashboard → Theme Options → General Settings
2. Choose an option to use title or logo for your website
3. If you prefer to use logo, set your website’s logo by uploading an image or by attaching a URL (external image)
4. Set your website’s favicon. Upload a 16x16px .ico image. Click here to generate your favicon
5. There is an option to choose between posts, pages, both of them, or none of them you want to enable comment system
6. Choose the style of pagination feature. There are 2 styles, numbering style and next-previous style
7. There is an option to enable or disable displaying breadcrumbs feature on your website
8. There is an option to show post excerpt or full post content

Social Networking

1. Go to Backbone → Dashboard → Theme Options → Social Networking
2. Specify your social networking accounts that you are going to integrate to your website. There are Twitter, Facebook, YouTube, Flickr, LinkedIn, Delicious, StumbleUpon, Dribble, Vimeo, Skype, Google+ account available. Also you can enable/disable Social Share Button you would like to display on the single post and pages. There are Facebook Like Button, Twitter Share Button and Google +1 Button available

Subscribe settings

1. Go to Backbone → Dashboard → Theme Options → Subscribe Settings
2. Specify your feedburner ID
3. There is an option to enable or disable RSS icon on your website

Open Graph Setting

1. Go to Backbone → Dashboard → Theme Options → Open Graph Settings
2. There is option to Enable/Disable Open Graph feature on your website
3. You can specify the site name, open graph admin and image url for your open graph image

Thumbnail Settings

1. Go to Backbone → Dashboard → Theme Options → Thumbnail Settings
2. There is an option to use WordPress Featured Image or not. If you prefer to use it, there are two additional options:
   • Dynamic Resize: If this options is enabled, the thumbnail in each post will be resized dynamically using WordPress native function
   • Hard Crop: The original image will be cropped to match the target aspect ratio
3. There is an option to enable TimThumb.php script which will dynamically re-size images added through post custom field
4. There is an option to generate post thumbnail automatically from the first image in post
5. There is an option to enable post thumbnail in RSS feed article
6. You can specify the thumbnail image size that you are going to use on your website

Analytics ID, RSS Feed

Go to Backbone → Dashboard → Theme Options → Analytics ID, RSS Feed. In this section you can:

1. Put your Google Analytics code in your website
2. Put your GoSquared token
3. Specify your feedburner URL
4. Specify the feedburner comments URL

Footer Settings

1. Go to Backbone → Dashboard → Theme Options → Footer Settings
2. You can specify your ColorLabs affiliate link
3. In this section, you can enable/disable the custom credit on the left or right footer of your website. If you enable this feature, there is an additional option to specify the text that you want to display on the footer section

Post Settings

1. Go to Backbone → Dashboard → Theme Options → Post Settings
2. There is an option to enable or disable displaying post author feature
3. There is an option to enable or disable related post feature

Magazine Template

1. Go to Backbone → Dashboard → Theme Options → Magazine Template
2. There is an option to enable or disable featured slide in this template
3. Specify a text you are going to display as a slider title
4. There is an option to enable or disable displaying post exceprt in the slider section
5. Specify the number of words of your post to display as an excerpt
6. Specify tags you would like to display in the featured slider section. Separate between each tag using comma (e.g. tag1,tag2)
7. Specify the height of the featured slider section or leave it blank as a default value
8. Specify the number of post you are going to display in the featured slider section
9. Select which category you would like to use in the featured post section
10. Select the number of post you are going to display in the featured post section
11. Specify the size of featured image in the featured section
12. You can specify categories you want to exclude from this template. Separate between each category id using comma (e.g. 11,22)
13. Specify the number of post you are going to display in the normal post section
14. Specify the size of image in the normal post section
15. There are 3 options available of the image alignment you would like to use in the normal post section
16. Specify the number of words of your post to display as an excerpt in the normal post section
17. There are 3 options available you can use as the main layout of your web page

Portfolio Settings

1. Go to Backbone → Dashboard → Theme Options → Portfolio Settings
2. There is an option to enable or disable portfolio functionality
3. Specify a text as a description for your portfolio page
4. Select which page you are going to use as a contact page on your portfolio

Photoblog Settings

1. Go to Backbone → Dashboard → Theme Options → Photoblog Settings
2. There is only an option to enable or disable photoblog functionality

Business Template

1. Go to Backbone → Dashboard → Theme Options → Busines Template
2. There is an option to enable or disable featured slide in this template
3. If you enable the featured slider section, you can choose which tag you would like to use in the slider section
4. Choose which one of your page you would like to show as a business about section
5. Specify your phone number
6. Specify your address
7. Specify your email address
8. Choose which one of your page you would like to show in the business section 1
9. Choose which one of your page you would like to show in the business section 2
10. Choose which one of your page you would like to show in the business section 3
11. There is an option to enable or disable footer email subsribe feature

Top Ad Management

1. Go to Backbone → Dashboard → Theme Options → Top Ad Management
2. There is an option to enable or disable ad space at the top of your website
3. You can enter Google Adsense code
4. You can upload an image to show on your website as a banner image
5. You can specify a URL where the banner points to

Single Ad

1. Go to Backbone → Dashboard → Theme Options → Single Ad
2. There is an option to enable or disable ad space in the single post page

Layout Options

This panel contains settings to customize the layout of Backbone theme. There are a lot of options you can use to customize how your website looks like. There are general styling option, typography option, layout option, header styling, post styling, widget styling, footer styling and navigation styling.

General Styling

1. Go to Backbone → Dashboard → Layout Options → General Styling
2. There is an option to enable or disable all output from custom css file in this theme
3. You can specify a custom color as the background color of your website
4. You can specify an image as the background image of your website by uploading your image or specify an image URL in that box (e.g. http://yoursite.com/image.png)
5. Choose any option you prefer how your background image would be displayed
6. You can specify a custom color as the link color on your website
7. You can specify a custom color as the link hover color on your website
8. You can specify a custom color as the button color on your website
9. You can specify a custom color as the font button color on your website
10. You can specify a custom color as the general border color on your website
11. You can easily add some custom css code for this theme

General Typography

1. Go to Backbone → Dashboard → Layout Options → General Typography
2. There are options in this panel to customize how the typography on your website looks like. There are General text font style, heading 1, heading 2, heading 3, heading 4, heading 5 and heading 6 font style. You can specify the font type, font size, font style and font color in each section.

Layout

1. Go to Backbone → Dashboard → Layout Options → Layout
2. In this panel, there are layout options available you can use as your website layout. Choose the layout options you prefer to use as the main layout and footer widget area on your website

Header Styling

1. Go to Backbone → Dashboard → Layout Options → Header Styling
2. You can specify a custom color as the background color of your website header
3. You can specify an image as the background image of your website header
4. Choose any option you prefer how your background image would be displayed
5. You can specify how the border on your website header looks like.
6. You can specify an integer value for top and bottom margin of your website header
7. You can specify an integer value for top and bottom padding of your website header
8. You can specify an integer value for left and right padding of your website header
9. You can specify the style of your website title font looks like. Specify the font size, type, style and color in this part
10. You can specify the style of your website description font looks like. Specify the font size, type, style and color within this part

Post Styling

1. Go to Backbone → Dashboard → Layout Options → Post Styling
2. In this part, there are options to customize how the style of your post typography looks like. There are post title, post meta, post text and post more font style options available. Specify the font size, type, style and font color within this part
3. You can specify how the top border on your post more section looks like
4. You can specify how the bottom border on your post more section looks like
5. You can specify a custom color as the background color of the post author section
6. You can specify how the top border on your post author section looks like
7. You can specify how the bottom border on your post author section looks like
8. You can specify a custom color as the background color of the comment section (on event threads)
9. You can specify a custom color as the background color of the comment section (on odd threads)
10. You can specify the style of your website page navigation font looks like
11. You can specify a custom color as the background color of the page navigation section (on odd threads)
12. You can specify how the top border on your page navigation section looks like
13. You can specify how the bottom border on your page navigation section looks like

Widget Styling

1. Go to Backbone → Dashboard → Layout Options → Widget Styling
2. You can specify how the border on the widget section looks like
3. You can specify the style of the widget title font looks like
4. You can specify how the bottom border of the widget title looks like
5. You can specify the style of the widget text font looks like
6. Set amount pixels for border radius in widget
7. You can specify a custom color as the background color of the widget
8. You can specify a custom color as the background color of the tabs widget
9. You can specify the style of the tabs widget title font looks like
10. You can specify the style of the tabs widget meta font looks like

Footer Styling

1. Go to Backbone → Dashboard → Layout Options → Footer Styling
2. You can specify the style of the footer font looks like
3. You can specify a custom color as the background color of the footer
4. You can specify how the top border on the footer section looks like
5. You can specify how the bottom border on the footer section looks like
6. You can specify how the left/right border on the footer section looks like
7. Set amount pixels for border radius in footer section
8. You can specify an integer value for left/right padding of your footer section

Navigation Styling

1. Go to Backbone → Dashboard → Layout Options → Navigation Styling
2. There is an option to show or hide RSS link in right navigation
3. You can specify a custom color as the background color of the navigation section
4. You can specify the style of the navigation font looks like
5. You can specify a custom color as the hover color of the navigation section
6. You can specify a custom color as the current menu color of the navigation section
7. You can specify how the top border on the navigation section looks like
8. You can specify how the bottom border on the navigation section looks like
9. Set amount pixels for border radius in navigation section
10. You can specify how the left/right border on the navigation section looks like

Start of page

SEO Options

This panel contains settings to encourage your website Search Engine Optimization.

Page Title

1. Go to Backbone → Dashboard → SEO Options → Page Title
2. Specify a text you want to display as a blog title
3. Specify words in a sentence you want to display as a blog description
4. Specify a character you want to use as a separator in page title
5. There is an option to enable or disable custom page title on your website
6. There is an option to enable or disable custom page title on your website. If you enable this option, there are additional options available. They are:
   • Homepage title layout: You can define the order of the elements on your homepage
   • Single title layout: You can define the order of the elements on the single title layout
   • Page title layout: You can define the order of the elements on the page title layout
   • Archive title layout: You can define the order of the elements on the archive title layout
   • Page: You can specify a text that precedes page number in page titles
   • Page number position: You can define the position you want to display the page number on your website

Description Meta

1. Go to Backbone → Dashboard → SEO Options → Description Meta
2. There are 3 options that you can choose where to populate the home page meta description from
3. You can add a custom meta description to your website
4. There are 3 options you can choose where to populate the single page/post meta description from
5. There is an option to enable or disable custom meta description on your posts and pages. If you enable this option, there are additional options available. They are:

Keyword Meta

1. Go to Backbone → Dashboard → SEO Options → Keyword Meta
2. There are 2 options where to populate the homepage meta keywords from
3. You can add a custom homepage keywords to your website. Separate each keyword using comma
4. There are 3 options you can choose where to populate the single page/post meta keywords from
5. There is an option to enable or disable custom meta keywords on your posts and pages. If you enable this option, there are additional options available

Indexing Options

1. Go to Backbone → Dashboard → SEO Options → Indexing Options
2. You can select which archive page you are going to be indexed
3. There is an option to enable or disable adding follow meta to all posts and pages

Advanced Options

1. Go to Backbone → Dashboard → SEO Options → Advanced Options
2. There is an option to enable or disable 3rd party plugin data
3. There is an option to show or hide ColorLabs SEO Settings box in the post and page editing screens

Start of page

Installing Child Themes

You can install child themes for Backbone with the same way like installing any other themes.

1. Installing via WordPress Dashboard

1. Navigate to your WordPress Admin Menu and open Appearance → Themes section
2. Switch to Install Themes tab
3. Select Upload
4. Browse for .zip file on your computer and install it
5. Activate theme

2. Installing via FTP

1. Open your FTP Client Application (example: FileZilla)
2. Fill the login details (host, username and password), then press Quickconnect
3. Go to ‘wp-content’ folder
4. Go to ‘themes’ folder
5. Extract the Backbone.zip file into your local drive, search the current location and upload the Backbone folder

Got an error during installation process? Try the following:

• If you are upgrading the Backbone theme via WordPress Admin menu, open your ‘Backbone.zip’, rename the ‘Backbone’ folder before uploading. Eg: Backbone2. Then press Enter
• Make sure you are using the latest version of WordPress
• Make sure your hosting is running the latest version of PHP and MySQL
  Try to upload manually via FTP (FileZilla)

Backbone will automatically detect an installed child themes and activate the theme panel. The theme is ready to use.

Start of page