“Jasper - Responsive Education and Shopping Theme” Documentation by “CactusThemes” v1.5


Short version of document: Configure HomePage


“Jasper - Responsive Education and Shopping Theme”

Created: 22/5/2013
Updated: 9/11/2013
By: CactusThemes
Email: admin@cactusthemes.com

Thank you for purchasing Jasper - WP Theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents



1. INTRODUCTION - top

Jasper is the second Wordpress Theme from The CactusThemes. Jasper is a complete solution for business, education, and e-commerce websites. List of Jasper’s functionalities are:

    1. Responsive layout
    Jasper is 100% mobile-ready Wordpress theme. It means that your site works perfectly on any devices, from tiny smartphones to 7-inches tablets to wide desktop screens. Want to have a drive-test? Try to resize your desktop browser to see the flexibility of Jasper layout.

    2. Bootstrap integrated
    Maybe you’ve heard about Twitter’s Bootstrap framework? Jasper is 100% Bootstrap-compatible, which means you are able to use any of Bootstrap’s features. Some of them are the responsive layout, rich collection of typography and advance components such as the dialog, collapse and tab.

    3. Wordpress Gantry framework-based
    Wordpress Gantry is a theme development framework built by RocketTheme. It is a powerful Wordpress plugin that adds various functions to Gantry-based themes including Jasper. Some of them are visualized administration, layout management and theme overridden. More detail will be presented later in this document.

    4. E-commerce ready with WooCommerce compatibility
    Turn your site into an e-commerce shop easily with WooCommerce integration. Jasper has been fully configured to work with WooCommerce.

    5. Image Slider with Revolution Slider, FlexSlider and NivoSlider
    Jasper package include a awesome-15$-worth Revolution Slider. In addition, FlexSlider and NivoSlider are really cool and popular responsive sliders around the web. Jasper embedded these sliders which help you to present your works or portfolios in an attractive way.

    6. 2 Portfolio styles
    Portfolio layout helps you to introduce your works nicely with isotope effects

    7. Fully customized for Educational Site
    With the use of Course, Professor and Event post types, Jasper is a perfect match for your educational site.

    8. Unlimited color combinations
    Jasper offers the ability to create custom color combinations. It means that you can change the look and feel of your theme in any way you like.

    9. Big collection of typography and shortcodes
    Jasper integrates full collection of Bootstrap typography and components. In addition, shortcodes such as [carousel] and [testimonial] are integrated in admin editor that makes it feasible to use.

    10. Social Network ready
    Social network sharing functions such as Facebook Like, Twitter Tweet and Pin this (Pinterest) have been integrated inside Jasper. Readers of your blog can Like or Tweet or Pin the posts easily.

    11. Built-in widgets
    Jasper Recent Posts, Tabbed Widget, Latest Custom Post Types and Your Social Pages are interesting built-in widgets in Jasper.

    12. Complete Post Format support
    All Post Formats provided by Wordpress (Gallery, Aside, Status, Chat, Video, Image, Audio, Quote) are supported in Jasper.

    13. Popular plugins integration
    We recommend you to use these following plugins to configure your content: Contact Form 7, DW Bootstrap shortcode, Black Studio TinyMCE Widget, Awesome Flickr Gallery and Latest Tweet Widget. They are free and cool plugins which are fully supported by Jasper.

For more information, check out our demo page at LIVE DEMO PAGE


2. REQUIREMENT - top

The following requirement must be met to use Jasper:

  1. PHP 5.4+
  2. MySQL 5+
  3. Wordpress 3.5.1+
  4. Gantry 4.0+ - download and install Gantry Framework for WordPress as a plugin


3. INSTALLATION - top

Folder structure
After downloading the full package, unzip the files and you would see the folder structure looks like this:

  1. Installation File
    1. Jasper.zip
    2. RevSlider.zip
    3. Sample Data
      1. Jasper-demo-data.xml
      2. Jasper-demo-gantry-configuration.data
      3. Jasper-demo-revslider-homeslider.txt
  2. Licensing
  3. PSD
  4. Documentation
