Snaptube - 20Script

# Snaptube

- created: 05/11/2014
- latest update: 09/16/2014
- 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 at http://www.cohhe.com/support

### Installing the theme

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 Snaptube - this is the Theme itself.
3. Zip it's content into Snaptube.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 Snaptube.zip and click Install Now.
7. After the theme has installed click on Activate Theme and you are all set! Snaptube is now installed!
8. If you prefer to manually upload the theme through FTP you can simply copy the Snaptube folder from the downloaded ZIP package into your themes folder.

### How to update theme

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 "Snaptube.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.

### Demo Site XML import file

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.
2. Next open Appearance > Themes.
3. Next click on step one.
4. Please make sure that you install all required plugins.
5. After all plugins have been installed, please click on step two button.
6. You are done! Demo content should be imported.

### CSS Files and Structure

First and most important CSS file called style.css contains all of the specific stylings for the page. The file is separated into sections using:

    /* Structure */
    some code

    /* Header */
    some code

    /* Sidebar */
    some code

    etc, etc.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Second one is responsive.css which contains all the code which is required to provide responsiveness.

### PSD Files

I've included four psds with this theme:

1. add-comment-error.psd
2. blog-open-entry.psd
3. blog.psd
4. index-hovers.psd
5. index.psd
6. typography.psd
7. video-category-page.psd
8. video-open-already-liking-it.psd
9. video-open-carousel-btn-hover.psd
10. video-open-carousel-closed.psd
11. video-open-like-hover.psd
12. video-open.psd

### Options Panel

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.

### Video player skin

To get the same video player skin as in demo website you have to copy files from "video gallery player" folder to contus video gallery plugin. hdplayer.swf file should go to contus-video-gallery/hdflvplayer/ folder and skin_hdflv_white.swf file to contus-video-gallery/hdflvplayer/skin/

### General Settings

In General Settings section you can set most used settings.

Here are the thing that you can set in General Settings section:

1. Website Logo - Upload a custom logo for your Website.
2. Website logo is Retina ready - You have to uplaod website logo which is 2x in dimensions. It will automatically scaled down for normal displays and prepared for High resolution displays.
3. Default Layout - Select a layout style. (full, left or right sidebar)
4. Element Shadows - You can tur on/off shadows for all intended elements.
5. Login Screen Logo - Upload a custom WP login screen logo.
6. Favicon - Upload an image to use as your favicon.
7. Tracking Code or any other JavaScript - Google Analytics tracking code or other JavaScript.

### Header settings

In Header settings section you can add such information:

1. Twitter url - Your Twitter account url
2. Flickr url - Your Flickr account url
3. Facebook url - Your Facebook account url
4. Google+ url - Your Google+ account url
5. Pinterest url - Your Pinterest account url

### Breadcrumb settings

In Breadcrumb settings section you can add such information:

1. Disable Breadcrumb - Breadcrumbs are shown by default
2. Breadcrumb Delimiter - This is the symbol that will appear in between your breadcrumbs

### Twitter widget Settings

In Twitter widget Settings section you can configure your twitter widget. Without this configuration Twitter widget will not work. More information how to configure it you can find in section "Configure twitter widget".

1. Consumer key - Please enter your Twitter API consumer key.
2. Consumer secret - Please enter your Twitter API consumer secret.
3. User token - Please enter your Twitter API User token.
4. User secret - Please enter your Twitter API User secret.

### CSS Settings

In CSS Settings section you can add custom CSS.

### Javascript Settings

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

### Typography

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.

### Footer settings

Here are the thing that you can set in Footer Settings section:

1. Footer copyright - Add copyright text which you would like to display in the footer
2. Footer logo - Upload a custom logo for your footer.
3. Footer logo is Retina ready - You have to uplaod website logo which is 2x in dimensions. It will automatically scaled down for normal displays and prepared for High resolution displays.
4. Scroll to top - Show scroll to top image?
5. Style - Which menu style to use?

### 404 page settings

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

### How to add "Suggested" videos section

Suggested videos can be added on Appearance -> Theme Options page. Add comma separated list with video ID's you want to see in suggested videos section. ID for each video you can find on Video Gallery -> All Videos page.

### Configure twitter widget

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.
Log into https://dev.twitter.com/apps using your twitter access credentials
Click on "Create a new application" and fill all the required details
You are not done yet, please click on "Create my access token" to get the rest of API keys

Now you should see all your API keys that is required for your twitter widget. See screenshot below.

### Menus

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

This theme supports 2 menus.
If you haven't created a menu, you'll need to create two menus and then assign it to the "Primary menu" and "Footer menu". "Primary menu" is used for top toolbar menu. "Footer menu" is used for bottom menu.

### Sidebars

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

Here are written instructions for creating 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!

### Shortcodes

For a full list of shortcodes and example usages please go to Snaptube demo website and see Shortcodes section.

### WPML Plugin

We have tested and ensured that Snaptube is WPML compatible. If you need a multi-language site, then we recommend using the WPML Plugin. You would need to buy a license for the plugin, then install it and set it up. All the inforamtion you need to get started and use it is on the WPML.org page.

## Basic setup steps

- Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management), and then other WPML plugins that may depend on them.

- Set up WPML from WPML->Languages. See WPML Getting Started Guide for complete reference, but the initial simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages, and a language selector. (For starters, choose the footer language selector, you can change this later.)

## Translating

The best way how to translate this theme is by using String translation module. WPML’s String Translation module is part of the Multilingual CMS package. To enable it, you first need to download and install from your WPML.org account.

- Then, go to WPML->String Translation.
- Click on the translations link to open the translation editor.

Be sure to click on ‘translation is complete‘ after you translate. Incomplete translations will not appear in the site.

More information about this module is available here.

## Translating Site Content

WPML creates different posts, pages and custom types for translations and connects them together. This means that every page has its own title, body and meta-fields.
WPML offers two ways for translating content:

- Manually, by clicking on the + icons

- Using WPML’s Translation Management module

Learn how to translate posts, pages and custom data types in - translating your content. You can also translate post categories and custom taxonomies.

### Easiest way to reveal most removed IDs on admin pages

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.

### Compatible plugins

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. Recent Posts Plus - already integrated
3. WP-PageNavi - already integrated
4. Sidebar Generator - already integrated
5. Visual Composer for Wordpress - already integrated (value $30)
6. WordPress video gallery - this plugin is required if you want to use video features

### Sources and Credits

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. Recent Posts Plus
6. WP-PageNavi
7. Sidebar Generator
8. The Entypo Pictogram Suite
9. Paul Robert Lloyd - social icons