What's New
  1. March 10th, 2016 - JV Hosting version 1.2.3
  2. January 27th, 2016 - JV Hosting version 1.2.2
  3. November 3rd, 2015 - JV Hosting version 1.2
    • Support RTL
    • Add Blog TimeLine
    • Update latest plugin
  4. July 2nd, 2015 - JV Hosting version 1.0
    • Initial Release

System requirements

Recommended PHP Configuration Limits

Many issues that you may run into as: white screen, blank page, demo content fails when importing... are all related to low PHP configuration limits. The solution is to increase the PHP limits.

How verify Current PHP Limits?

You can verify your PHP configuration limits by installing a plugin WordPress phpinfo Or contact your host and ask them what the current settings are and have them adjust them if needed.

The following is recommended settings of PHP config:

  • max_execution_time 3600
  • memory_limit 512M
  • post_max_size 32M
  • upload_max_filesize 32M
  • max_input_vars 5000
Mega menu problem

This is also related to PHP config. See more at menu-item-limit

Install Theme and sample data

1. Install Theme JV Hosting

1. Appearance > Themes > Select Add New > select Upload Theme

2. Active Theme

After installing successfully, active the theme.

2. Install Plugins

1. Begin installing plugins

- When finishing activation JV Hosting theme, a message will be appeared to notice the plugins required

- Click Begin installing plugins

2. Check all plugin and select option Intall > Apply. Then activate these plugins.

Notes: Be sure that all plugins are installed and activated successfully.

3. Video

Upload theme and plugin

3. Install Sample Data

This action will generate sample data for your site just like the default JV Hosting theme .

Step 1 - In Appearance > Themes Settings > Sample Data

Step 2 - Select option "Yes" for showing the "Install sample data button"

Step 3 - Click Import dummy data

Warning: back up your database before performing this action.

Step 3 - Waiting for action complete.

Step 4 - When successfully import. You will get this:

Step 5 - Finally, the page will be reloaded. You will get a site with sample data, settings and sample images.

With a full item mega menu

Video

Watch Install Sample Data

4. Troubleshooting with Installing sample data

Sometimes you may encounter problem with installing sample data like this:

Message:

Sorry, these has been an error
The file does not exist, please try again.
Warning: file_get_contents(../wp-content/themes/jv-hosting/inc/import/file/theme01/content.xml):
 failed to open the stream

Reason: Permission to access and write.

  • Our process to Import dummy data is: Firstly, Download "Import" folder from our server and write to your ftp into: "\wp-content\themes\jv-hosting\inc".
  • There was some reason from your host, folder "Import" can not be created after downloading, So we must handle this by copying this folder and install it.

How to fix:

  • Step 1 - In your download packge locate to: __PLUGIN.zip\import_v1.x.x.zip
  • Step 2 - Extract this zip file to wp-content\themes\jv-hosting\inc\import

Your Folder structure must be like:

Use Child Theme

You can customize theme by using Jv Hosting child theme

Step 1 - Appearance > Themes > Select Add New > select Upload Theme

Step 2 - Then, activate the JV Hosting child theme

Video

Use Child Theme

Theme Settings

1. Appearance > Theme Setting

Setting Logo, font, favorite icon, slider, effect, optimize ..

2. Global tab

3. Tabs Google Fonts

Step 1 - Click Add button to add a new font

Step 2 - Fill in these following:

  • Title
  • Font family automatic suggestion with name of font your are typing

  • Font weight : the font weight and style will be generate depend on the font selected, you can choose the style you like.
  • Assign to selector : the id, class or html tag that you'd like to apply this font.
4. Tabs Style
Style layout:

You cant choose one between: Wide, Boxed, Framed, Rounded

Background layout: As in the illustration you have:

  1. Choose your page's background color
  2. Set background image position
  3. Choose your page's background image

Show color demo:

Display panel setting of theme style in frontend or not

- If choose: yes : In frontend you will get the panel setting like this:

- Else : that panel will not show