You would find the install file in Installation File/Jasper.zip.

For installation tutorial, please see video at http://youtu.be/xrwW00S8wX4


4. CONFIGURATION - top


4.1. Widget position layout - top


4.1.1. Layout map - top

Figure below shows the layout of Jasper theme. It shows which sidebar positions are supported by Jasper and how the widgets should be placed in appropriate positions.


Layout Map

4.1.2. Widgets management - top

How to place widgets in positions? Go to Appearance → Widgets. Just drag the widgets in the left panel (Available widgets) to the panels in the right.
There are 18 sidebar positions in Jasper. Their names are correspondent with the Layout Map above. In addition, there are additional sidebars used for special purposes:

  1. Page Not Found: used when users hit a Page Not Found
  2. Tabbed Widgets 1,2,3: used in [tabbedwidget] shortcode (see 4.9.3)
  3. Combined Sidebar: used in [sidebar] shortcode (see 4.9.4)


4.2. Theme Configuration - top

Configuration of Jasper is done mostly using [Gantry Theme] section. You could find the menu item on the left side menu.


Theme Config

There are 4 tabs of Gantry Settings: Content, Gizmos, Layouts and Advanced and 1 tab for theme overview. There is no need to explain all the settings as when you leave the mouse over each setting label, you would see the explanation in the right panel. You can try to explore yourself, although the most important settings will be explained in next sections.


4.3. Layout Control - top


4.3.1. Mainbody Layout - top

So you decide to have 1, 2 or 3 columns in mainbody section? Go to Gantry Theme → Layouts tab → check MainBody Position. You would see something like this:


Main body layout

Main top and Body top layout control
The number on top is the number of columns you want to have in mainbody section. So if you choose 2, you will have 1 column sidebar and 1 main content (blog) column. If you choose 3, you will have 2 column sidebars and 1 main content column.
The slider at bottom allows you to control the place and size of each column. Drag the slider handle to change the size and place of columns. The square boxes above show the illustration of you chosen layout, in which:

For example, you can have: By default, Jasper uses [sa:3][mb:9] layout. When you are done, remember to save the layout settings by clicking [Save changes] button at the top of setting page

Main body layout

Save after settings


4.3.2. Split Sidebar Into Columns - top

Widgets in main body are placed in “Sidebar” position (check Layout map in 4.1.1). In Appearance → Widget
You will see there is only one sidebar named “Sidebar”. Then how to split them into 2 columns as seen on http://demo.cactusthemes.com/jasper/3-column-layout/? There is a special widget named [Gantry Divider Widget]. You could find it in the Available Widgets panel, and then drag it to the sidebar position. It will tell Jasper to split sidebar into 2 columns (naming [sa] and [sb]), as a result you are able to use 3 columns layout as presented in previous section. If you don’t want to use sidebar, then remove all widgets in sidebar position, and you will have 1 column layout.

Main body layout

Use devider widget to split columns
Note: you will need to split sidebar into columns first (using Divider Widget in Appearance → Widgets), before enabled to use the Layout control as described in MainBody Layout.


4.3.3. Split Other Positions Into Columns - top

Like sidebar, you can split other positions into columns by dragging the Divider Widget to the position panel to split it. You can split up to 6 columns in each position.
Note: you will need to split positions into columns first (using Divider Widget in Appearance → Widgets), before enabled to use the Layout control.


4.4. Using override to control layout in different pages - top

Homepage Vs. Sub-pages

For example, you want the slideshow to appear in homepage but you want to hide it in other sub-pages. Or, you want the homepage has 1 column layout, while sub-pages have 2 columns. By integrating Gantry powerful Template Framework, Jasper allows you to control the appearance of widgets easily. Please use OVERIDE function and follow these steps:

Step 1: Create overide
In the Admin Panel, Go to Gantry Theme → Click “New Overide”

Go to gantry theme

Create new override

Step 2: Change Override Name (Optional)
You can change the name of the new override by clicking on the pencil icon to enter new name → press [enter] to accept change.

Change override name

