## Documentation

Gaming Wordpress Template

Preview Profile Support

## Overview

Youplay is Wordpress template with WooCommerce and bbPress compatibile.

## Template Layout

Template have fixed structure consisting of `navbar`, `banner`, `search bar`, `content`, `social block` and `footer` as shown below:
Zip archive contains following files and folders:

    - youplay.zip     -> zip file with template inside
    - Documentation   -> Contains this document and other plugin documentations
    - Plugins         -> Available template plugins
    - Licensing       -> Template licensing
    - Demo Data       -> Demo Data with all posts/products/forums/images from following page - http://wp.nkdev.info/youplay/
    - youplay         -> Unpacked template

## Install

Download the latest version from Themeforest.

### Install Theme

1. Log into your WordPress blog.
2. Look down the left hand column for "Appearance" -> "Themes" and then click on the button "Add new".
3. In the "Add new" page, click “Upload Theme” on top
4. In the "Upload" page, click “Browse” to browse for the theme installation file in donwloaded package `youplay.zip`. Click "Install Now".
5. After installed successfully, click "Activate" to make the Applay active

### Install Plugins

1. Look down the left hand column for "Appearance" -> "Install Plugins"
2. In the "Install Plugins" page, select plugins.
3. After selecting plugins click Install. Plugins will be installed and activated.

### Import Demo Data

1. Look down the left hand column for "Appearance" -> "Import Demo Data"
2. Click on "Import" button.
3. Importing can take some time, so do not reload the page, wait until the end process.

## Menu Setup

There are 2 menu locations: Pimary and Primary Right.

### Menu Item Descriptions

1. Go to "Appearance" -> "Menus"
2. Click "Screen Options" on the top right
3. Check "Description"
4. After it in all menu items you can find Description textarea.

## Sidebars

There are 3 types of sidebars:

1. Main - used on Pages and Blog posts
2. WooCommerce - used on all WooCommerce pages
3. bbPress - used on all bbPress pages

To change positions or remove sidebars go to Theme Options or use page metaboxes.

## Theme Options

To see all options go to menu "Youplay Options".

### General

- Main:
  - Custom CSS - your CSS, will be added on all pages in <head> section.
  - Custom JS - your JS, will be added on all pages in <head> section. For example - google analytics code.
  - RTL mode - enable right-to-left languages support.
  - Favicon - icon will be show in browser address bar / tabs/ bookmark.
  - Logo - your site logo. Will be added in left of the menu and to preloader.
  - Show Preloader - Enable preloader
  - Smooth Scroll - Enable smooth scroll. By default this feature disabled due to some of parallax images buggy.
  - Parallax - Parallax images (footer and banners)
- Background:
  - Enable Background - enables background image for main content section.
  - Image - select image for background.
  - Cover - cover image if ON. Repeat image of OFF.
  - Fixed - fixed attachment (not scroll with page).
  - Parallax - change background position on scroll from top screen to bottom. Set 0 to disable.
  - Content background color opacity

### Theme Style

- Style - predefined styles (Dark and Light) and Custom style. When selected Custom you can change options below.
- Colors:
  - Scheme From - scheme from dark or light theme. If your custom colors uses darken shades, select Dark scheme, else - Light
  - Main Color - Used for active button / link colors
  - Back Color - Used for background color (images overlay color in dark scheme)
  - Back Grey Color - background color for place that outside of main site box.
  - Text Color - main text color
  - Primary Color - one of bootstrap colors
  - Success Color - one of bootstrap colors
  - Info Color - one of bootstrap colors
  - Warning Color - one of bootstrap colors
  - Danger Color - one of bootstrap colors
- Sizes:
  - Skew Size - skew size in degrees of all skewed elements (images, carousels, buttons, etc...)
  - Navbar Height - height of top navbar in pixels
  - Navbar Small Height - height of top navbar in pixels after page scroll
  - Images Opacity - all angled images and banners backgrounds opacity
  - Images Hover Opacity - all angled images opacity on mouse over

### Fonts

- Body Typography - main site font-family / font-size / letter-spacing / line-height
- Google Font Load - load google fonts you want to use in you site. Added fonts will be added in "Body Typography" font-family lists.

### Navigation

- Main:
  - Show Logo - show logo in left of the navigation.
  - Show Search - show search icon in right of the navigation.
- Shopping Cart:
  - Show - show shopping cart in navbar.
  - Show Icon - show shopping cart icon.
  - Show Count - show products count in shopping cart.
  - Show Total - show products total price.

### Single Page

- Main
  - Layout - default pages layouts.
    1. Content only
    2. Content + right Sidebar
    3. Content + left Sidebar
    4. Content + right Sidebar
    5. Banner + Content
    6. Banner + Content + right Sidebar
    7. Banner + Content + left Sidebar
  - Show Title - show page title.
  - Boxed Content - limit the width of the content.
  - Show Comments
- Banner - Banner options is not shown with selected Layout without banner.
  - Image - banner background image.
  - Image Cover - cover image on all visible area (not needed with big images).
  - Banner Size - height size of banner.

### Single Post

- Main
  - Layout - default pages layouts.
    1. Content only
    2. Content + right Sidebar
    3. Content + left Sidebar
    4. Content + right Sidebar
    5. Banner + Content
    6. Banner + Content + right Sidebar
    7. Banner + Content + left Sidebar
  - Boxed Content - limit the width of the content.
  - Show Comments
- Banner - Banner options is not shown with selected Layout without banner.
  - Image - banner background image.
  - Image Cover - cover image on all visible area (not needed with big images).
  - Banner Size - height size of banner.
- No Image - default post image if user not selected featured image.
- Review:
  - Show Review - show review with rating hexagon.
  - Max Rating - max rating number (default 10).
  - First Column Title - title of first column (default Good).
  - First Column Before Item - text before item (plus icon).
  - Second Column Title - title of second column (default Bad).
  - Second Column Before Item - text before item (minus icon).
- Meta - show or hide meta data, placed bottom of post content
  - Show Tags
  - Show Author
  - Show Publish Date
  - Show Categories
  - Show Views - show total namber of page views.
  - Show Likes - show icon with Like function.
  - Show Comments Count
- Social Likes - social like buttons, placed bottom of post content
  - Facebook
  - Twitter
  - Google+
  - Pinterest
  - Vkontakte

### Posts Archive

- Main
  - Layout - default pages layouts.
    1. Content only
    2. Content + right Sidebar
    3. Content + left Sidebar
    4. Content + right Sidebar
    5. Banner + Content
    6. Banner + Content + right Sidebar
    7. Banner + Content + left Sidebar
  - Boxed Content - limit the width of the content.
- Banner - Banner options is not shown with selected Layout without banner.
  - Image - banner background image.
  - Image Cover - cover image on all visible area (not needed with big images).
  - Banner Size - height size of banner.

### WooCommerce

- Main
  - Layout - default pages layouts.
    1. Content only
    2. Content + right Sidebar
    3. Content + left Sidebar
    4. Content + right Sidebar
    5. Banner + Content
    6. Banner + Content + right Sidebar
    7. Banner + Content + left Sidebar
  - Boxed Content - limit the width of the content.
- Banner - Banner options is not shown with selected Layout without banner.
  - Image Cover - cover image on all visible area (not needed with big images).
  - Banner Size - height size of banner.
- Social Likes - social like buttons, placed bottom of post content
  - Facebook
  - Twitter
  - Google+
  - Pinterest
  - Vkontakte
- Shop Page
  - Style - style of list woth products (Grid or Row)
  - Breadcrumbs
  - Result Count Text
  - "Order by" field
  - Ratings - rating for each of products
  - "Add to cart" buttons - buttons for each of products

### bbPress

- Main
  - Layout - default pages layouts.
    1. Content only
    2. Content + right Sidebar
    3. Content + left Sidebar
    4. Content + right Sidebar
    5. Banner + Content
    6. Banner + Content + right Sidebar
    7. Banner + Content + left Sidebar
  - Breadcrumbs
  - Boxed Content - limit the width of the content.
- Banner - Banner options is not shown with selected Layout without banner.
  - Image - banner background image.
  - Image Cover - cover image on all visible area (not needed with big images).
  - Banner Size - height size of banner.

### Search Page

- Main
  - Layout - default pages layouts.
    1. Content only
    2. Content + right Sidebar
    3. Content + left Sidebar
    4. Content + right Sidebar
    5. Banner + Content
    6. Banner + Content + right Sidebar
    7. Banner + Content + left Sidebar
  - Boxed Content - limit the width of the content.
- Banner - Banner options is not shown with selected Layout without banner.
  - Image - banner background image.
  - Image Cover - cover image on all visible area (not needed with big images).
  - Banner Size - height size of banner.

### 404

- Page Title - used in <title> tag for 404 page
- Content Text - message for 404 page
- Show Search Form
- Background Image

### Footer

- Main
  - Text - copyright text in footer
  - Background Image
- Social
  - Show - show social block
  - Text - text for social block
  - below list with buttons params

### Maintenance

- Maintenance Mode - enable maintenance mode.
- Except Admin - show maintenance page for all users except admin.
- Page Title - page title for maintenance.
- Background Image - background image for maintenance page.
- Show Logo - show logo in maintenance page.
- Logo - image for logo.
- Show Countdown - show countdown.
- Countdown Date - set countdown expired date.
- Text - text before countdown.

### Demo Data

Link to page with demo data importer.

## Shortcodes

I highly recommend you to use Visual Composer for building pages. All shortcodes you can configure without this documentation.

### Button Shortcode

    [yp_button href="http://nkdev.info" size="lg" full_width="false" active="false" color="success" icon_before="fa fa-html5" icon_after=""]Youplay[/yp_button]

- size: lg, md, sm, xs
- color: default, primary, success, info, warning, danger

Buttons Group

    [yp_button_group]
        [yp_button href="http://nkdev.info" size="" full_width="false" active="false" color="success" icon_before="fa fa-html5" icon_after=""]Youplay 1[/yp_button]
        [yp_button href="http://nkdev.info" size="" full_width="false" active="false" color="success" icon_before="fa fa-css3" icon_after=""]Youplay 2[/yp_button]
    [/yp_button_group]

