JV Sunflower

JV Sunflower is a template developed by team Joomlavi for Joomla 2.5.

While it was designed mainly for fashion shops and similar stores, this template is also a good choice for any service with the need to display a large amount of images on the site.

As one of the first templates that run on the new JV Framework 3.0, aside from the various tools that could be found in older versions that make customization easier, JV Sunflower also boasts some new features: like a flexible layout that can fit multiple kind of devices and a new grid-base layout manager.

I. Installation

The installing process of JV Sunflower differs according to the installer being used.

There are two version of JV Sunflower that can be downloaded: Quick-start and Template.

1. Installation with Quick-start version

Quick-start installer will create an entire new Joomla site with JV Sunflower, data and all the related extensions installed, essentially a replication of JV Sunflower’s demo site.

View Quickstart Installation Details

2. Installation with template/theme version

The Template version allows JV Sunflower to be installed on an existing site (instead of creating entire new site). However, this method will not install the related extensions, making it look different from the demo site.

To install a Template version of JV Sunflower, follow the following steps:

Download JV Framework version 3.0 and the Template version of JV Sunflower
Extract any file with ‘unzip_first’ in its name.
Use Joomla’s default installer to install JV Framework like a normal extension.
Use Joomla’s default installer to install JV Sunflower template like a normal extension
In Template Manager, Set the new style/template as default by selecting it and click on the default button.

II. Managing JV SunFlower

Note: this guide does not cover how to use Template Manager, nor does it cover all the parameters and features of JV Framework.

Unlike older versions, JV Framework utilizes Template Manager instead of an independent Style Manager. This was to make the framework friendlier toward new users.

The template itself is still has a style edit page and an edit template page

1. Style Edit

To edit a style, simply click on its name in under the style section in Template Manager.

The defaults tabs found in the “Edit Style” page are:

a. Global:

This tab contains a collection of general parameters that affect the entire site.

Logo Setting: With this set of parameters, you can set an image or text logo for the site and adjust its dimension or padding. Take note that this logo will be applied to all colors choice. If you want different logos for different color choices, you have to manually replace the respective logo images with your own.
Direction: This is where you set whether your site should be read from left to right (LTR) or right to left (RTL).
Extension Cache: This is where you enable or disable the cache function for JV Framework’s extensions.
Responsive: This is where you can enable/disable responsive layout for the entire site or a particular resolution level.
Twitter Bootstrap: This is where you can enable and disable bootstrap functions in the site.

b. Style:

This tab contains the parameters that affect the styling of the site

Theme Color: This is where you can select the site’s theme color among the presets, as well as enable/disable the selector on front end.
Logo Style: This is where you can set the style parameters for your logo (if you chose Text logo for Logo Setting in Global tab)
Body: This is where you can set the style parameters for the site’s Body.
Main Content: This is where you can set the style parameters for the Main Content.
Menu Style: This is where you can set the style parameters for the menus and sub-menus.
Module: This is where you can set the style parameters for the modules.

c. Extension:

This tabs contains several set of parameters that enhance or support the Framework .

Analytics: This is where you can enable and disable analytics like Google Analytic and Yahoo Analytic.
Breadcrumbs: This is where you select the position for the breadcrumbs.
Copyright: This is where you can show/hide all the copyrights, as well as editing the site’s copyright.
Date: This is where you can enable/disable the date indicator, as well as configure it.
Font Resizer: This is where you can enable/disable the font resizer.
Lazy Loading: This is where you can enable/disable lazy loading mode.
System Message: This is where you can select the position for system message.
Go To Top: This is where you can enable/disable Go To Top button.

d. Layout:

This tab contains parameters that allow you to adjust the size ratio and configuration of the grid layout.

Layout: this is where you can select the general layout for this style (For example: left-main, left-rigth-main, right-main, right-main-left, etc), as well as adjusting the size ratio between side bars and main body.
Panel, Top, Content Top, Content Bottom, Bottom: this is where you manage the layout for the corresponding sections

e. Performance:

This tab contains features that, when enabled, can help increasing the site’s performance.

Compression: This is where you can enable/disable various mode of compression to reduce the size of transmitted data. These modes also utilize a smart compression process to avoid interfering with the site loading speed.
Flexible Image: Allows you to enable and disable Flexible image. This is a function that will automatically detect your screen size and resize the image to fit it better.