Step 3: Change Settings
By default, this override inherits all settings from default override. Now you decide what changes/differences in settings (including content, gizmos, layouts, and advanced tab) you want to apply for this override. For example, if the default settings hide all post meta data (title, author, created date, tags…) and you want to display these information in sub-pages, go to tab Content → Post.

Change override name

You can see that all settings are in blur state because the new Override hasn’t overridden any settings of default Override. Now click on the checkbox of the setting you want to override. The setting will be brighten, and you can change the value (ex. drag the toggle to ON state).
Do this for any other settings you want to differentiate. Them remember the last step: click [Save Changes]

Step 4: Change Widget Appearance
Now you want to hide a column in sub-page, you can use Layouts tab. But before that, you need to specify widget columns first (see 4.5). So in the same setting page for the new override, you click on the Widgets button to go to Widget Management page. Then go to the override you have just created.

change widget apperance

In the same way with step 3, you would see a checkbox for each position. Check it if you override settings. For example, you check the Sidebar position, then remove all the widgets inside this position.

Check box

Go up to top of the page, and see a gantry setting bar there. Make sure you are making changes in the correct Override. Click on the “Gantry settings” button to come back to previous screen. Note that there is not any [Save Changes] button there because in this screen, all the changes are automatically saved.

click gantry setting

Now you are able to use Layout settings to override the columns layout. Go to Layout tag, tick the checkbox for MainBody. As there is only 1 column in Sidebar position (you have removed other column), now the MainBody has 2 columns. Therefore, even if you try to choose 3-column layout setting (as in 4.5) for Mainbody, Gantry will not accept it. So you have 2 columns, you drag the slider to adjust the position and size. Then remember [Save changes] button.

set column layout

Step 5: Assign The Override
The last step is to decide where the Override will have effects. It can have effect on a menu item or on a category page or on a specific post. Go to tab Assignments → tick the item you want to assign (i.e. where the Override have effects) → click [Add to Assigned]. You would see in the right panel a list of items where the Override have effects.

For example, you want the new Override have effects on every page, look for Pages panel, tick the checkbox near the header, then click “Add to Assigned”.

assignment

add to assignment

This might seems a bit complex but when you master it, you will love its powerful flexibility. The extra last step is to click [Save Changes] button.


4.5. Main Menu - top

There are 2 ways to configure Main Menu


4.5.1. Using default Wordpress’s Main Menu - top



add new or edit menu

Add new or edit menu



choose menu to present

Choose which menu to present in locations (Main Menu or Top Menu)



add item to menu

Add Items to Menu



Drag drop menu items

After added to Menu, drag the item to position you choose


Note: Remember to save on every step / progress you make


4.5.2. Using Gantry Menu Widget to create menu - top

Alternatively, you can use Gantry Menu Widget to create navigation for your theme.
Please note that Gantry Menu can only be used for Main Menu (Not Top Menu)
To use gantry Menu, please go to Widgets manager (Appearance → Widgets), drag the “Gantry Menu” widget to Navigation position (see session 4.1). There are dozens of properties there, of which the most important property is Menu. Other properties can be left unchanged.


Drag gantry menu widget to Navigation position

Drag gantry menu widget to Navigation position



4.6. Custom Post Types - top


4.6.1. Course - top

To add a course, from the left menu, go to Course → Add New
Managing Course is the same with posts, except it has extra meta-data values. Below the editor there is a box named “Course Information”. By default, there are 7 extra fields as seen in the figure below. If a field’s value is empty, nothing is shown in front-end


Course meta data

Course meta data


You can add custom meta-data by using box “Custom Fields” in the same page.

Not that Course does not use default category. Instead, it uses a custom taxonomy called “Course Category”. However, managing “Course Category” is the same as default categories.

To have a Course Listing page like http://demo.cactusthemes.com/jasper/course-category/course/ , create a Course Category (Course → Category). Then create sub-categories like “Graduate Courses” and “Undergraduate Courses”. Finally, create a menu item of type Course Category to display this page.


4.6.2. Professor - top

To add a professor, from the left menu, go to Professor → Add New

Managing professors is the same as managing posts.

