JV Framework 3.0

The Global Setting brings you the ability to configure for Theme and Layout. This allows to change logo type, select layout type as responsive or fixed width. Also there are many more options like copyright text, enable or disable several options like joomla credit link and go to top link.

This guide is intended to show you how to use JV Framework: Installation, Backend Settings, Mega Menu, Advanced features... 

Introduction

JV Framework 3.0 is a developer-friendly component. We offer several features that support any developer interested in developing templates that utilize our Framework or extending its functionality:

- A basetheme system that allow Inheriting and Overriding. 

- Allow you to config the theme's structure flexibly, a function that can be used to expand the library for Framework.

- JV Framework functions by utilizing several different JV FW Extensions, and it allows you to add new ones or customize existing extension. It also provide the necessary library to make this process easier.

These default and custom extensions will help broaden the functions of the theme.

1. Features:

tick button Responsive web design

tick button Mobile custom layout

tick button HTML5 & CSS3

tick button Integrated Twitter Bootstrap 

tick button RLT Language support

tick button Utilize HTML layout

tick button Each theme has its individual configurations

tick button Allow a theme to inherit layout, style, etc from other themes

tick button Allow users to override and custom layout

tick button HTML layout, blocks, modules can be controlled fluidly 

System Requirement

1. Server:

Software: PHP 5.3.+

Database:  

MySQL 5.1+

MSSQL 10.50.1600.1+

PostgreSQL 8.3.18+

Web Server:

Apache 2.x+

Microsoft IIS 7+

Nginx 1.0(1.1 recommended)

2. Browser Compatibility

Firefox 4+

Google Chrome 10+

Opera 10+

Safari 5+

3. Development Environment:

We recommended the following local configurations in development process. You can use the following servers in your PC to develop your site.

Windows: 

Wamp Server

Xampp for windows

Linux: 

Lamp Server

Xampp for Linux

Mac OS: 

Mamp and Mamp Pro

Xampp for Mac OS

 


 

Download

Sign up for a free membership account, Log into our site, go to JV Framework  where you download JV Framework. 

Click on download button to go download area.

 

InstallATION

1. INSTALLATION WITH QUICK-START VERSION

JV Framework quickstart package is a complete JV Framework demo site package with sample data and JV Melody III Template and extensions. 

Take the following steps to clone the demo site:

✔ Step 1:  General configuration

Select language, enter required information then click next

✔ Step 2: Database configuration

In this step, you need to provide correct information for a successful installation: Database type, Hostname, User name, Database name and the Table Prefix

✔ Step 3: Install Sample Data

If you install sample data, you will have a site like our Demo. Click Install to continue.

It may take a few minutes to install

Joomla quickstart installation - installing sample data

✔ Step 4: Remove or rename installation folder

Click on "remove installation folder" or you can go inside your Joomla! and rename the installation folder

 

2. Manual Installation

 Install JV Framework

You just need to install component package, the package,  includes JV Melody template, JV Framework system plugin, JV Libaries

After successfully installation, JV Libraries and JV Framework system plugin are enabled themselves.

Note! If you install JV Framework manually on your Joomla! you will have JV Melody III template installed. But obviously, you may need to install your own template 

 Set JV Melody III as default template

Go to Extensions >> Template Manager, set JV Melody III as your default template

 


 

Global Settings

The Global Setting allow you to change logo type, select layout type. Also there are many more options like copyright text, enable or disable several options like joomla credit link and back to top link.

In the picture above, click on Jv-Melody-III-Default, select tab Global Settings:

✔ Layout:

You select layout for the template (Default, Left-Right-Main, Main-Left-Right, Mobile)

✔  Logo Settings:

You can select logo type between:

Images: Select an logo from Media Manager

Text: If you select logo type as text you can add the logo text and slogan

✔ Direction RTL: disable or enable Right To Left language layout mode. Disabled by default

✔ Cache: you can disable/enable/ clear cache

✔ K2 CSS: disable/enable K2 CSS

✔ Full HD: disable/enable full HD

✔ Compression: With in this option you can do the followings:

