Sport Center - Events & Education Wordpress Theme

The Documentation

• Created: September 1st 2016
• Update: September 1st 2016
• http://themeforest.net/user/LeafColor
• Email: leafcolor.com@gmail.com

Install and Update

Always remember to download the latest version from your Themeforest account. The Main Files includes these following files and folders:

Update

• 1 - Install and use WP Envato Market Plugin.
• 2 - Download new version on Themeforest and Update manually (Upload via FTP)

Sport Center Layout

Install Sample Data

1 - WP Clone Import

• Install Sport Center theme and all included plugins, active all of them
• Install plugin WP Clone
• After installed WP Clone, go to WP Clone on admin sidebar menu
• Download Backup File from:

  https://www.dropbox.com/s/tz7mwod4884qg8a/sportcenter_wpclone_backup_300916.zip?dl=0

• Upload this file to your host/server and use your file's URL to importing
• Choose Restore from URL and enter your clone file's URL


• Make sure you've read all 3 cautions
• Check I AGREE and click Restore from URL
• After successful importing, you might need to login to your admin with this info
  Username: admin
  Password: 123456@
  Pls change this account's password and other info

2 - Import Manually

You can use regular way to import data. you can find in /Sample Data/ folder:

• sportcenter-full.xml All sample data
• sportcenter-minimal.xml Only main homepage demo Data
• theme-options.txt Theme Options Settings

• Make sure you have installed Sport Center theme and all recommended plugins
• Go to Tools > Import, then click on Wordpress
• If it is not yet installed before, you have to install it. On the popup, click "Install Now"
• After installed successfully, click on Activate Plugin & Run Importer
• Browse for [path-to-your-downloaded-package]/Installation File/Sample Data/sportcenter-xxx.xml and click Upload File and Import.
• After uploaded, the confirmation page appears. Check the Download and import file attachments option and click Submit. If you have trouble with importing (it might be failed in the middle due to long execution time), try again with this option Unchecked!
• After uploaded, the confirmation page appears. Check the Download and import file attachments option and click Submit
• When you see message "All done. Have fun!", you will know that the import is done.
• Go to Settings > Reading, set Front page displays to A Static page. Choose Home Page page as Front page and Blog as Posts page
• Go to Appearance > Menus, choose Main Navigation menu as Primary Menu and Top Nav as Secondary Menu
• Go to Option Tree > Settings > Import and paste content of Sample-Data/theme-options.txt into Theme Options text field, then click Import Theme Options button.
• OK, done!

Menu Setup

• To config menu, go to Appearance > Menus
• Choose to Add new menu or Edit existing menu
• You could assign menu to menu locations when editing menu or in tab Manage Locations
  
• Remember to Save changes

Homepage Setup

Create Frontpage and Blog

• Create 2 new pages (Pages > Add new), and publish them.
  We’ll call these “Home” and “Blog”.
• Go to Settings > Reading Settings, under “Front page displays”, click the radio button for A static page.
  Select “Home” in the first drop down (for Front page), and select “Blog” in the second one (for Posts page). Save the changes.

Frontpage Template

• Go to Pages > All Pages and edit “Home” page created in previous step
• Choose "Front Page" in Template.
  
• Choose Layout settings
  
• You should enable Visual Composer to build your home page easier

Sidebar & Widget

Sidebar

• Main Sidebar - Applied for all pages
• Front page Sidebar - Used in Front page only
• Woocommerce Sidebar - Used in all Woocommerce pages
• Footer Sidebar - Appear in footer on all pages
• Bottom Sidebar - Appear on footer section and the underneath of Page content
• Pathway Sidebar - If any widget is used, it replaces default pathway, only appears on single page

Widgets

• Leafcolor Latest Posts: Display the latest Posts based on date, category...
  • Number of posts: how many posts to display
  • Post type: which post type to display
  • ID list show: specify post IDs to display
  • Tags: tags list
  • Categories: category ID or Slug list

Theme Options

General

• Copyright Text: Appear in Footer
• RTL mode: Support RTL Languages
• Custom CSS: Enter custom CSS. Ex: .class{ font-size: 13px; }
• Custom Code: Enter custom code or JS code here. For example, enter Google Analytics
• Logo Image: Upload your logo image, appear on Main Navigation
  
• Retina Logo: Retina logo should be two time bigger than the custom logo. Retina Logo is optional, use this setting if you want to strictly support retina devices.
• Footer Logo Image: Upload your Footer logo image
  
• Login Logo Image: Upload your Admin Login logo image
• Pre-loading Effect: Choose to Enable Pre-loading Effect, please note: This effect will make your site feel slower
• Pre-Loading Background Color: Background color of loader
• Pre-Loading Spinners Color: Color of spinners

Colors & Background