To have Professor page, as seen on http://demo.cactusthemes.com/jasper/category/professor/, there are two options:

4.6.3. Event - top

To add an event, from the left menu, go to Event → Add New
Managing events is the same as managing posts, except each event has extra meta-data. You will find box “Event information” below the main editor. By default, there are 5 extra fields which are listed in the figure below.



Event page meta data
There is a special field named “Google Maps made simple””. This will work if you install “Google Maps made simple” plugin. You need to put something like this [wpgmappity id='5']
To manage the ID of wpgmappity, use the button “G” near “Add Media” button



You can add extra fields using “Custom Fields” box which is in the same page.

To have Event List page, as seen on http://demo.cactusthemes.com/jasper/category/event/, there are two options:


4.7. Using Slider - top

Jasper package includes a premium version of Revolution Slider. In addition, you can use FlexSlider and NivoSlider which is embedded inside Jasper.



4.7.1. Revolution Slider - top

To manage Revolution Slider, from the left main menu, go to Revolution Slider
To learn how it works, please see the full documentation of Revolution Slider which is packed along with Jasper.

4.7.2. Using FlexSlider and NivoSlider - top

To use FlexSlider and NivoSlider, first you need to create content for each slide. From the left main menu, go to Carousel Slide → Add New


Carousel Slide → Add New


Please note this: Each category represents a slider. You would need to remember its slug or ID for using with the [carousel] shortcode later

Each category represents a slider


- Each item (in Carousel Slide) represents a slide. Title and content of item will be displayed in the description panel of slide. Feature image will be used as main slide image.

Each item (in Carousel Slide) represents a slide


After having slides’ content, using [carousel] shortcode to display the slider.
Now go back to the Post/ Page/ Widget you want to add slider to. In the editor of editing post, page or widget, click on the [Carousel] button. You would see there are numerous options for the carousel. Choose your preferred values and click “Insert”.

Adding slider using carousel shortcode button

Once clicked, it will add this piece of code in the editor (if you are in HTML Mode). It is the shortcode of the slider. You could manually type directly into the editor, although it is not recommended because it is hard to remember the code.

For example, you will get the code:
	[carousel id="carousel_58" cat="my-slider" animation="slide" 
		easing="swing" interval="2000" direction="horizontal"]

The most import property is the “cat” value. You need to specify correctly the slug or ID of the category of carousel slides created in previous step.


4.8. Using Typography - top



4.8.1. Using Button - top

We suggest using DW Shortcode Bootstrap plugin (see 6. Resources) to insert button into post. However, there are some button-styles that you might want to use. Their HTML codes are listed below.




Default buttons
	
OR
 Small button
Change button colors (using either, red, blue, turquoise, violet, orange, or emerald)
	
OR
	Small button
Use big buttons
	
OR
	Big Submit Button


4.8.2. Using Table - top