### Text Shortcode

Use it only if you want to add "Boxed" to text container.

    [yp_text boxed="false"]My Text[/yp_text]

### Banner Shortcode

You can see all banners in demo site - http://wp.nkdev.info/youplay/banners/

    [yp_banner img_src="14" img_size="1400x600" banner_size="mid" top_position="false" img_cover="false" boxed="false"]Content[/yp_banner]

- img_src: add link or ID of wordpress media image
- img_size: full, 500x375, 200x200, 90x90, 1400x600, 1440x900
- banner_size: full, mid, small, xsmall

### Tabs Shortcode

    [yp_tabs boxed="false"]
        [yp_tab title="Home" active="true"]...[/yp_tab]
        [yp_tab title="Other"]...[/yp_tab]
    [/yp_tabs]

### Accordion Shortcode

    [yp_accordion boxed="false"]
        [yp_accordion_tab title="Home" active="true"]...[/yp_accordion_tab]
        [yp_accordion_tab title="Other"]...[/yp_accordion_tab]
    [/yp_accordion]

### Carousel Shortcode

You can see all carousels in demo site - http://wp.nkdev.info/youplay/images-carousel/

    [yp_carousel style="1" width="100%" badges_always_show="false" center="false" boxed="false"]
        [yp_carousel_img img_src="88" title="Image 1" href="http://nkdev.info" rating="3" badge_text="Badge 1" badge_color="default" price="$10"]
        [yp_carousel_img img_src="85" title="Image 2" href="http://nkdev.info" rating="5" badge_text="Badge 2" badge_color="primary" price="$14"]
    [/yp_carousel]

- style: 1, 2, 3, 4
- img_src: add link or ID of wordpress media image
- badge_color: default, primary, success, info, warning, danger

### Posts Carousel Shortcode

You can see all post carousels in demo site - http://wp.nkdev.info/youplay/posts-carousel/

    [yp_posts_carousel style="1" posts="1,2,3" show_price="true" show_rating="true" show_discount_badges="true" badges_always_show="false" boxed="false"]

- style: 1, 2
- posts: Type here the post IDs you want to use separated by coma. ex: 23,24,25

### Recent Posts Shortcode

Used for custom posts pages or for show some recent posts. You can see all recent posts shortcodes in demo site - http://wp.nkdev.info/youplay/posts-shortcodes/

    [yp_recent_posts style="1" count="5" pagination="false" boxed="false"]

- style: 1, 2, 3

### Features Shortcode

    [yp_features title="Youplay" description="Description" icon="fa fa-css3" boxed="false"]

### Single Image Shortcode

    [yp_single_image img_src="14" img_size="500x375" link_to_full_image="true" icon="fa fa-search-plus" center="false"]

- img_src: add link or ID of wordpress media image
- img_size: full, 500x375, 200x200, 90x90, 1400x600, 1440x900

### Progress Bar Shortcode

    [yp_progress stripped="true" percent="40" color="success" boxed="false"]40% Complete (success)[/yp_progress]

- color: default, primary, success, info, warning, danger

### Label Shortcode

    [yp_label color="default" text="Label"]

- color: default, primary, success, info, warning, danger

### Alert Shortcode

    [yp_alert color="primary" dismissible="false" boxed="false"]Well done! You successfully read this important alert message.[/yp_alert]

- color: default, primary, success, info, warning, danger

### Countdown Shortcode

Used for countdown - http://wp.nkdev.info/youplay/coming-soon/

    [yp_countdown style="default" custom="" date="11/28/2017"]

- style: default, styled, custom
- custom: markup used with style = 'custom'. Example: %D days %H:%M:%S
- date: end date in format MM/DD/YYYY

## Pages, Posts and Products

Each Pages, Posts and Products has their own settings on edit place. These settings are used to overwrite Theme Options Settings.

## Credits

### Plugins

- Bootstrap – http://getbootstrap.com/
- jQuery – http://jquery.com/
- FontAwesome – http://fortawesome.github.io/Font-Awesome/
- Owl Carousel 2 – http://www.owlcarousel.owlgraphic.com/
- jQuery Countdown – http://hilios.github.io/jQuery.countdown/
- Magnific Popup – http://dimsemenov.com/plugins/magnific-popup/
- Isotope – http://isotope.metafizzy.co/
- Skrollr – https://github.com/Prinzhorn/skrollr
- html5shiv – https://github.com/aFarkas/html5shiv
- SmoothScroll – https://gist.github.com/galambalazs/6477177
- Slider Revolution – http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
- Visual Composer – http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431

### Images

THIS IMAGES NOT INCLUDED IN THEME PACKAGE!
Uses only in demo pages.

- User photos – http://pixabay.com/
- Thanks for artwork:
  - m-hugo
  - ChaoyuanXu
  - Arixev
  - TamplierPainter
  - tobylewin
  - sandara
  - BadoGames
  - Videogame Photography

## End of Documentation

Thanks for purchasing Youplay. We hope you will enjoy using it for your next project.