5. Tabs OWL Slider
  1. Title: the title of jvSlider
  2. Element (.class || #id) : element to be added carousel
  3. Params: parameter of slider See more options

Notes: Be sured that Enable is checked and Owl carousel's Version to be used

5. Tabs Scrolling Effect
  1. Duration : period of time (ms)
  2. Delay : period of time (s) before starting
  3. Offset : Scroll to the height of item to start animation (in px)
  4. Iteration :1
  5. Effect: running effect (wiew on http://daneden.github.io/animate.css/)
  6. Mobile: select whether to run on mobile or not
  7. Group delay: E.g: if you input 100(ms) the first item will have delay value of 100ms, second item will have delay value of 200ms, third one 300ms and so on ...
  8. Group point: input class or id, this is first parent level of items selected in "Group delay"
  9. Direction DESC: Order will reverse values in "Group Delay"

e.g. Counting is set by scrolling effect

See more Demo Effect

6. Tabs Optimize

1. There are all options about optimization your site.

  • HTML options
  • Javascript options
  • CSS options
  • CDN options
  • Cache Info

- When choosing Optimize CSS Code all css files will be compressing, joined and renaming the files

A compressing css file

- The same for the script and HTML

2.Advanced setting: Click on button Show advanced setting to show advanced setting

For more info and setting, visit Autoptimize plugin

7. Tabs Advanced Theme

In this section you have the setting about Favicon, Image header of page and Woocoomerce product

  1. Favicon : Allow you to change your favorite icon of website.

    - Upload a favicon file: there are 3 ways (From computer, url, media upload)

    Step 1 - Favicon > Upload Favicon > Upload image (the same as upload media item in Setting Image Logo)

    Step 2 - After selecting media item , click Insert into post

    - Result

  2. Image Header: To change the background of header (default template)

    - Choose the image background (by click 3 ways as mentioned above) in Image Header section

    Step 1 - Image Header > Upload image (the same as upload media item in Setting Image Logo)

    Step 2 - Result

  3. WooCommerce : Woocommerce Product Detail Images:

    - Choose the option Override: to override product details Image

    - Or choose WooCommerce Core: using the WooCommerce Product Details image (for further usage in other plugin, .e.g. to manipulate product image)

    Notes: if none of those is chosen the default value is Override

  4. Theme setting blog JV Hosting version 1.2.3

    Control to show/ hide Post Date meta of every blog item

  5. Theme setting blog single JV Hosting version 1.2.3

    Control visibility for the element of Single post:

    • Sidebar: on the left, on the right, no sidebar
    • Tag block: display Tag section below single post or not
    • Related block: display Related block below single post or not
    • Post meta: display meta of post (Category, author...) or not
    • Post navigation: display previous post, next post link below single post or not.
8. Tabs Sample data

See Sample data

Megamenu

1. Plugin

2. Setting Megamenu

- Appearance > Max Mega Menu

Notes: On CSS Output select Don't output CSS to use the menu style of Hosting theme.

3. Enabling Megamenu

Step 1 - Appearance > Menu

Step 2 - Select a menu

Step 3 - In Menu settings: Theme locations: check Primary Menu (to enable the Mega Menu settings). Then click Save Menu

Step 4 - After assigning to Primary menu Go to Mega menu settings Ensure that Option Enable is checked

Step 5 - There are also other option about: Event, Effect, Theme to set up.

4. Configuring Mega Menu

Once Mega Menu has been enabled, each menu item will a “Mega Menu” link showed when hover over.

By Clicking on the Mega Menu button will load the settings panel for the menu item:

Displaying Widgets in a Mega Menu

Select a widget to add to a Mega Menu using the selector at the top right of the Mega Menu editor. The widget selector will list all of the widgets installed on your site.

Changing the number of columns

- To edit a widget, click the down arrow on the right:

- To expand or contact : by using the button right after the title of widget (left and right arrows)

You can custom menu item icon with a css class

If you can not see the css class: Screen options > Show advanced menu properties > check CSS Classes

Flyout menu If chosen type of menu is flyout: menu will display like:

4. Video
Watch Mega menu

Widgets

1. Header widget

Header widget section is the rightside section next to the logo

Step 1 - Go to Appereance > Widgets > Header panel

Step 2 - Drag drop these item to modify the header

In the above image:

1 - Bottom Column Panel

2 - Copyright Panel

3. Shop sidebar Widget

Front end

Apperance > Widgets > Shop sidebar widgets

Modify these items easily

4. Blog Sidebar Widget

Front end:

- Appearance > Widget > Blog Sidebar Widget

- You can customize Blog sidebar widget with simple drag drop action here

Homepage

1. Classic View

Step 1 - Pages > All Pages > Select Home (with label - Front Page)

Step 2 - In Page Attributes: Select Template Page Visua No Title

Step 3 - Setting Jv Lookup domain and other elements

2. Video & Video Fullscreen

Step 1 - Pages > All Pages > Select Video

Step 2 - In Page Attributes: Select Template Page Visua No Title

The same for Video Fullscreen

3. Blog new

Step 1 - Pages > All Pages > Select Home Blog New

Step 2 - In Page Attributes: Select Template Page Visua No Title

See Blog page

4. Parrallax

Step 1 - Pages > All Pages > Select Wordpress Hosting page

Step 2 - In Page Attributes: Select Template Page Visua No Title

5. Woocommerce

Step 1 - Pages > All Pages > Select Shop page

Step 2 - In Page Attributes: Select Template Default Template

Step 3 - In Woocommerce > Settings > Products tab > Display: Select Shop page from select list (here Shop page is selected )

Step 4 - Setting Shop sidebar View widget Shop sidebar

Step 5 - Setting Product size:

Woo commerce > Settings > Display > Product Images:

  • Cataloge images: 256 x 395 px
  • Single product images: 853 x 1280 px
  • Product thumbnails: 180 x 180 px

Jv Lookup domain (jvpd)

1. Create Api key

- Step 1 : register account in Namesilo

- Step 2 : go to: Api manager, fill in your IP, check the Generate New API Key read and check API terms of use

- Step 3 : Submit. And as a result, you will get an API key

2. Setting Jv lookup

- Step 1 : Select JV lookup domain (Add new or edit)

  • Layout
  • Class suffix
  • Extension: list of the domain 's extension
  • Api key Copy and Past API from the previous Get Api key step

In frontend you will get:

Video

Watch video Jv Lookup domain

Blog Page

First, you create these Blog posts, then create Portfolio page to show these posts by adding Jv Recent post elements with these JV recent posts templates

1. Create blog post

Step 1 - Posts > Add new

Step 2 - Create a title, and insert your post content in the editing field.

Step 3 - Assign post to Category

Step 4 - (optional) Assign post to Tag and set Featured image

Step 5 - (optional) Set Gallery and Post option (for Video and Audio post)

As illustrator in the image above

  1. Gallery: used for post with a gallery inside
  2. Post Option
    • Audio: : using shortcode [jv_audio]
      e.g. : [jv_audio]https://soundcloud.com/twaynemusic/turnt[/jv_audio]
    • Video : using shortcode [jv_video]
      e.g. : [jv_video height='400']https://www.youtube.com/watch?v=586W3TF-CFA[/jv_video]
2. Create blog page

Step 1 - Pages > Add new

Step 2 - Enter Page's title

Step 3 - Setting Page attributes : select Page' Parent Blog then Page Options will shown

Step 4 - Setting Page options

Page Attributes

- Select Parent Blog

- Depend on style you want to show: there are these templates:

  • Blog-Sidebar-Left
  • Blog-Sidebar-Right
  • Blog-No-Sidebar
  • Blog-Fullwidth
Page Options

  • Select Category: Choose the category to show
  • Select Column: Number of column of blog page
  • Posts per page: Total of posts per page.
3. Blog Page Templates
Blog Left Sidebar page

Pages > All Pages > Select Left Sidebar page

In Page Attributes: Select Parent Blog Template Blog-Sidebar-Left

Blog Right Sidebar page

Pages > All Pages > Select Right Sidebar page

In Page Attributes: Select Parent Blog Template Blog-Sidebar-Right

Blog No Sidebar page

Pages > All Pages > Select No Sidebar page

In Page Attributes: Select Parent Blog Template Blog-No-Sidebar

Blog Fullwidth page

Pages > All Pages > Select Fullwidth page

In Page Attributes: Select Parent Blog Template Blog-Fullwidth

4. Blog post templates JV Recent post

Step 1: Edit a Page > Choose Backend Editor mode

Step 2: Add new element via Visual composer > Choose JV Recent post element

Step 3: Edit with these JV recent post setting Filter setting, Icon setting and Advanced setting below

Ref: see Home blog news page

Filter setting

  • Limit to Category, Limit to Taxonomy and Limit to Tag - specify which Category, Tag of post to show
  • Number of posts to show - maximum post items to show
  • Offset
  • Order and Orderby - Order direction and order

Display setting - Specify which part of post to show

- Thumbnail (relevant for Thumbnail height, Thumbnail width, Thumbnail align, Default Thumbnail), Excerpt (relevant for Excerpt Length)

- Title, Date, comment, author, category, tag, Read more (relevant for Readmore text)

Icon setting

You can use icon font here for each post's attribute if show. Available fields are: Date, Comment, Author, Category and Tags

Advanced setting

In this setting you have:

  • Title Widget Sub Title Widget
  • Template - see blog template lists of Hosting theme
  • Number of column - How many column to display in template
  • Title URL
  • CSS ID, CSS Class - Additional class, css id
  • HTML or text before the recent posts
  • HTML or text after the recent posts

Blog element template (JV Recent post) lists
  1. Blog grid
  2. Blog grid slider classic
  3. Blog grid slider
  4. Blog grid thumbleft
  5. Blog photo overlay
    ref: Used in Home page
  6. Focus top left details
  7. Focus top left details number
  8. Focus top left details slider
  9. Focus top left photo only
  10. popup video
    ref: Used in Home page
4. Blog Sidebar Widget
Blog Sidebar Widget

Portfolio

First, you create these Portfolio posts, then create Blog page to show these posts by adding Jv Portfolio elements with these JV portfolio templates

1 - Add New portfolio Post

Step 1 - Fill the title and content

Step 2 - Assign to Technologies tag in Technologies panel

Step 3 - Set featured image of your portfolio

Step 4 - (Optional) Set Porfolio info:

  • Short description - a summary of portfolio
  • Date of completion - finished date
  • Link, SVN

2 - Add New portfolio Page

Step 1 - Go to All pages > Add new

Step 2 - Insert your page's title and setting Page Attribute with Default Template

Step 3 - In Backend mode Add new JV Porfolio element

3 - Add new JV Porfolio element

In a Page > Choose Backend Editor mode

Add new element via Visual composer > Choose JV Portfolio element

1. JV Porfolio Setting

JV Porfolio Setting - General setting
  • Template: These templates are : Default, portfolio-overlay, portfolio-overlay-slider or you can Custom a new one
  • Column: Number of columns to show
  • Tags: Tags for showing
  • Limit: maximum items shown
  • Filter: show filter or not
  • Sort: Sort by value
  • Method fetch: scroll, button, navigation
JV Porfolio Setting - Element options : decide attribute of portfolio to show or not. There are:
  • Title
  • Tag
  • Date
  • Link
  • Description

2. JV Portfolio template

  1. Portfolio template: Default

  2. Portfolio template: portfolio-overlay e.g. used in portfolio-3-cols page

    Have these setting:

    • Template: portfolio-overlay
    • Column: three column
    • Elements options: show only title and tag
  3. Portfolio template: portfolio-overlay-slider e.g. used in Home Video page

    Have these setting:

    • Template: portfolio-overlay-slider
    • Column: four column
    • Elements options: show only title, tag and description

3. Custom JV Portfolio template

You can add your custom portfolio template

Step 1. Copy file shortcode.php form wp-content\plugins\jv_portfoliometa\inc to themes\jv-hosting\portfolio

Step 2. Rename the file as you want. e.g. my_portfolio_template.php

Step 3. Modify the code as you want

Step 4. Select your my_portfolio_template

WPML

The WordPress Multilingual Plugin - makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs.

You need first Configuration. Then Translating your content

More info

1.Install Plugins

- Install plugin name sitepress-multilingual-cms and wpml-string-translation in the WPML folder

- There is plugin name WooCommerce Multilingual for WooCommerce: For this plugin, you need to install also :
  • WPML 3.1.5 or above
  • WPML String Translation 2.0 or above
  • WPML Translation Management 1.9 or above
  • WPML Media Translation 2.1 or above
  • WooCommerce
2. Configuration
2.1 Choose the container of switcher

Step 1 - WPML → Languages : In Language switcher options: check panel option to add switcher in the panel of Header

Step 2 - In Appearance → Widgets: Make sure that Language Selector is dropped in the Header Panel

Result, you will get the language switcher in the header like this:

2.2. Set languages

Step 1 - Config: WPML → Languages :

Step 2 - In Site Languages: Here you can change the default langue or add / remove a language

2.3. Localize the theme

Step 1 - WPML → Theme and plugins localization

Step 2 - Choose Translate by WMPL(to use the String Translation module with the built-in translation (from .mo files))

To enable localization for your language:

1. Set the Local file name column.

2. Download the WordPress locale file from WordPress localization project (if language package does not exists) and save it to wp-includes/languages or wp-content/languages .

More info

3. Translation Content

After setting WPML you must have your contents translated into your setting language to show

3.1 Translate a page / post

Step 1 - Click on the ‘+’ icons in the posts or pages list: to create new page

Step 2 - You are creating a translation for the post/page

View more

You must also Translate categories and taxonomies

3.2. Translate Other Content

When using WooCommerce you can use Woocommerce Multilanguage for easier translation

There are also these thing to translate : Widgets and Menu

3.3. String translation

For other text in the theme (e.g. Widget title, input search placeholder...), You can use this String translation module for management

Step 1 - In WPML → String Translation

Step 2 - Insert the keyword and Filter the result by chosing Context (e.g. jv_Hosting).

Step 3 - Choose the word with Status : Not translated and click translations link

Step 4 - Translate the content then check Translation complete (if yes) and Save.

Thank you

Thank you for choosing our JV Hosting theme.

For any need do not hesitate to contact our support team via our email joomlavi.dev (at) gmail