Code for table is too complex to write it yourself. In addition, there is no [table] button in the editor of Wordpress. The easiest way to do is using pasting a table from a Word document into Wordpress. The steps are:

  1. Create a table in a Word document normally
  2. Select and copy (Ctrl + C) the entire table
  3. Go to post editor, click on [Paste from Word] button to open the dialog
    1. Look for “Paste from Words” button


      Paste (Ctrl + V) into the dialog, you would see the table there. Then click Insert

      Paste to dialog

      Now you’ve already have the table. To change it into our typography, you need one more step: turn the editor into HTML mode, look for the table code. Something like this:

      		<table border="1" cellspacing="0" cellpadding="0">
      		<tbody>
      		<tr>
      		<td valign="top" width="198"><strong>Header 1</strong></td>
      		<td valign="top" width="205"><strong>Header 2</strong></td>
      		<td valign="top" width="201"><strong>Header 3</strong></td>
      		</tr>
      		…
      		…
      		</table>
      	

      Edit the first line with this code (add class “table” to the code)

      		<table border="1" class="table" cellspacing="0" cellpadding="0">
      		<tbody>
      		<tr>
      		<td valign="top" width="198"><strong>Header 1</strong></td>
      		<td valign="top" width="205"><strong>Header 2</strong></td>
      		<td valign="top" width="201"><strong>Header 3</strong></td>
      		</tr>
      		…
      		…
      		</table>
      	

      4.8.3 Labels and Badgets - top


      			<span class="badge">1</span>
      			<span class="label">Default</span>
      			<span class="badge badge-success">2</span>
      			<span class="label label-success">Success</span>
      			<span class="badge badge-warning">4</span>
      			<span class="label label-warning">Warning</span>
      			<span class="badge badge-important">6</span>
      			<span class="label label-important">Important</span>
      			<span class="badge badge-info">8</span>
      			<span class="label label-info">Info</span>
      			<span class="badge badge-inverse">10</span>
      			<span class="label label-inverse">Inverse</span>
      		

      4.9.1. Testimonial - top

      Testimonials are useful to present beautiful words from your customers who are highly satisfied with your products and services. See testimonial demo here: http://demo.cactusthemes.com/jasper/testimonials/

      The code to display testimonial is

      		[testimonial name="Author" job="Founder @ abc.com"]
      		Testimonial content
      		[testi-avatar]
      		{avatar}
      		[/testi-avatar]
      		[/testimonial]
      

      You can type in the editor manually or using Jasper’s embedded Testimonial button.


      Add testimonial using button

      Combine it with the Grid shortcode (provided by DW ShortCode BootStrap) to place multiple testimonials into columns.


      4.9.2. Shortcode - top

      There are times when you want to display the shortcode in plain-text. You don’t want it to be parsed by any function. To do that, use [shortcode] tag. In the editor type:

      		[shortcode]
      		[anothershortcode]…[/anothershortcode]
      		[/shortcode]
      	

      In front-end, the [anothershortcode] will be displayed in plain-text. For example, the [tesitimonial] shortcode will be displayed like in the figure below

      Using [shortcode] code to display another shortcode


      4.9.3. Tabbed Widget - top

      In Appearance → Widgets, drag widgets into “Tabbed Widgets 1” (or Tabbed Widgets 2, 3) sidebar.

      Then use a simple text widget and enter shortcode to displayed Tabbed Widgets

      		[tabbedwidget id=”1”]
      	

      This shortcode will display widgets placed in “Tabbed Widgets 1” sidebar in a tab-style where the shortcode is placed.

      Tabbed widget


      4.9.4. Combined Widget - top

      This shortcode is used to display a sidebar anywhere. You need to know the ID of the sidebar you want to display. Be default, there is a sidebar named “Combined Sidebar” in Appearance → Widgets page. To display this sidebar, use

      		[sidebar id=”combined-sidebar”]
      	

      4.9.5. Compare Table - top

      Compare Table is nowadays a popular component used by many websites. It is used to show comparison between options, such as comparison between Free and Premium packages of your product.
      There are 2 styles for the Compare Table as shown in below figures. To create Compare Table, in the edit page of post, page or widget, find the “Compare Table button”

      Compare table button

      There are 4 parameters to customize the table:

      1. Number of columns: there is one special column that has different and highlighted style called “compare-table-gold”
      2. Number of rows: there is one special row that has different and highlighted style called “compare-table-heading-2”
      3. Style: choose between Style 1 / Style 2 / Style 3
      4. Color of highlight: this will set the background color of highlighted row/column in the Compare Table. Each style has one highlighted row/column[c]
      Please see Demo of compare table at http://demo.cactusthemes.com/jasper/compare-table/


      4.9.6. Collapse - top

      Please demo at http://demo.cactusthemes.com/jasper/faq/
      Adding a collapse is as easy as other shortcode component. Use the “Collapse” button in the editor to insert a collapse.




      4.10. DW Shortcodes Bootstrap Usage - top

      It is hard to remember all the code we listed. Therefore we suggest using DW Shortcodes Bootstrap plugin by DesignWall. This plugin will install several buttons into your editor that will help you to insert shortcodes easily.



      Note: Before start using, remember to turn off Bootstrap CSS and JS loaded by DW Shortcodes plugin as Jasper has included these library by default.

      To do this, go to Settings → DW Shortcode options → uncheck the box → Save changes

      Note: DW Shortcodes Bootstrap is not our product. It is a product from Designwall.com. We are not their affiliate either.



      4.11. Advance Code - top

      There are advance codes available if you want to use more complex components. They are:

      1. Modal dialog:
      Open a dialog when clicking on a link or button. Below is the HTML code

      		<!-- Button to trigger modal -->
      <a class="btn" href="#myModal" data-toggle="modal">Open Modal</a>
      
      <!-- Modal -->
      <div class="modal hide fade" id="myModal">
      <div class="modal-header">
      <button class="close" type="button" data-dismiss="modal">×</button>
      <h3 id="myModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
      Modal content - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
      </div>
      <div class="modal-footer"><button class="btn" data-dismiss="modal">Close</button> <button class="btn btn-primary">Save changes</button></div>
      </div>
      
      	

      2. Tab:
      Display a tab. Below is the HTML code. However, we recommend using DW Twitter BootStrap plugin to insert the tab

      	[tabs]
      [thead]
      [tab class="active" type="tab" href="#dws_first_tab86" title="Tab title”]
      [dropdown id="dws_dropdown86" title="Dropdown "]
      [tab type="tab" href="#dws_dropdown186" title="@fat"]
      [tab type="tab" href="#dws_dropdown286" title="@mdo"]
      [/dropdown]
      [tab class="" type="tab" href="#dws_tab9055755086" title="Another tab"] [/thead]
      [tcontents]
      [tcontent class="active" id="dws_first_tab86"]
      Content for tab 1 here
      [/tcontent]
      [tcontent class="" id="dws_dropdown186"]
      Content for tab 2 here
      [/tcontent]
      [tcontent class="" id="dws_dropdown286"]
      Content for tab 3 here
       [/tcontent]
      [tcontent class="" id="dws_tab9055755086"]
      Content for tab 4 here
      [/tcontent]
      [/tcontents]
      [/tabs]
      
      

      3. Tooltip
      Display a tooltip when mouse is over on text. Below is sample HTML code

      <a title="Tooltip on top" href="#" rel="tooltip" data-placement="top">Tooltip on top</a>
      <a title="Tooltip on top" href="#" rel="tooltip" data-placement="bottom">Tooltip on top</a>
      <a title="Tooltip on top" href="#" rel="tooltip" data-placement="left">Tooltip on top</a>
      <a title="Tooltip on top" href="#" rel="tooltip" data-placement="right">Tooltip on top</a>
      
      

      4. Collapse
      Display an accordion-style tab. Use Collapse button to insert a collapse. See 4.9 section

      See demo page here: http://www.cactusthemes.com/demo/Jasper/advance-code/


      4.12. Blog, Category and other Content settings - top

      Go to Gantry Theme → Content
      Set various values for Blog, Page, Post, Archive, Category and Search sections.



      4.13. Facebook, Twitter, Pinterest buttons - top




      Social buttons to share your posts
      To add “Share this” panel at the end of a post or page, go to Gantry Theme → Advanced. If at least one button is shown, the panel is shown.
      There are various options for you to choose. You can turn it on/off and change its style

      Configuration for Social buttons



      4.14. Page-Not-Found (404) page configuration - top

      This is the page when a visitors visit a non-existing (or no-longer-existing) URL on your site. The friendlier the page is, the more convenient the visitors feel. To edit this page, go to
      Appearance → Widgets
      Drag any kind of widget into Page Not Found sidebar
      For example, you drag a text widget into Page Not Found position, type your custom text like this:


      Page not found Position
      This position only appears when visitors visit a 404 page.




      4.15. Jasper Widgets - top



      4.15.1. Jasper Recent Posts - top

      Jasper Recent Posts widget is an override of default Wordpress Recent Posts widget. It allows you to easily customize widget layout with extra parameters.

      • Number of posts to show: specify number of most recent posts to show
      • Number of columns: specify number of columns of the layout
      • What to show: specify which part of the post (excerpt, title, full content) will be used
      • Show thumbnail: specify position of the thumbnail (nowhere, before title, after title, after content or float left)
      • Show post metadata: specify whether to show post metadata
      • Category ID: specify ID of the category where posts are fed from. If not specified, posts from every category are collected.

      Jasper Recent Posts widget’s parameters




      4.15.2. Jasper Tabbed Widget - top

      This is an interesting and powerful feature of Jasper. It allows you to display widgets in tab-layout which saves a lot of spaces on your site.



      Tabbed Widget
      Tabbed widget works with any kind of widgets. Just drag the widgets into Tabbed Widgets Position sidebar, and then use shortcode to display the tab. Here are the steps:

      1. Go to Appearance → Widgets
      2. Look for Tabbed Widgets sidebars on the right. There are 3 predefined Tabbed Widgets sidebar 1, 2, 3

      Tabbed Widget Sidebar

      • Drag available widgets into these sidebars. In the figure above, 2 widgets are dragged into Tabbed Widgets sidebar 1
      • Now to display the tab, use shortcode [tabbedwidget id=”1”] in posts, pages or text widget. See section 4.9 about shortcode. Change the ID value according to the index of appropriate sidebar (1, 2, or 3).



      4.15.3. Jasper Your Social Pages Widget - top

      Your Social Pages widget is a simple widget to show links which are your social network profiles. Supported profiles are Facebook, Google, Plus, Twitter, Flickr, and YouTube.



      You will find this widget in Appearance → Widgets → Your Social Pages widget.
      What you get on live site is:




      4.15.4. Latest Custom Posts - top

      This widget is used to display the latest posts of any custom post types, such as Event or Professor.

      Latest Custom Post Types widgets

      Go to Appearance → Widgets

      Drag the “Latest Custom Post Types” widget into desired sidebar and configure properties.



      4.15.5. Advance Search Form - top

      Advance Search Form is used to search for any custom post types and in any category. You are able to specify the post types that you allow users to search and categories that limit the search result.

      It is useful to use this form for course search as seen on our demo page.

      Advance Search Form used as Course Search

      Go to Appearance → Widgets

      Drag the widget into desired sidebar and configure properties.




      4.16. Portfolio layout / Category of portfolios - top

      A great feature of Jasper is to display your work beautifully in Portfolio layout. To configure a category to be displayed in portfolio layout, go to Posts → Categories → edit or add new category.

      There are 2 parameters to help you configure portfolio layout


      To add new portfolio you just have to add new category. Remember to choose layout type: Portfolio 1 (Squared Images) or Portfolio 2 (Rounded Images)

      To set number of column in a portfolio pages, please input the width (in pixel) of one columns in the Column width parameter. The system automatically calculate the number of columns accordingly.

      Example: With the setting like this:



      You have this in frontend:




      4.17. Post Format - top

      Jasper supports all the Post Formats provided by Wordpress. There are: Gallery, Aside, Link, Image, Quote, Status, Video, Audio and Chat. This allows your posts to have different layouts and functions. See detail at http://codex.wordpress.org/Post_Formats

      To specify which Post Format a post is, in the “Add New” or “Edit Post” post, find on the right a panel called “Post Format”. Choose the one that is suitable.

      Post formats




      4.17.1. Gallery - top

      A Gallery post will automatically display all attached images in the form of a slider. Images of the post are created and managed in the Gallery Management of the post (Each image uploaded when you use the Add Media button in a post will be added to that post’s gallery). So, a post will have multiple images as its gallery.

      Add images to a Gallery Post by Add Media button

      A Gallery post will get all images in the post’s gallery; display them in a slider. Please see LIVE DEMO




      4.17.2. Aside - top

      An Aside post is typically styled without a title. Only main content is displayed in the category page.




      4.17.3. Link - top

      A link post is a link to another page. Use the “Insert/Edit link” button to add a link in the content of the post. Additional text will be displayed as well.




      4.17.4. Image - top

      An Image post is a post with a single image. The first tag in the post will be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.




      4.17.5. Quote - top

      A Quote post will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.




      4.17.6. Status - top

      A Status post is a short status update, similar to a Twitter status update.




      4.17.7. Video - top

      A Video post is a link to a video from YouTube or Vimeo. The first video tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL.




      4.17.8. Audio - top

      An Audio post is a link to an audio file.




      4.17.9. Chat - top

      Display a chat script.




      4.18. Custom Look and Feel - top

      The look and feel of your site can be changed in Gantry Theme → Advanced → Theme Look n Feel

      Theme Look n Feel configuration



      4.18.1. Color Schema - top

      There are 3 schemas: Black-Black; Black-White and White-White. This will change the main color of top and body sections.



      4.18.2. URL of Logo - top

      Paste the URL of your logo here. You will need to upload the logo via Media Manager and get the link.



      4.18.3. URL of Top Background - top

      If you want to use image for top background, end the full URL of the image here.



      4.18.4. Menu Accessories skin - top

      When the navigation background changes, probably you want to change the color of the arrow (that we call Menu Accessories) so that it fits new color. Jasper provides 2 Menu Accessories skin: Light & Dark.

      Menu Accessories



      4.18.5. Top Textbox Color skin - top

      When the top background color changes, you might want to change the skin of the search textbox there. Choose either Light or Dark skin for the textbox.

      Dark and Light skin for textbox



      4.18.6. Main Theme Color - top

      Change the main color of theme. This will change the color of navigation, link, buttons and some headings.

      Main Theme Color



      4.18.7. Changing Fonts - top

      Jasper supports Google Fonts. To change theme font, go to Gantry theme → Advanced → WebFonts

      Font settings



      4.18.8. Custom CSS - top

      1. .whitebox
      Used for widget in “Custom Variations” field. Set the background of widget to white, border is rounded

      Class. whitebox



      2. .darkbox
      Used for widget in “Custom Variations” field. Set the background of widget to black, border is rounded

      Class. darkbox

      3. .sidenavi
      Change Categories or Menu widget to other style. Used in “Custom Variations” field of widget.

      Class .sidenavi



      4. .bw
      Turn color image to black-white image, return color when mouse is hovered.

      Class .bw




      5. WOOCOMMERCE CONFIGURATION - top

      WooCommerce is a powerful plugin developed by WooThemes that turns your blog into an e-commerce platform. It is a complete solution for you when you want to deploy a shopping cart. It can be downloaded by visiting http://www.woothemes.com/woocommerce/. Installing WooCommerce is the same as installing other plugins.

      For a full documentation of WooCommerce, please visit http://wcdocs.woothemes.com/category/user-guide/getting-started/. Below are some of important settings that you might need to know.



      5.1. Core Settings - top


      5.1.1. Disable WooCommerce CSS Styles - top

      Go to WooCommerce → Settings → General

      Uncheck “Enable WooCommerce CSS Styles” as Jasper has handled this. Enabling WooCommerce CSS styles will cause conflict.



      5.1.2. Prepare WooCommerce-related Pages - top

      Go to WooCommerce → Settings → Pages

      By default, all pages are created upon installation of the plugin. If not, you will need to create them.

      To edit these pages, go to Pages → All Pages

      Content in these pages will be displayed first. Then other data, such as listing of products, will be shown. For example, you edit “Shop” page, add some text there; in front-end the text will be displayed before the listing of products.


      Even when these pages do not have content, do not delete them as WooCommerce need them to display other data.



      5.2 Jasper’s Setting For WooCommerce - top

      Go to Gantry Theme → Content → WooCommerce

      There are 3 parameters for you:

      1. Number of products per page: this is the maximum number of products which will be displayed in the product listing page
      2. Number of columns to display: this is the number of column layout for the product listing page
      3. Product Background color: if you have transparent product images, this will be useful to set the background color for displaying products.



      6. RESOURCES - top

      Jasper uses and suggests these following resources




      7. CHANGE LOG - top

      • 18th May. 2013: First release



      Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd 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 and asking your question in the "Item Discussion" section.

      CactusThemes

      Go To Table of Contents