• Main color: Choose Main color (Default is #f7c51e), used in many places (icon, button, menu active, hover...)
  
• Page Heading Background: Choose Page Heading background (Default is Main color)
  
• Footer Background Color: Choose Footer background color (Default is dark color)
• Bottom Background Image Choose Bottom Background
  

Fonts

• Main Font Family: Enter font-family name here. Google Fonts are supported. For example, if you choose "Source Code Pro" Google Font with font-weight 400,500,600, enter Source Code Pro:400,500,600
• Heading Font Family: Enter font-family name here. Google Fonts are supported. For example, if you choose "Source Code Pro" Google Font with font-weight 400,500,600, enter Source Code Pro:400,500,600 (Only few heading texts are affected)
• Main Font Size: Choose base font size
• Upload Custom Font 1: Upload your own font and enter name "custom-font-1" in "Main Font Family" or "Heading Font Family" setting above
• Upload Custom Font 2: Upload your own font and enter name "custom-font-2" in "Main Font Family" or "Heading Font Family" setting above

Main Navigation

• Main Navigation Style: Choose Main Navigation Style. There are 2 styles:
  
  
• Main Navigation Schema: Choose Main Navigation color schema. There are 2 style Dark (as above) and Light:
  
• Main Navigation Background Color: Choose Main Navigation background color
• Main Navigation Background Opacity: Choose Main Navigation background opacity (%)
• Sticky Navigation: Choose to Enable Sticky Navigation
• Enable Search: Enable or disable default search button on Navigation
• Top Navigation Content: Enter top navigation content. Ex:

  <span class="hidden-xs"><i class="fa fa-phone"></i> 0123-456-789</span>
  <span class="hidden-xs"><i class="fa fa-envelope-o"></i> info@edu.com</span>

• Top Navigation Tabs: Add top navigation tabs
  
  Example HTML for time table tab likes demo:

  <ul class="time-list list-inline">
   <li class="time-list-item">
    <a href="#">
     <div class="item-day">Monday</div>
     <div class="item-hour">8:00 AM - 10:00 AM</div>
    </a>
   </li>
   <li class="time-list-item">
    <a href="#">
     <div class="item-day">Wednesday</div>
     <div class="item-hour">2:00 PM - 8:00 PM</div>
    </a>
   </li>
  </ul>

Single Post

• Sidebar Layout: Select Sidebar Layout (Right, Left or Fullwidth)
• About Author: Enable to show About Author box
• Published Date: Enable to show Published Date
• Categories: Enable to show Categories
• Tags: Enable to show Tags
• Comment Count: Enable to show Comment Count
• Post Navigation: Enable to show Post Navigation

Single Page

• Sidebar Layout: Select Sidebar Layout (Right, Left or Fullwidth) for singe page

Archives

• Sidebar Layout: Select Sidebar Layout (Right, Left or Fullwidth) for Archive pages
• Archive Post Listing Style: Select Post Listing Style for Archive pages (Quick Ajax need to be installed)
Default:

Quick Ajax:

(There are other styles of Quick Ajax you could try)

404

• Page Title: Page title of 404 page
• Page Content: Page Content of 404 page
• Search Form: Enable Search Form in 404 page

WooCommerce

• Sidebar Layout: Select Sidebar Layout (Right, Left or Fullwidth) for WooCommerce pages

Event

• Event Sidebar Layout: Select Sidebar Layout (Right, Left or Fullwidth)
• Show Heading Info: in Single Event
• Show Heading Categories: in Single Event
• Show Second Title, Info & All Event link in Single content: in Single Event
• Show Event Thumbnail in Single content: in Single Event
• Show Next/Prev Event: in Single Event
• Event Listing Sidebar Layout: Select Sidebar Layout (Right, Left or Fullwidth)

Member

• Member Sidebar Layout: Select Sidebar Layout (Right, Left or Fullwidth)
• Show Member's Upcomming Events: Enable to show Upcomming Events in Single Member
• Show Other Members: Enable to Show Other Members in Single Member
• Member Post Label: Ex: Trainers, Teachers... to show in site
• Member Post Slug: Change post slug. Remember to save the permalink settings again in Settings > Permalinks

Social Accounts

• Facebook: Enter full link to your account (including http://)
• Twitter: Enter full link to your account (including http://)
• LinkedIn: Enter full link to your account (including http://)
• Tumblr: Enter full link to your account (including http://)
• Google Plus: Enter full link to your account (including http://)
• Pinterest: Enter full link to your account (including http://)
• Youtube: Enter full link to your account (including http://)
• Flickr: Enter full link to your account (including http://)
• Custom Social Account: Add your owl Social Account with Font Awesome Icon
• Open Social link in new tab?: Enable to make social links open in new tab

Social Sharing

• Facebook Share: Enable Facebook Share Button
• Twitter Share: Enable Twitter Tweet Button
• LinkedIn Share: Enable LinkedIn Share Button
• Tumblr Share: Enable Tumblr Share Button
• Google+ Share: Enable Google+ Share Button
• Pinterest Share: Enable Pinterest Share Button
• Email Share: Enable Email Share Button

Sport Center Shortcodes

Button Shortcode

[sc_button size="small" style="0" link="#" icon="fa-rocket" color="#"]Label[/sc_button]

• You could use Font Awesome Icon class for button Icon
• If you does not choose button color, it will use Main color

Icon Box Shortcode

[sc_iconbox icon="fa-trophy" heading="Heading" layout="center"]Content text[/sc_iconbox]

• You could use Font Awesome Icon class for button Icon
• If you does not choose icon color, it will use Main color

Post Slider Shortcode

[sc_post_slider post_type="product" count="5" order="DESC" orderby="date" auto_play="0" height="700"]

• You could choose to query your post/product/event and display in a slider
• Enter max height to limit your slider height

Post Grid Shortcode

[sc_post_grid column="4" post_type="product" count="7" order="DESC" orderby="date"]

• You could choose to query your post/product/portfolio and display in a grid

Post Carousel Shortcode

[sc_post_carousel title="Events" icon="fa-calendar" link_text="View All" link_url="#" header_bg="2410" post_type="tribe_events" count="8" visible="4"]

• You could choose to query your post/product/event and display in a carousel
• Choose to show header to see header item

Post Timeline Shortcode

[sc_post_timeline post_type="post" count="4" order="DESC" orderby="date"]

• You could choose to query your post/product/portfolio and display in a timeline layout

Product Listing Shortcode

[sc_woo column="3" count="6" order="DESC" orderby="date"]

• You could choose up to 6 product per row, unlimited count number

Heading Shortcode

[sc_heading align="center"]Sport <span class="main-color-1">Classes</span>[/sc_heading]

• You could choose Heading size, align and URL
• Heading will automatically change color on a Dark row

Testimonials Shortcode

[sc_testimonial scroll="1"]
    [sc_testimonial_item name="John Dose" title="Manager" avatar="1761"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod [/sc_testimonial_item]
    [sc_testimonial_item name="Jeny weky" title="Developer" avatar="1972"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod [/sc_testimonial_item]
    [sc_testimonial_item name="John Dose" title="Manager" avatar="1761"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod [/sc_testimonial_item]
[/sc_testimonial]

• You could add many testimonials as you want
• Avatar parameter should be attachment ID

Member Shortcode

[member id="1968"]

• You need to install Sport Center - Member plugin to use this shortcode
• You should create some member posts first

Quick Ajax Shortcode

[wpajax]

• You need to install Quick Ajax plugin to use this shortcode
• You could learn more about this plugin here

Sport Center - Showcase Plugin

There are 4 Showcase Styles

• Style Listing
  
• Style Hero
  
• Style Features
  
• Style Layers
  

Pure CSS mobile devides

• There are many devide to choose
  • iPhone 5s (3 colors)
  • iPhone 5c (6 colors)
  • iPhone 4s (2 colors)
  • iPad Mini (2 colors)
  • Galaxy S5 (2 colors)
  • HTC One (1 colors)
  • Lumia 820 (6 colors)
  • Nexus 5 (1 colors)
• All of them are made with HTML and CSS
• Full Responsive and Retina Ready

How to Create

• In admin dashboard, go to Showcase > Add news
• In Add new screen, look down for Showcase Option
• You could choose Showcase Style first
• Then you need to add Screen Items or Devide base on your Style

Usage

• You could insert Showcase to your page/post content via shortcode
• You should enable Visual Composer to add Showcase Shortcode easier

Pages & Posts

Each post/page has their own settings when editing. These settings are used to overwrite Theme Options Settings

Other Settings

For best result, you should config Tribe Events in Wp-Admin > Events > Settings > Display

• Default stylesheet used for events templates: Choose Tribe Events Styles
• Events template: Choose Default Event Template
• You should create and enter Google map API for displaying map in Event

Translation

Sport Center is a WMPL compatible and multi-language ready theme. To translate this theme:

• Download and install this tool POEdit
• Open POEdit and load [/sportcenter/languages/sportcenter.po]
• Translate the text and save the file
• A file named sportcenter.mo is created. Rename it with Code Name of your language. For example, de_DE.mo for German - Deutsche. See language code list here http://codex.wordpress.org/WordPress_in_Your_Language
• Open [{wordpress root}/wp_config.php] and find this line define('WPLANG', '');. Change it to your language code, for example define('WPLANG', 'de_DE');

Sport Center also supports RTL - Right To Left languages. If your language is RTL, go to Appearance > Theme Options > General > RTL mode and check Enable RTL

Licenses

Used Assets

Font Awesome - by Dave Gandy (GPL License)

jscolor - by Jan Odvarko, http://odvarko.cz (GNU-GPL License)

Raumrot - by markusspiske (CC License)

Owl Carousel - by Bartosz Wojciechowski (MIT License)

Devide.css - by Marvelapp (MIT License)

Bootstrap - by @mdo and @fat (MIT License)

The list might not be complete by accident. Authors who think you owe a license in this theme, please contact us at leafcolor.com@gmail.com

Support

If you face problems with the installation or using of our product please do not hesitate to contact us HERE