- Enable/disable CSS and JS Compression: if enabled all CSS and JS files will be combined into one and then compressed. When users who visit the site will load this compressed file. For all subsequent visits, the site will be loaded from the browser cache instead, do not forget to clear cache before making any change to the setting to apply the new settings immediately.  

- Enable/disable deferring loading of Javascipt: if enabled the deferring loading of JavaScript reduces initial download size, ease the burden of browser on page load

- Enable/disable GZIP page compression: if enable this will reduce the amount of transmitted data, save bandwidths and speed up your site 

✔ Go to top: disable/enable Back to top button in frontend

✔ Copyright: In this option, you can:

- Show/hide your copyright

- Show/hide Joomla copyright

- Show/hide JV Framework Logo


 

Google fonts

This tab allows you to add google front easily. 

Click "add" button to add a new font. You can assign a font to many selectors, but you can only select 1 font in a box. 

 In the box, select a font and add CSS selectors


 

Style

✔ Module Color: this sections is used to display module color in demo, you can enable/disable the module, set position for the module

✔ Theme Color: select a color theme 


 

Mega Menu 

This tab allows you to configure parameters for Mega Menu like delay time, duration, you can also select effect and easing for Mega Menu

- Main configuration: configure main menu (delay, duration, effect, easing)

- Sub configuration: configure sub menu (delay, duration, effect, easing)

- Menu Responsive: select width for responsive menu ( in pixel )

Mega Menu sample in front-end:

Take the following step to build a Mega Menu in your Joomla 3 with JV Framework 3.0 like the sample above:

✔ Step 1: Create new menu items

In the back-end, navigate to Menus >>Main Menu >> Add New Menu Item

Fill in necessary field and select Menu Item Type...

You need to repeat this step several times until you get all your desired Mega Menu. Sub-menu can be created the same way, but you have to select the correct Parent Item field to coordinate your sub-menus. Below are menu items in back-end after creating to build Mega Menu sample.

 

So far, we have the following Mega Menu in front-end:

 

✔ Step 2: Create new modules

What you need to achieve to get a mega menu like our demo: display sub-menu groups and modules in the menu item "Menu Group".

You need to create new modules before adding them to menu item (represented in step 3). In the menu item "Menu Group" we used 2 modules: Search and Custom HTML module. You can create more modules to add the different menu items

Go to Extensions >> Module Manage, and create a custom HTML module and Search Module: 

If you are new, You can view How to create a custom HTML

If you are new, You can view How to create a Search Module

✔ Configure your Mega Menu

Once you created menu items and modules the last step you need to do is going to each menu item to configure:

- Go to menu item "Menu Group", click on tab Flex Menu Option, then select menu item type: menu item; submenu column: 4 

 - Go to menu items: Title Group 1, Title Group 2, Title Group 2, Title Group 3, configure as the same: select menu item type: group, submenu column: 1.

- Go to menu item "Module Submenu": select Menu item type: Group; submenu column: 2; width: 860px.

- Go to menu item "Module Custom HTML": select Menu item type: Module; Modules: Responsive Design; width: 640px.

 

- Go to menu item "Module Search": select Menu item type: Module; Modules: Search; 

That's it!  If you need to further custom the menu, everything is ready in: templates\jv-melody-iii\css\menu.css

Note: That's just about taking JV Melody III as an example to walk you through how to build a mega menu. You can build your own mega menu with more compatibility! 


 

Grid Layout

This is one of important features allowing you to control over your template layout. It allows you to change width ratio of allows you to control the width of almost all elements on the page. 


 

Extension

 In this tab, you can enable/disable/config extensions: Date, Font Resizer, Google Analytics, Yahoo Analytics, Lazy Loading

 

 


 

Custom JS

 In this tab, you can add custom JS to certain part of the site using class or id.

custom javascript


 

Related articles

This tab allows you to configure the Related Article features (show related article underneath the one being read).

related articles

 


 

Assign

If this style is not the default one, this is where you can assign which page will utilize this style instead of the default style.

assign template

assign template