f. Menu:

This is the tab that allows you to customize the menus.

Flex: this is where you can configure flex menus

g. Mobile:

This is where you can enable, disable or setup the mobile-exclusive layout for JV Sunflower .

All Mobile: This configuration will be applied to all mobile devices.
I-phone: This configuration will be applied to I-phone mobile devices.
Android: This configuration will be applied to mobile devices using Android.

h. 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 one.

2. Template Edit

With the Template Edit provided along with JV Framework, you will be able to edit, delete, create and upload files and folders easily.

To open template edit page:

In template manager, click on JV Sunflower’s name in the “Template” column. This will open Customise Template page.

On the Customise Template page, click on “Edit Template” to open the Editor.

III. Extensions

III.1 JV Slider pro

a. Introduction:

JV Slide Pro is a Joomla photo slide module developed by team Joomlavi. It incorporates several display modes from other Slide-type modules.

b. Where to find:

JV Slide Pro is currently an exclusive extension for templates, thus you won’t be able to find it on our extension page. It will be included in the extension package for JV Sunflower though.

c. Setting up JV Slide Pro:

This part will show how JV Slide Pro module was setup in the quickstart version, so that those who weren’t quick-start user can make their site as close to the demo as possible.

To set up JV Slide Pro:

Create a folder (<images /slideshow> in the quick-start version) and upload the images you need to it
Create a module using module type JV Slide Pro, or utilize the default one created upon installation.
Assign the module to position ‘slide2’ on home page.
Configure the modules according to the following screenshots:

Front-end appearance:

III.2 JV contact

a. Introduction:

A joomla contact module developed by team Joomlavi. Beside normal contact messages, it also features functions like social buttons and google map. In the case of this template, JV Contact is used for both the contact form and google map.

b. Where to find:

JV Contact module can be found on:

https://www.joomlavi.com/joomla-extensions/jv-contact-2.html

or you can get it from the extension package of JV Sunflower.

c. Setting up JV Contact:

This part will show how JV Contact module was setup in the quickstart version, so that those who weren’t quick-start user can make their site as close to the demo as possible.

To set up JV Contact:

Create a new module using module type JV Contact, or make use of the module that was created upon installation
Rename the module “JV Contact” and assign it to position ‘contact’ on “all” pages (menu item single contact)
In Basic Options, enter the Header text you want.
In the ‘Form & Fields’ tab, Enable ‘Show Form’ and ‘Title in Field’, then add the custom fields: “Name”, “Email”, “Phone” and “Message” with matching titles.
In the Google Map tab, select ‘Yes’ for the parameter ‘Show Google Map’ and adjust the parameters.
Create an article named “Contact”, then input the following in html code form: <div></div>

Front-end appearance:

Virtuemart

a. Introduction:

Virtuemart is a well known open-source e-commerce solution for Joomla.

b. Where to find:

Virtuemart can be found on:

https://virtuemart.net/

c. Setting up Virtuemart:

Please note that we do not own Virtuemart, so all questions regarding how the component work should be directed to the correct developer.

To replicate the demo site:

Create about 5 products categories in Virtuemart (socks, shirt, accessories, pants, harness in the quick-start)
In Main menu, create 5 menu items using the “VirtueMart » Category Layout” menu item. Select one product category to each menu item.
In the hidden menu, create the home page using “VirtueMart » Front page”
Create the following modules:

- 1 module using “Virtuemart Category” module type, rename it “VM – Category” and assign it to position ‘right-1’ on all pages except “Home”, “Contact Us” and “Style”.

- 2 modules using “Virtuemart Products” module type, rename them “Best Sales” and “Random Products”. Assign “Best Sales” to the position ‘bottom-1’ on all pages. Assign “Random Products” to position ‘right-1’ on all pages except “Home”, “Contact Us” and “Style”.

- 1 module using “Virtuemart Search Product” module type, rename it “VM-Search in Shop” and assign it to position ‘search’ on all pages.

- 1 module using “Virtuemart Shopping Cart” module type, rename it “VM-Shopping cart” and assign it to position ‘cart’ on all pages.

Set up the modules:

- Set the parameter “Parent Category” to ‘Top Level Category’ for “VM – Category” module.

- Set the parameter “Display” to ‘Best Sales’ and ‘Random Products’ for the modules of the same names.

Front end: