Capitol

Creative Multi-Purpose Joomla Template v1.0.0

Created Date: 30/09/2015 - By: joomlavi - Email: dev@joomlavi.com

Thank you for purchasing my 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 or to my
support forum at http://joomlavi.com/forum. Thanks so much!

Installing

1. Installing the quickstart package.

The quickstart package is basically a clone of my demo preview, a package of Joomla, Capitol template, Components, Modules, plugins, libraries, etc all of these already installed. All you need to do is to unzip to your host, create a fresh database and just follow the quick install steps. That's it, only 5 min and you have a full working website. This solution is mostly for users who will start a fresh website.

After finishing this quickstart installation, you only need to edit or add text, logo, product images and information, menu, new articles... in the back-end.

Step 1: Download Quicktart

Please download mainfile package on themforest, when extracting file, you will see jv-capitol-quickstart-vx.x.x package.

Step 2: Extract & Upload Quickstart Package

- If you install Capitol on your localhost for testing or development: just copy the folder to …\xampp\htdocs (If you are using XAMPP) or….\wamp\www (If you are using WAMP)
- If you install Capitol on your actual server:
Unzip the files into your host, eg: www.yourwebsite.com would be just into public_html/ ; www.yourwebsite.com/hidden_test_folder/ would be in public_html/hidden_test_folder
You can upload files via FTP using a client application like Filezilla or via cPanel -> File Manager -> Upload file(s).

Step 3: Create Database

Create a fresh database. (Tutorial for cPanel, Tutorial for Phpmyadmin)

Step 4: Run installation

Now it's time to start with the installation process. If you have uploaded installation files in your root directory you just need to go to http://yourdomain.com or subdomain (i.e http://yourdomain.com/capitol) in your browser and get started.
You will see the first screen where you enter necessary information:

- Enter the your site's name. This for the first heading of your index.
- Enter a short description of your website.
- Enter a valid email address for system messages and password recovery.
- Enter admin username.
- Enter a password.
- Select whether your site should be taken offline after the installation process is completed.

Click "Next" to continue the installation process.
The next screen you will see is about Database Configuration:

- By default this value is set to MySQLi, but you can select MySQL
- Leave the default localhost value.
- Enter the database username, which you created in step 3.
- Enter the password for the database username, which you created in step 3.
- Enter the database name, which you created in step 3.
- This is used to add to all of database tables. If you want to host many Joomla sites on a single database. You should leave the default value.
- If you have any existing databases. You can select "remove" or "backup" any existing data. You should leave this option "Backup" since it is the safest choice

Click to proceed installation.

The next screen you will see is "Overview". In the first part, you can specify if you want install sample data on your server. We recommend you to choose the option, which helps build your actual website cloning Capitol Demo.

Click to start the real Joomla installation.

In the next screen, you will see Joomla Web Installer is installing....

On the last screen of the installation process you need to press button or you can rename the installation folder. Note that you can't use your site unless you remove this folder completely!

Access your administrator eg: www.yourwebsite.com/administrator/ , login and go to . Here look at the tab called and make sure all the folders listed are green "Writable". If not change their permissions to 755 for folders (or in some rare servers try 757) and files to 644 (the same in some rare servers try 646).

Also, Joomla recommends the php option Display Errors to be disabled. Some servers have this option enabled. The advantage is you can change this settings from the Global Configuration, 3rd tab called Servers. There is an option there, Display Errors, and set it to None.

2. Installing standalone Version.

Install Joomla by downloading from here http://www.joomla.org or by installing it from your cPanel Fantastico.

Download package Capitol on themeforest. In this package, we have already archive needle files to install Jv Capitol. Including JV Framwork, Plugin, Module... About K2 Component - please kindly download at this address: http://getk2.org/. Download Virtuamart at http://virtuemart.net/.

The way to Upload & Install Joomla Extension you can watch it here:Upload & Install Joomla Extension

The setting Template, Components, Module, Plugin... You will be introduced at the next version of this file.

Also it would be recommended that you install a full clone install (quick start) in a temporary path, to see the contents of the articles, settings etc.
I personally don't like this method because it's a bit harder to set it up, but i'm sure you know what you are doing.

The installation JV Framework is comppulsory to use Capitol Template.

Template Customization

You can manage the template by Navigating to

- Click on the name of the template in the Style column to edit style with our powerful JV Framework 4.0
- Click on the name of the template in the Template column to edit core files

Styles column refers to changing the available parameters of a template, such as color, font-color, logo... These are dependent on the parameters a template maker made available and are a convenience for quick changes. Template - column refers to editing the actual template files.

1. Edit Style via JV Framework

Accessing to Edit Style you can edit Galaticos style with JV Framework. This area includes 10 tabs:

You can reset all settings to default by click on in the top right corner. Now we will go to each tab to find out more.

1.1. Overview Tab

This tab contains general information of JV Framework and the template.

You can change the name of style
Displaying Template's ID
Template name
Version of template

1.2. Global Tab

This tab contains a collection of general parameters that affect the entire site.
The sets of parameters that can be found in this tab are:

Choose Yes for activating Develop Mode. At that time you will edit LESS instead of CSS
Choose logo type (images/type). You can upload your own logo, add Logo text, slogan
Select layout for the template ( default/Left-Right-Main/Main-Left-Right/Mobile).
Yes/Auto/No RTL mode. Yes If using RTL. In case of using multi-langues, please chooseAuto template will work base on the displayed language.


Allow you to select the type of layout that will be used when accessed from a mobile device. In case of you chooseMobilesome position will be rejected. You must be consider carefully before using this option.
Enable/disable Support Retina mode.
This is where you enable/disable the cache function for JV Framework’s extensions or clear the cache.
Allow you to optimize the site performance by utilizing various types of compression.
Enable/disable Go to top button
Allow you to enable/disable and modify copyright information.

1.3. Google Fonts Tab

In this tab, you can easily apply google font to your contents.Click to add font. Every panel can choose 1 font. You can create many different panels for collerative fonts.

Title font
You can search and choose the fonts which Google Font has already provided.
After choosing font at the list of font weights will be updated atomatically. You should choose the needle font weight, Using many fonts weight can slow down your webpage
Choose the target which use font.

1.4. Style Tab

This tab allows you to edit template color

We support 4 basic layout style: (default), , and
Choose colour & pattern background, pattern background you can replace the default images by overwriting the image of folder.. Note: This class is just used for style layout: , and
This Option choooses the displaying and positions of module.

This is basic choosing of template.
It will help you enter general class for all of website. Capitol provide 2 classes available for header style: blank (default) and header-white
enable/disable custom theme color mode
If enabled, you can easily add your own color to classes, ids, heading, paragraph... Simply edit colors with color box and assign selector: background or border or color. You can also edit classes, ids... in the box

Click to add and style new classes, ids...

1.5. Mega menu Tab

This tab allows the user to configure the Megamenus and their sub-menus used in Galaticos, as well as the menu responsive

Please enter the width value and turn megamenu sang mobile menu. Here, we will set the value is 992. That means with max width 992px template will display mobile menu. Please view the image below.

1.5. Grid Layout Tab

This tab allows you to adjust the size ratio of the grid layout. This feature is ultized from Bootstrap 3

This Tab works like this: The default template just support when those positions are changed. Each postion provide 6 postion inside it, for example: position button have bottom-1, bottom-2, bottom-3, bottom-4, bottom-5, bottom-6; The green - round button is the number of displaying positions:(It's included Modules). The drag part below is the size choosing of this module.

1.6. Extension Tab

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

enable/disable the date indicator, as well as configure it.
enable/disable the font resizer.
enable/disable Google Analytic.
enable/disable Yahoo Analytic.
enable/disable lazy loading mode.

1.7. Custom JS Tab

This Tab will support for you to create Carousel with OWL Carousel

Please choose the version plugin OWL Carousel
Initializing Carousel with different customizations.

Name of JV Carousel
element you want to Carousel. Is spaced with,
Please watch those options of OWL Carousel v1.3.3 at here, v2.0 at here. Then choosing needle customized options. As the picture above. If you not do this, the value will be default.

1.9. Assign Tab

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.

Below are some examples of style default, and assign

1.9. Scrolling Effect Tab

This is the new feature added in JV Framework 4.x, with this tab, you can create scroll effect for each page. Each element will appear within its relative distance from the perspective of the visitor. Simply add selectors and config parameters.

CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.
A string or number determining how long the animation will run.
Set a timer to delay execution of subsequent items in the queue.
Get the current coordinates of the first element in the set of matched elements, relative to the document.
Set repeat timer effect.
Some specific effects. Let's watch this demo here:
Enable/disable on mobile
Set a timer to delay execution of subsequent items in group
Selector of those sub- selectors
Turn the effect opposite with the original between some items in group.

2. EDIT CORE FILES

Go to click on Jv-Capitol in template column.

2.1. HTML STRUCTURE

The template's grid/html structure and features are based exclusevely on Bootstrap http://getbootstrap.com/
It would be very wise to use Firebug (in Firefox) or Developer Tools (in Chrome), it will surely make your life easier.

2.2. CSS STRUCTURE

Capitol Template uses these css files which are located in templates/jv-capitol/css/ folder:

template.css - this is the main css stylesheet that contains most of the important styles
template.rtl.css - this is the main css stylesheet rtl direction that contains most of the important styles
menu-touch.css - this is the menu mobile css stylesheet styles
menu-touch.rtl.css - this is the menu mobile css stylesheet rtl direction styles

custom.css - We added this stylesheet for YOU to add code in it. Please try using only this stylesheet and override rules from other stylesheets. Why? Because i will probably add future updates so in order for not overwriting your rules changed in template.css it's better to add your own code in this stylesheet. Backup this file before update template

2.3. JS STRUCTURE

This theme uses both Mootools and jQuery (less mootools). Most extensions i used are jquery build which is way better in my oppinion.

Most of the js files are located in templates/jv-capitol/js/ folder

We have included a custom coded js. It's name is script.js

Shortcode

Shorcode is the main support when creating page in JV Capitol. It is developed and reserved for this template. We dont need to explain more about how to use it. Basically, It is easy to use and visual. Below are some actual image of Plugin ShortCode Capitol.

At footer content, please click on button to open Shortcode Panel
A Popup appear include: An Enter class to quickly find shortcode. Below are list of Capitol support shortcode(We will optimize and add some shortcodes in the next version.).

When choosing a shortcode from the list, you will have a panel: Here will have some value class for your to choose or enter easily. It is included components like the picture above. It is search tool for searching and come back to shortcode list.
Below are breadcrumb and button
Below are some Value class for you to choose or enter:

Below is the tools group:
- After entering your values, please click on this button to insert shortcode in the context.
- It is the same with button Live Priview at the top of this page. It provide the preview version of ShortCode; Some Shortcode neither support for this functions nor effectively working, please infer at the frontend you should view at Frontend to see the last result.
- Scroll at the top panel
- This value is really helpful. It will save all of your setting for using later.next time. For example: When setting a shortcode tab, you will save it with name "Preset 1". When creating a new page. -> You will need to open shortcode. Go to Presets -> Choose "Preset 1" you will gain the shortcode which you have created before.

1. Headings

[jv_heading style="default" heading_text="Lorem ipsum" heading_tag="h3" heading_size="0" heading_class="class" sub_text="Lorem ipsum dolor sit amet" sub_text_size="0" sub_text_class="" align="none" class="class"]

- Choose style headings
- Enter heading text
- Tagname element. h1. h2, h3, h4, h5
- Heading size. Using the value 0 if we use css to set up size
- Enter heading class. Ex: text-primary, text-bold, text-uppercase, text-italic. mt-10 ...
- Enter subtext
- Sub text heading size. Using value0 if you you css to size
- Enter sub text class. Ex: text-primary, text-bold, text-uppercase, text-italic. mt-10 ...
- Set text align: none, left, center, right
- General class for heading

a. Headings Default
Preview Get shortcode
Default style
                            [jv_heading 
  style="default" 
  heading_text="Lorem ipsum" 
  heading_tag="h3" 
  heading_size="0" 
  heading_class="class" 
  sub_text="Lorem ipsum dolor sit amet" 
  sub_text_size="0" 
  sub_text_class="" 
  align="none" 
  class="class" 
]
                            
d. Headings Style 3
Preview Get shortcode
Style 3
                            [jv_heading 
  style="style3" 
  heading_text="Heading text" 
  heading_tag="h1" 
  heading_class="" 
  heading_size="0" 
  align="none"
][/jv_heading]
                            
b. Headings Style 1
Preview Get shortcode
Style 1
                            [jv_heading
  style="style1" 
  heading_text="Latest works" 
  heading_tag="h1" 
  heading_class="text-bold text-uppercase font-montserrat" 
  sub_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse" 
  sub_text_class="text-italic font-playfair" 
  sub_text_size="18" 
  align="center"
][/jv_heading]
                            
e. Headings Style 4
Preview Get shortcode
Style 4
                            [jv_heading 
  style="style4" 
  heading_text="Heading text" 
  heading_tag="h1" 
  heading_class="" 
  heading_size="0" 
  sub_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." 
  sub_text_class="" 
  sub_text_size="0" 
  align="none"
][/jv_heading]
                            
c. Headings Style 2
Preview Get shortcode
Style 2
                            [jv_heading 
  style="style2" 
  heading_text="Latest works" 
  heading_tag="h1" 
  heading_class="text-bold text-uppercase font-montserrat" 
  heading_size="36" 
  sub_text="In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo. Morbi fringilla massa placerat neque bibendum porta. Integer a iaculis tortor. Maecenas sollicitudin dolor pulvinar." 
  sub_text_class="font-raleway" 
  sub_text_size="15" 
  align="center"
][/jv_heading]
                            

2. Buttons

[jv_button style="success" size="sm" outline="yes" center="yes" block="yes" icon="icon:paperclip" icon_placement="before" link="http://joomlavi.com" target="_blank" onclick="" class=""]Button[/jv_button]

- Choosing style button
- Size button: xs, sm, md of empty, lg
- enable/disable outline style
- enable/disable center align
- enable/disable block button style
- button icon. syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- Setting the position of icon, before or after text
- hyperlink of button
- set button link target: Current tab/window, New tab/window and Popup
- Advanced JavaScript code for onClick action
- Extra CSS class of button

Button size
Preview Get shortcode
Size
                            [jv_button style="general" size="xs"]Button[/jv_button]
[jv_button style="general" size="sm"]Button[/jv_button]
[jv_button style="general"]Button[/jv_button]
[jv_button style="general" size="lg"]Button[/jv_button]
[jv_button style="general" size="lg" icon="icon:paperclip" icon_placement="before"]Button[/jv_button] 
[jv_button style="general" size="xs" outline="yes"]Button[/jv_button] [jv_button style="general" size="sm" outline="yes"]Button[/jv_button] [jv_button style="general" outline="yes"]Button[/jv_button] [jv_button style="general" size="lg" outline="yes"]Button[/jv_button] [jv_button style="general" size="lg" outline="yes" icon="icon:paperclip" icon_placement="before"]Button[/jv_button]
[jv_button style="primary" size="xs"]Button[/jv_button] [jv_button style="primary" size="sm"]Button[/jv_button] [jv_button style="primary"]Button[/jv_button] [jv_button style="primary" size="lg"]Button[/jv_button] [jv_button style="primary" size="lg" icon="icon:paperclip" icon_placement="before"]Button[/jv_button]
[jv_button style="gray" size="xs" outline="yes"]Button[/jv_button] [jv_button style="gray" size="sm" outline="yes"]Button[/jv_button] [jv_button style="gray" outline="yes"]Button[/jv_button] [jv_button style="gray" size="lg" outline="yes"]Button[/jv_button] [jv_button style="gray" size="lg" outline="yes" icon="icon:paperclip" icon_placement="before"]Button[/jv_button]
Button color
Preview Get shortcode
Color
                            [jv_button style="info" size="xs"]Button[/jv_button]
[jv_button style="success" size="sm"]Button[/jv_button]
[jv_button style="warning"]Button[/jv_button]
[jv_button style="danger" size="lg"]Button[/jv_button]
[jv_button style="info" size="xs" icon="icon:paperclip" icon_placement="before"]Button[/jv_button] [jv_button style="success" size="sm" icon="icon:paperclip" icon_placement="before"]Button[/jv_button] [jv_button style="warning" icon="icon:paperclip" icon_placement="before"]Button[/jv_button] [jv_button style="danger" size="lg" icon="icon:paperclip" icon_placement="before"]Button[/jv_button]
[jv_button style="info" size="xs" outline="yes"]Button[/jv_button] [jv_button style="success" size="sm" outline="yes"]Button[/jv_button] [jv_button style="warning" outline="yes"]Button[/jv_button] [jv_button style="danger" size="lg" outline="yes"]Button[/jv_button]
[jv_button style="info" size="xs" icon="icon:paperclip" icon_placement="before" outline="yes"]Button[/jv_button] [jv_button style="success" size="sm" icon="icon:paperclip" icon_placement="before" outline="yes"]Button[/jv_button] [jv_button style="warning" icon="icon:paperclip" icon_placement="before" outline="yes"]Button[/jv_button] [jv_button style="danger" size="lg" icon="icon:paperclip" icon_placement="before" outline="yes"]Button[/jv_button]
Button block
Preview Get shortcode
Color
                            [jv_button style="general" size="xs" block="yes"]Button[/jv_button]
[jv_button style="general" size="sm" block="yes"]Button[/jv_button]
[jv_button style="general" block="yes"]Button[/jv_button]
[jv_button style="general" size="lg" block="yes"]Button[/jv_button]

                            

3. Columns

[jv_columns class="column_class"]
[jv_column class="jv-column col-xs-6 col-sm-6 col-md-6 col-lg-6"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit.[/jv_column]
[jv_column class="jv-column col-xs-6 col-sm-6 col-md-6 col-lg-6"]Tincidunt ut laoreet dolore magna aliquam erat volutpat.[/jv_columns]
[/jv_columns]

- Set number of columns. Click number button to set how many columns you want. Click arrow button to merge the column with next one
- Extra CSS class

Preview Get shortcode
Columns
                            [jv_columns class="column_class"]
  [jv_column class="jv-column col-xs-6 col-sm-6 col-md-6 col-lg-6"]Lorem ipsum dolor sit amet.[/jv_column]
  [jv_column class="jv-column col-xs-6 col-sm-6 col-md-6 col-lg-6"]Lorem ipsum dolor sit amet.[/jv_columns]
[/jv_columns]

                            

4. Lists

[jv_orderlist list_style="icon" icon="icon:question-circle" icon_color="#444" class=""]
[jv_li]Lorem ipsum dolor sit amet [/jv_li]
[jv_li]consectetur adipisicing elit[/jv_li]
[jv_li]sed do eiusmod tempor [/jv_li]
[jv_li]incididunt ut labore et dolore [/jv_li]
[jv_li]magna aliqua[/jv_li]
[jv_li]Sed ut perspiciatis unde [/jv_li]
[/jv_columns]

- Shoose list style: none, o-circle, o-square, o-decimal, o-decimal-leading-zero, o-alphabet, o-alphabet-upper, icon, m-decimal and m-alphabet
- button icon (only style icon). syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- Set icon color
- Extra CSS class

Preview Get shortcode
List
                            [jv_orderlist list_style="icon" icon="icon:question-circle" icon_color="#444"]
  [jv_li class=""]Lorem ipsum dolor sit amet [/jv_li] 
  [jv_li class=""]consectetur adipisicing elit[/jv_li] 
  [jv_li class=""]sed do eiusmod tempor [/jv_li] 
  [jv_li class=""]incididunt ut labore et dolore [/jv_li] 
  [jv_li class=""]magna aliqua[/jv_li] 
  [jv_li class=""]Sed ut perspiciatis unde [/jv_li]
[/jv_orderlist]

[jv_orderlist list_style="icon" icon="icon:angle-right"  icon_color="#444"] 
  [jv_li class=""]Lorem ipsum dolor sit amet [/jv_li] 
  [jv_li class=""]consectetur adipisicing elit[/jv_li] 
  [jv_li class=""]sed do eiusmod tempor [/jv_li] 
  [jv_li class=""]incididunt ut labore et dolore [/jv_li] 
  [jv_li class=""]magna aliqua[/jv_li] 
  [jv_li class=""]Sed ut perspiciatis unde [/jv_li]
[/jv_orderlist]

[jv_orderlist list_style="o-decimal"]
  [jv_li class=""]Lorem ipsum dolor sit amet [/jv_li] 
  [jv_li class=""]consectetur adipisicing elit[/jv_li] 
  [jv_li class=""]sed do eiusmod tempor [/jv_li] 
  [jv_li class=""]incididunt ut labore et dolore [/jv_li] 
  [jv_li class=""]magna aliqua[/jv_li] 
  [jv_li class=""]Sed ut perspiciatis unde [/jv_li]
[/jv_orderlist]
[jv_orderlist list_style="icon" icon="icon:pencil" icon_color="#444"] [jv_li class=""]Lorem ipsum dolor sit amet [/jv_li] [jv_li class=""]consectetur adipisicing elit[/jv_li] [jv_li class=""]sed do eiusmod tempor [/jv_li] [jv_li class=""]incididunt ut labore et dolore [/jv_li] [jv_li class=""]magna aliqua[/jv_li] [jv_li class=""]Sed ut perspiciatis unde [/jv_li] [/jv_orderlist]

5. Label

[jv_label background_color="#00b2b2" font_size="13" border_radius="3" text_color="#fff"]

- Set background color
- Set label font size
- Set border radius
- Set text color
- Extra CSS class

Preview Get shortcode
Label
                            [jv_label background_color="#00b2b2" font_size="13" border_radius="3" text_color="#ffffff"]consectetur adipiscing[/jv_label]
[jv_label background_color="#333" font_size="13" border_radius="0" text_color="#ffffff"]hend merit non sed[/jv_label]
[jv_label background_color="#339b62" font_size="13" border_radius="25" text_color="#ffffff"]Proin egestas diam[/jv_label]

6. Tooltips

[jv_tooltip tooltip_text="Tooltip Text" placement="top" font_size="12" border_radius="30" background_color="#111111" text_color="#111" class="text-semi-bold"]Hover here to see tooltip[/jv_tooltip]

- Set tooltip content
- Set tooltip placement
- Set tooltip font size
- Set tooltip border radius
- Set tooltip background
- Set a class if you want to custom style for tooltip such as: background-color
- Set color for the text that has tooltip
- Extra CSS class

Preview Get shortcode
Tooltips
                            [jv_tooltip tooltip_text="Tooltip Text" placement="top" font_size="12" border_radius="30" background_color="#111111" text_color="#111" class="text-semi-bold"]Hover here to see tooltip[/jv_tooltip]
                            

7. Dropcaps

[jv_dropcap style="square" size="4" text_color="#fff" background_color="#444" class="text-semi-bold"]L[/jv_dropcap]

- Set dropcap style: default, square, circle, rounded
- Set dropcap size
- Set dropcap text color
- Set dropcap background
- Extra CSS class

Preview Get shortcode
Dropcaps
                            [jv_dropcap style="default" text_color="#444" size="5" class="text-semi-bold"]L[/jv_dropcap]

[jv_dropcap style="square" size="4" text_color="#fff" background_color="#444" class="text-semi-bold"]L[/jv_dropcap]

[jv_dropcap style="circle" text_color="#fff" background_color="#33aaea" size="4" class="text-semi-bold"]L[/jv_dropcap]

[jv_dropcap style="rounded" size="4" text_color="#fff" background_color="#74c8b8" class="text-semi-bold"]L[/jv_dropcap]
                            
                            

8. Blockquotes

[jv_quote style="default" width="0" author="Author name" author_url="http://joomlvi.com"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.[/jv_quote]

- Set blockquote style: default, light, dark
- Set width in pixels. Leave it 0 for responsive moder
- Set author name
- Set author URL
- Extra CSS class

Blockquote default
Preview Get shortcode
Blockquote default
                            [jv_quote style="default" width="0" author="Author name" author_url="http://joomlvi.com"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.[/jv_quote]
                            
Blockquote Light
Preview Get shortcode
Blockquote Light
                            [jv_quote style="light" width="0" author="Author name" author_url="http://joomlvi.com"]In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo. Morbi fringilla massa placerat neque bibendum porta.[/jv_quote]
                            
Blockquote Dark
Preview Get shortcode
Blockquote Dark
                             [jv_quote style="dark" width="0" author="Author name" author_url="http://joomlvi.com"]In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo. Morbi fringilla massa placerat neque bibendum porta. [/jv_quote]
                            

9. Message box

[jv_messagebox style="info" font_size="13" icon="images/icon/icon-info.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text.[/jv_messagebox]

- Set message style: info, warning, success, danger
- Font size for text
- button icon (only style icon). syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- Show/Hide Close button
- Extra CSS class

Preview Get shortcode
Message box
                            [jv_messagebox style="info" font_size="13" icon="images/icon/icon-info.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text. [/jv_messagebox]

[jv_messagebox style="warning" font_size="13" icon="images/icon/icon-warning.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text.[/jv_messagebox]

[jv_messagebox style="success" font_size="13" icon="images/icon/icon-faq.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text.[/jv_messagebox]

[jv_messagebox style="danger" font_size="13" icon="images/icon/icon-danger.png" close="no" class="text-uppercase font-montserrat"]I am message box. click edit button to change this text.[/jv_messagebox]
                            
                            

10. Action Box

[jv_actionbox
style="dark"
icon="icon:7s-portfolio"
icon_size="48"
heading_text="Want to see more amazing works?"
heading_tag="h4"
heading_size="0"
heading_class="text-bold text-uppercase font-montserrat"
button_text="Subscribe US"
button_style="default"
button_color="default"
button_link="http://joomalvi.com"
button_target="_blank" button_second_text="View Protfolio"
button_second_style="outline"
button_second_color="default"
button_second_link="index.php/portfolio/03-columns/light-cover"
button_second_target="_blank"
class=""
]

- Set text action style: dark, white
- Set icon. syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- Size of icon
- Enter content heading text
- Choose heading tag: h1, h2, h3, h4, h5, p
- Select Heading size (pixels) - 0 equivalent auto
- Heading CSS class
- Set button text
- Set button style: default, outline
- Set button color: default, general, primary, success, info, warning, danger, gray, white
- Set button link
- Choose a way to open link: _self or _blank
- Set button second text
- Set button second style: default, outline
- Set button second color: default, general, primary, success, info, warning, danger, gray, white
- Set button second link
- Choose a way to open link: _self or _blank
- Extra CSS class

Preview Light Style Preview Dark Style Get shortcode
Action Box
                            [jv_actionbox 
  style="dark" 
  icon="icon:7s-portfolio" 
  icon_size="48" 
  heading_text="Want to see more amazing works?" 
  heading_tag="h4" 
  heading_size="0" 
  heading_class="text-bold text-uppercase font-montserrat"
  button_text="Subscribe US" 
  button_style="default" 
  button_color="default" 
  button_link="http://joomalvi.com" 
  button_target="_blank" 
  button_second_text="View Protfolio" 
  button_second_style="outline" 
  button_second_color="default" 
  button_second_link="index.php/portfolio/03-columns/light-cover" 
  button_second_target="_blank"
  class=""
]

[jv_actionbox 
  style="white" 
  icon="icon:7s-like2" 
  heading_text="Like what you see? check our complete work." 
  heading_tag="h5" 
  heading_class="text-uppercase"
  button_text="PURCHASE TEMPLATE" 
  button_style="outline" 
  button_color="white" 
  button_link="#" 
  button_target="_self" 
  class="font-montserrat"
]
                            
                            

11. Accordions

[jv_accordion style="accordion-1" toggle="no" active_first="yes" icon="yes" panel="4" ]
[jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?" icon="icon:star" class=""] We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks. [/jv_panel]
[jv_panel title="CAN I CUSTOMIZE THE FONTS?" icon="icon:star-o" class=""] Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. [/jv_panel]
[jv_panel title="WHAT ABOUT BLOG OPTIONS?" icon="icon:flag" class=""] Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. [/jv_panel]
[jv_panel title="WORDPRESS STANDARDS WERE USED?" icon="icon:cogs" class=""] Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. [/jv_panel]
[/jv_accordion]

- Set accordion style: accordion-1 (default), accordion-2, accordion-3 and accordion-4
- Enable/disable toggle mode
- Open first spoiler when page loaded
- Choose collapse icon for spoilers (Icon Arrow)
- Enter a number of your panel and their data
+ panel icon (only style icon). syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
+ panel title
+ panel content
+ panel CSS class

Accordions style 1
Preview Get shortcode
Accordions style 1
                            [jv_accordion 
  style="accordion-1" 
  toggle="no" 
  active_first="yes" 
  icon="yes"
] 
  [jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?"] 
    We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
  [/jv_panel] 
  [jv_panel title="CAN I CUSTOMIZE THE FONTS?"]
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
  [/jv_panel] 
  [jv_panel title="WHAT ABOUT BLOG OPTIONS?"] 
    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
  [/jv_panel] 
  [jv_panel title="WORDPRESS STANDARDS WERE USED?"]
    Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
  [/jv_panel] 
[/jv_accordion]
                            
Accordions style 2
Preview Get shortcode
Accordions style 2
                            [jv_accordion 
  style="accordion-2" 
  toggle="no" 
  active_first="yes" 
  icon="yes"
] 
  [jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?"] 
    We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
  [/jv_panel] 
  [jv_panel title="CAN I CUSTOMIZE THE FONTS?"]
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
  [/jv_panel] 
  [jv_panel title="WHAT ABOUT BLOG OPTIONS?"] 
    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
  [/jv_panel] 
  [jv_panel title="WORDPRESS STANDARDS WERE USED?"]
    Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
  [/jv_panel] 
[/jv_accordion]
                            
Accordions style 3
Preview Get shortcode
Accordions style 3
                            [jv_accordion 
  style="accordion-3" 
  toggle="no" 
  active_first="yes" 
  icon="yes"
] 
  [jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?"] 
    We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
  [/jv_panel] 
  [jv_panel title="CAN I CUSTOMIZE THE FONTS?"]
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
  [/jv_panel] 
  [jv_panel title="WHAT ABOUT BLOG OPTIONS?"] 
    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
  [/jv_panel] 
  [jv_panel title="WORDPRESS STANDARDS WERE USED?"]
    Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
  [/jv_panel] 
[/jv_accordion]
                            
Accordions style 4
Preview Get shortcode
Accordions style 4
                            [jv_accordion 
  style="accordion-4" 
  toggle="no" 
  active_first="yes" 
  icon="yes"
] 
  [jv_panel title="WHAT SHIPPING METHOD ARE AVAILABLE?"] 
    We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks.
  [/jv_panel] 
  [jv_panel title="CAN I CUSTOMIZE THE FONTS?"]
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
  [/jv_panel] 
  [jv_panel title="WHAT ABOUT BLOG OPTIONS?"] 
    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
  [/jv_panel] 
  [jv_panel title="WORDPRESS STANDARDS WERE USED?"]
    Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.
  [/jv_panel] 
[/jv_accordion]
                            

12. Tabs

[jv_tabs style="style-1" placement="top" tabs="3" fitwidth="no" active="1"]
[jv_tab title="Desciption"] Cras ut magna quis metus tristique vulputate. [/jv_tab]
[jv_tab title="Addition Infomation"] Quisque interdum malesuada nisi non accumsan. [/jv_tab]
[jv_tab title="Reviews" icon="icon:star-o" class=""] Nam in ligula vel mi interdum tincidunt sit amet eget leo. [/jv_tab]
[/jv_tabs]

- Set accordion style: style-1 and style-1
- Choose a placement: Top, bottom, left and right
- Enter a number of your tab and their data
+ Select icon from icon picker (only style icon). syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
+ tab title
+ tab content
+ tab CSS class
- Allow tab buttons fit whole width by percent
- Select which tab is open by default
- Extra CSS class

Tabs style 1
Preview Get shortcode
Tabs style 1
                            [jv_tabs style="style-1" placement="top" tabs="3" fitwidth="no" active="1"] 
  [jv_tab title="Desciption"]
    Cras ut magna quis metus tristique vulputate.
  [/jv_tab] 
  [jv_tab title="Addition Infomation"]
    Quisque interdum malesuada nisi non accumsan. 
  [/jv_tab] 
  [jv_tab title="Reviews" icon="icon:star-o" ]
    Nam in ligula vel mi interdum tincidunt sit amet eget leo.
  [/jv_tab]
[/jv_tabs]
                            
Tabs style 2
Preview Get shortcode
Tabs style 2
                            [jv_tabs style="style-2" placement="top" tabs="3" fitwidth="no" active="1"] 
  [jv_tab title="Desciption"]
    Cras ut magna quis metus tristique vulputate.
  [/jv_tab] 
  [jv_tab title="Addition Infomation"]
    Quisque interdum malesuada nisi non accumsan. 
  [/jv_tab] 
  [jv_tab title="Reviews" icon="icon:star-o" ]
    Nam in ligula vel mi interdum tincidunt sit amet eget leo.
  [/jv_tab]
[/jv_tabs]
                            
Tabs style 1 - Bottom
Preview Get shortcode
Tabs style 1 - Bottom
                            [jv_tabs style="style-1" placement="bottom" tabs="3" fitwidth="no" active="1"] 
  [jv_tab title="Desciption"]
    Cras ut magna quis metus tristique vulputate.
  [/jv_tab] 
  [jv_tab title="Addition Infomation"]
    Quisque interdum malesuada nisi non accumsan. 
  [/jv_tab] 
  [jv_tab title="Reviews" icon="icon:star-o" ]
    Nam in ligula vel mi interdum tincidunt sit amet eget leo.
  [/jv_tab]
[/jv_tabs]
                            
Tabs style 2 - Bottom
Preview Get shortcode
Tabs style 2 - Bottom
                            [jv_tabs style="style-2" placement="bottom" tabs="3" fitwidth="no" active="1"] 
  [jv_tab title="Desciption"]
    Cras ut magna quis metus tristique vulputate.
  [/jv_tab] 
  [jv_tab title="Addition Infomation"]
    Quisque interdum malesuada nisi non accumsan. 
  [/jv_tab] 
  [jv_tab title="Reviews" icon="icon:star-o" ]
    Nam in ligula vel mi interdum tincidunt sit amet eget leo.
  [/jv_tab]
[/jv_tabs]
                            
Tabs style 1 - Left
Preview Get shortcode
Tabs style 1 - Left
                            [jv_tabs style="style-1" placement="left" tabs="3" fitwidth="no" active="1"] 
  [jv_tab title="Desciption"]
    Cras ut magna quis metus tristique vulputate.
  [/jv_tab] 
  [jv_tab title="Addition Infomation"]
    Quisque interdum malesuada nisi non accumsan. 
  [/jv_tab] 
  [jv_tab title="Reviews" icon="icon:star-o" ]
    Nam in ligula vel mi interdum tincidunt sit amet eget leo.
  [/jv_tab]
[/jv_tabs]
                            
Tabs style 2 - Left
Preview Get shortcode
Tabs style 2 - Left
                            [jv_tabs style="style-2" placement="left" tabs="3" fitwidth="no" active="1"] 
  [jv_tab title="Desciption"]
    Cras ut magna quis metus tristique vulputate.
  [/jv_tab] 
  [jv_tab title="Addition Infomation"]
    Quisque interdum malesuada nisi non accumsan. 
  [/jv_tab] 
  [jv_tab title="Reviews" icon="icon:star-o" ]
    Nam in ligula vel mi interdum tincidunt sit amet eget leo.
  [/jv_tab]
[/jv_tabs]
                            
Tabs style 1 - Right
Preview Get shortcode
Tabs style 1 - Right
                            [jv_tabs style="style-1" placement="right" tabs="3" fitwidth="no" active="1"] 
  [jv_tab title="Desciption"]
    Cras ut magna quis metus tristique vulputate.
  [/jv_tab] 
  [jv_tab title="Addition Infomation"]
    Quisque interdum malesuada nisi non accumsan. 
  [/jv_tab] 
  [jv_tab title="Reviews" icon="icon:star-o" ]
    Nam in ligula vel mi interdum tincidunt sit amet eget leo.
  [/jv_tab]
[/jv_tabs]
                            
Tabs style 2 - Right
Preview Get shortcode
Tabs style 2 - Right
                            [jv_tabs style="style-2" placement="right" tabs="3" fitwidth="no" active="1"] 
  [jv_tab title="Desciption"]
    Cras ut magna quis metus tristique vulputate.
  [/jv_tab] 
  [jv_tab title="Addition Infomation"]
    Quisque interdum malesuada nisi non accumsan. 
  [/jv_tab] 
  [jv_tab title="Reviews" icon="icon:star-o" ]
    Nam in ligula vel mi interdum tincidunt sit amet eget leo.
  [/jv_tab]
[/jv_tabs]
                            

14. Icon Box

[jv_iconbox style="ontop-circle" title="Web development" title_color="#fff" icon="icon:7s-graph1" icon_color="#222" icon_border="#fff" icon_background="#fff" text_color="#cccccc" readmore="Readmore" readmore_link="http://joomlavi.com" readmore_color="#878787"] Aenean imperdiet vehicula elementum. Vestibulum vitae fringilla mauris. Vestibulum eget. quis nostrud exerci. [/jv_iconbox]

- Icon box style: default, ontop, ontop-circle
- Title of box
- The color of title
- Select icon from icon picker. Syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
- The color of icon
- The color of border icon
- The color of background icon
- The color of text in box
- Label for Readmore button in box
- Link for Readmore button in box
- The color of readmore link
- Extra CSS class

Default Style
Preview Get shortcode
Default Style
                            [jv_iconbox 
  style="inleft" 
  title="Branding" 
  title_color="#333333" 
  icon="icon:7s-anchor" 
  icon_color="#333333" 
  readmore="Read more" 
  readmore_link="htttp://joomlavi.com" 
  readmore_color="#878787" 
] 
  Aenean imperdiet vehicula elementum. Vestibulum vitae fringilla mauris. Vestibulum eget. quis nostrud exerci. 
[/jv_iconbox]
                            
                            
Icon Ontop Style
Preview Get shortcode
Icon Ontop
                            [jv_iconbox 
  style="ontop" 
  title="Branding" 
  title_color="#333333" 
  icon="icon:7s-anchor" 
  icon_color="#d5d5d5" 
] 
  Aenean imperdiet vehicula elementum. Vestibulum vitae fringilla mauris. Vestibulum eget. quis nostrud exerci. 
[/jv_iconbox]
                            
                            
Icon Ontop - Circle Style
Preview Get shortcode
Icon Ontop - Circle
                            [jv_iconbox 
  style="ontop-circle" 
  title="Web development" 
  title_color="#fff" 
  icon="icon:7s-graph1" 
  icon_color="#222" 
  icon_border="#fff" 
  icon_background="#fff" 
  text_color="#cccccc" 
] 
  Aenean imperdiet vehicula elementum. Vestibulum vitae fringilla mauris. Vestibulum eget. quis nostrud exerci. 
[/jv_iconbox] 
                            
                            

15. Clients

[jv_clients
uid="1437"
source="media:images/clients/black"
display="carousel"
item_row="3"
items="5"
items_desktop="4"
items_tablet="3"
items_mobile="2"
single_item="no"
arrows="yes"
pagination="none"
autoplay="5000"
speed="600" class=""
] [jv_image src="images/clients/black/client-1.png" title="Client 1" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-2.png" title="Client 2" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-3.png" title="Client 3" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-4.png" title="Client 4" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-5.png" title="Client 5" link="http://joomlavi.com" parent_tag="clients"]
[jv_image src="images/clients/black/client-6.png" title="Client 6" link="http://joomlavi.com" parent_tag="clients"]
[/jv_clients]

- Unique id is generated automatically
- Choose images source. You can use images from Media library or retrieve it from article under category. See here
- Choose carousel/grid display
- Set item per row (Grid display only)
- How much carousel items is visible
- How much carousel items is visible (max width 1200px)
- How much carousel items is visible (max width 768px)
- How much carousel items is visible (max width 480px)
- Set single item
- Show left and right arrows (only Carousel Mode)
- Show pagination (only Carousel Mode)
- Choose interval between slide animations. Set to 0 to disable autoplay (only Carousel Mode)
- Specify animation speed (only Carousel Mode)
- Extra CSS class

Carousel Display
Preview Get shortcode
Carousel Display
                            [jv_clients 
  uid="1437057533-55a7c1fd2a2ce" 
  display="carousel" 
  source="media:images/clients/black" 
  items="5" 
  items_desktop="4" 
  items_tablet="3" 
  items_mobile="2" 
  single_item="no" 
  arrows="yes" 
  pagination="none" 
  autoplay="5000" 
  speed="600" 
] 
  [jv_image src="images/clients/black/client-1.png" title="Client 1" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/black/client-2.png" title="Client 2" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/black/client-3.png" title="Client 3" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/black/client-4.png" title="Client 4" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/black/client-5.png" title="Client 5" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/black/client-6.png" title="Client 6" link="http://joomlavi.com" parent_tag="clients"] 
[/jv_clients]
                            
                            
Grid Display
Preview Get shortcode
Grid Display
                            [jv_clients 
  uid="1437057533-55a7c1fd2a2ce" 
  display="grid" 
  source="media:images/clients/white" 
  item_row="3"
] 
  [jv_image src="images/clients/white/client-1.png" title="Client 1" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/white/client-2.png" title="Client 2" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/white/client-3.png" title="Client 3" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/white/client-4.png" title="Client 4" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/white/client-5.png" title="Client 5" link="http://joomlavi.com" parent_tag="clients"] 
  [jv_image src="images/clients/white/client-6.png" title="Client 6" link="http://joomlavi.com" parent_tag="clients"] 
[/jv_clients]
                            
                            

16. Testimonials

[jv_testimonials user="4" style="testimonial-1" carousel="no" number="two" arrows="yes" pagination="none" autoplay="5000" speed="600" class=""] [jv_user name="Alan Bakes" avatar="images/avatar/1.jpg" position="Ceo" company="Joomlavi.Com" link="Joomlavi.Com" rating="5"] In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo. [/jv_user]
[jv_user name="Jayson Pary" avatar="images/avatar/2.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/jv_user]
[jv_user name="David Corner" avatar="images/avatar/3.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo. [/jv_user]
[jv_user name="Jonathan Graph" avatar="images/avatar/4.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/jv_user]
[/jv_testimonials]

- Unique id is generated automatically
+ Select image from media.
+ Name user
+ Enter position
+ Enter company
+ Enter link
+ Set user rating
+ user CSS clas
- Choose images source. You can use images from Media library or retrieve it from article under category. See here
- Choose testimonials style: testimonial-1, testimonial-2
- Choose carousel/grid display
- Set item per row (Grid display only)
- Show left and right arrows (only Carousel Mode)
- Show pagination (only Carousel Mode)
- Choose interval between slide animations. Set to 0 to disable autoplay (only Carousel Mode)
- Specify animation speed (only Carousel Mode)
- Extra CSS class

Testimonials Style 1
Preview Get shortcode
Carousel Display
                            [jv_testimonials user="4" style="testimonial-1" carousel="no" number="two"] 
  [jv_user name="Alan Bakes" avatar="images/avatar/1.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] 
    In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
  [/jv_user] 
  [jv_user name="Jayson Pary" avatar="images/avatar/2.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
  [/jv_user] 
  [jv_user name="David Corner" avatar="images/avatar/3.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] 
    In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
  [/jv_user] 
  [jv_user name="Jonathan Graph" avatar="images/avatar/4.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  [/jv_user] 
[/jv_testimonials]
                            
                            
Testimonials Style 2
Preview Get shortcode
Grid Display
                            [jv_testimonials user="4" style="testimonial-2" carousel="no" number="two"] 
  [jv_user name="Alan Bakes" avatar="images/avatar/1.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] 
    In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
  [/jv_user] 
  [jv_user name="Jayson Pary" avatar="images/avatar/2.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
  [/jv_user] 
  [jv_user name="David Corner" avatar="images/avatar/3.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] 
    In et feugiat ante, et egestas urna. Etiam vitae convallis felis, ut sagittis leo.
  [/jv_user] 
  [jv_user name="Jonathan Graph" avatar="images/avatar/4.jpg" company="Joomlavi.Com" link="Joomlavi.Com"] 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  [/jv_user] 
[/jv_testimonials]
                            
                            

17. Skill bars

[jv_skillbars style="default" striped="no" show_percent="inline"] [jv_skillbar title="Graphic design" achievement_percent="90" icon="icon:7s-edit"]
[jv_skillbar title="HTML/CSS" achievement_percent="60" icon="icon:7s-display1"]
[jv_skillbar title="Photography" achievement_percent="80" icon="icon:7s-camera"]
[jv_skillbar title="Web design" achievement_percent="95" icon="icon:7s-config"]
[jv_skillbar title="Architecture" achievement_percent="70" icon="icon:7s-culture"]
[/jv_skillbars]

- Choose skill bars style: default, primary, success, danger, warning, info
- Striped effect. Not available in IE9 and below.
- Show/hide percent number
- Enter a number of your skill bar and their data
+ Select image from media.
+ Select icon from icon picker. Syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
+ Enter position
- Extra CSS class

Skill bars
Preview Get shortcode
Skill bars - Default
                            [jv_skillbars style="default" striped="no" show_percent="inline"]
  [jv_skillbar title="Graphic design" achievement_percent="90" icon="icon:7s-edit"] 
  [jv_skillbar title="HTML/CSS" achievement_percent="60" icon="icon:7s-display1"] 
  [jv_skillbar title="Photography" achievement_percent="80" icon="icon:7s-camera"] 
  [jv_skillbar title="Web design" achievement_percent="95" icon="icon:7s-config"] 
  [jv_skillbar title="Architecture" achievement_percent="70" icon="icon:7s-culture"] 
[/jv_skillbars]
                            
                            
Skill bars - Striped effect - Success Color
Preview Get shortcode
Skill bars - Striped effect - Success Color
                            [jv_skillbars style="success" striped="yes" show_percent="inline"]
  [jv_skillbar title="Graphic design" achievement_percent="90" icon="icon:7s-edit"] 
  [jv_skillbar title="HTML/CSS" achievement_percent="60" icon="icon:7s-display1"] 
  [jv_skillbar title="Photography" achievement_percent="80" icon="icon:7s-camera"] 
  [jv_skillbar title="Web design" achievement_percent="95" icon="icon:7s-config"] 
  [jv_skillbar title="Architecture" achievement_percent="70" icon="icon:7s-culture"] 
[/jv_skillbars]
                            
                            

18. Pie Chart

[jv_piechart] style="default"
value="75"
title="Branding"
sub_text="Suspendisse efficitur maximus malesuada. Duis sit amet fringilla nisi. Maecenas mattis."
]

- Choose Pie Chart style: default and light
- Set Pie Chart value
- Set Pie Chart title
- Set Pie Chart sub title

Text dark style
Preview Get shortcode
Text dark style
                            [jv_piechart style="default" value="75" title="Branding" sub_text="Suspendisse efficitur maximus malesuada. Duis sit amet fringilla nisi. Maecenas mattis."]
                            
                            
Text light style
Preview Get shortcode
Text light style
                            [jv_piechart style="light" value="75" title="Branding" sub_text="Suspendisse efficitur maximus malesuada. Duis sit amet fringilla nisi. Maecenas mattis."]
                            
                            

19. Counter

[jv_piechart] style="default"
value="75"
title="Branding"
sub_text="Suspendisse efficitur maximus malesuada. Duis sit amet fringilla nisi. Maecenas mattis."
]

- Choose Pie Chart style: default and light
- Set Pie Chart value
- Set Pie Chart title
- Set Pie Chart sub title

Dark color style
Preview Get shortcode
Dark color style
                            [jv_counters style="dark" number="4"]
  [jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"] 
  [jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"] 
  [jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"] 
  [jv_counter icon="icon:7s-users" digit="550" title="happy clients"] 
[/jv_counters]
                            
                            
Light color style
Preview Get shortcode
Light color style
                            [jv_counters style="light" number="4"] 
  [jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"] 
  [jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"] 
  [jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"] 
  [jv_counter icon="icon:7s-users" digit="550" title="happy clients"] 
[/jv_counters]
                            
                            
Dark color style 2
Preview Get shortcode
Dark color style 2
                            [jv_counters style="dark2" number="3"] 
  [jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients" class="bg-lighter2 pt-130 pb-130"] 
  [jv_counter icon="icon:7s-cup" digit="990" title="AWARDS WON" class="bg-lighter pt-130 pb-130"] 
  [jv_counter icon="icon:7s-like2" digit="15850" title="FAVOURITE FANS" class="bg-very-lighter pt-130 pb-130"] 
[/jv_counters]
                            
                            
Light color style 2
Preview Get shortcode
Light color style 2
                            [jv_counters style="light2" number="4"] 
  [jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"] 
  [jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"] 
  [jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"] 
  [jv_counter icon="icon:7s-users" digit="550" title="happy clients"] 
[/jv_counters]
                            
                            
Dark color style 3
Preview Get shortcode
Dark color style 3
                            [jv_counters carousel="yes" style="dark3" number="2" arrows="yes"] 
  [jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"] 
  [jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"] 
  [jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"] 
  [jv_counter icon="icon:7s-users" digit="550" title="happy clients"] 
[/jv_counters]
                            
                            
Light color style 3
Preview Get shortcode
Light color style 3
                            [jv_counters carousel="yes" style="light3" number="2" arrows="yes"] 
  [jv_counter icon="icon:7s-medal" digit="1850" title="satisfied clients"] 
  [jv_counter icon="icon:7s-graph1" digit="85.50" suffix="%" title="startup growth"] 
  [jv_counter icon="icon:7s-cash" digit="1850" prefix="$" title="avarage prices"] 
  [jv_counter icon="icon:7s-users" digit="550" title="happy clients"] 
[/jv_counters]
                            
                            
Dark color style 4
Preview Get shortcode
Dark color style 4
                            [jv_counters carousel="yes" style="dark4" number="3" arrows="yes"] 
  [jv_counter icon="icon:7s-users" digit="1955" title="Happy Clients"] 
  [jv_counter icon="icon:7s-cup" digit="27" title="AWARDS WON"] 
  [jv_counter icon="icon:7s-coffee" digit="3566" title="Coffee Cups"] 
  [jv_counter icon="icon:7s-like2" digit="550" title="FAVOURITE FANS"] 
[/jv_counters]
                            
                            
Light color style 4
Preview Get shortcode
Light color style 4
                            [jv_counters carousel="yes" style="light4" number="3" arrows="yes"] 
  [jv_counter icon="icon:7s-users" digit="1955" title="Happy Clients"] 
  [jv_counter icon="icon:7s-cup" digit="27" title="AWARDS WON"] 
  [jv_counter icon="icon:7s-coffee" digit="3566" title="Coffee Cups"] 
  [jv_counter icon="icon:7s-like2" digit="550" title="FAVOURITE FANS"] 
[/jv_counters]
                            
                            

20. Price table

[jv_pricetable style="pricetable" pricetable="4" currency="$" duration="Per month" popular="3" purchase_text="Sign up" ] [jv_pricecol title="Basic Package" sub_title="Entry level solution" price="199.00" image="images/price/1.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="2GB Webspace;1 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Advance Package" sub_title="More features" price="299.00" image="images/price/2.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="4GB Webspace;2 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Smart package" sub_title="Perfect business Solution" price="399.00" image="images/price/3.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="8GB Webspace;4 Domain;PHP 5 Enabled;24h - Support"]
[jv_pricecol title="Premium package" sub_title="All You need" price="499.00" image="images/price/4.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="16GB Webspace;8 Domain;PHP 5 Enabled;24h - Support"]
[/jv_pricetable]

- Choose Price table style: default and pricetable-2
- Set currentcy in used
- Set duration
- Set popular number
- Set text for purchase button
- Set Pie Chart sub title
+ Table title
+ Table sub title
+ Select icon from media picker.
+ Price of table
+ Link of purchase button
+ enter data fields, separated by commas

Style 1
Preview Get shortcode
Style 1
                            [jv_pricetable style="pricetable" pricetable="4" currency="$" duration="Per month" popular="3" purchase_text="Sign up" ] 
  [jv_pricecol title="Basic Package" sub_title="Entry level solution" price="199.00" image="images/price/1.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="2GB Webspace;1 Domain;PHP 5 Enabled;24h - Support"] 
  [jv_pricecol title="Advance Package" sub_title="More features" price="299.00" image="images/price/2.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="4GB Webspace;2 Domain;PHP 5 Enabled;24h - Support"] 
  [jv_pricecol title="Smart package" sub_title="Perfect business Solution" price="399.00" image="images/price/3.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="8GB Webspace;4 Domain;PHP 5 Enabled;24h - Support"] 
  [jv_pricecol title="Premium package" sub_title="All You need" price="499.00" image="images/price/4.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="16GB Webspace;8 Domain;PHP 5 Enabled;24h - Support"] 
[/jv_pricetable]
                            
                            
Style 2
Preview Get shortcode
Style 2
                            [jv_pricetable style="pricetable-2" pricetable="3" currency="$" duration="Per month" popular="2" purchase_text="Sign up" ] 
  [jv_pricecol title="Basic Package" sub_title="Entry level solution" price="199.00" image="images/price/1.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="2GB Webspace;1 Domain;PHP 5 Enabled;24h - Support"] 
  [jv_pricecol title="Advance Package" sub_title="More features" price="299.00" image="images/price/2.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="4GB Webspace;2 Domain;PHP 5 Enabled;24h - Support"] 
  [jv_pricecol title="Smart package" sub_title="Perfect business Solution" price="399.00" image="images/price/3.jpg" purchase_link="index.php/pages/joomla/user/registration" detail="8GB Webspace;4 Domain;PHP 5 Enabled;24h - Support"] 
[/jv_pricetable]
                            
                            

21. Feature Box

[jv_features style="feature-1" feature="4"] [jv_feature title="FULLY CUSTOMIZIBLE" icon="icon:7s-keypad" image="images/features/1.jpg" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur, pharetra lorem sit amet, posuere tellus. Aenean molestie orci a est imperdiet consequat. Nulla et enim eget nunc blandit fermentum. [/jv_feature] [jv_feature title="RETINA READY" icon="icon:7s-monitor" image="images/features/2.jpg" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/jv_feature] [jv_feature title="SEO OPTIMIZED" icon="icon:7s-network" image="images/features/3.jpg" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur [/jv_feature] [jv_feature title="DEMO CONTENT" icon="icon:7s-phone" image="images/features/4.jpg" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur [/jv_feature] [/jv_features]

- Choose Feature Box style: feature-1 and feature-2
- Enter a number of your features and their data
+ Table title
+ Select icon from icon picker. Syntax: icon:icon_name. Support FontAwesome & 7 stroke icon
+ Select icon from media picker.
- Extra CSS class

Style 1
Preview Get shortcode
Style 1
                            [jv_features style="feature-1" feature="4"]
  [jv_feature title="FULLY CUSTOMIZIBLE" icon="icon:7s-keypad" image="images/features/1.jpg" ]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur, pharetra lorem sit amet, posuere tellus. Aenean molestie orci a est imperdiet consequat. Nulla et enim eget nunc blandit fermentum.
  [/jv_feature] 
  [jv_feature title="RETINA READY" icon="icon:7s-monitor" image="images/features/2.jpg" ]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  [/jv_feature] 
  [jv_feature title="SEO OPTIMIZED" icon="icon:7s-network" image="images/features/3.jpg" ]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur
  [/jv_feature] 
  [jv_feature title="DEMO CONTENT" icon="icon:7s-phone" image="images/features/4.jpg" ]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex consectetur
  [/jv_feature] 
[/jv_features]
                            
                            
Style 2
Preview Get shortcode
Style 2
                            [jv_features style="feature-2" feature="6"]
  [jv_feature title="Branding" icon="icon:7s-anchor" image="images/features/1.jpg" ]
    Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
  [/jv_feature] 
  [jv_feature title="Development" icon="icon:7s-bicycle" image="images/features/2.jpg" readmore_link="http://joomlavi.com"]
    Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
  [/jv_feature] 
  [jv_feature title="Designer" icon="icon:7s-loop" image="images/features/3.jpg" readmore_link="http://joomlavi.com"]
    Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
  [/jv_feature] 
  [jv_feature title="Support" icon="icon:7s-micro" image="images/features/4.jpg"  readmore_link="http://joomlavi.com"]
    Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
  [/jv_feature] 
  [jv_feature title="Photography" icon="icon:7s-photo-gallery" image="images/features/5.jpg"  readmore_link="http://joomlavi.com"]
    Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
  [/jv_feature] 
  [jv_feature title="Marketing" icon="icon:7s-note2" image="images/features/6.jpg"  readmore_link="http://joomlavi.com"]
    Nullam feugiat tincidunt nunc nec interdum. Praesent ac fermentum enim.
  [/jv_feature] 
[/jv_features]
                            
                            

22. Teams

[jv_teams style="style-3" members="4" carousel="no" number="4" arrows="no" pagination="no" autoplay="5000" speed="600" class=""] [jv_member name="Member name 1" image="images/avatar/1.jpg" position="CEO" facebook="#" google="#" twitter="#"]
[jv_member name="Member name 2" image="images/avatar/2.jpg" position="Designer" website="#" facebook="#" google="#"]
[jv_member name="Member name 3" image="images/avatar/3.jpg" position="Coder" website="#" facebook="#" google="#"]
[jv_member name="Member name 4" image="images/avatar/4.jpg" position="Maketer" website="#" linkedin="#" tumblr="#"]
[/jv_teams]

- Choose Feature Box style: feature-1 and feature-2
- Enter a number of your members and their data
+ Member name
+ Select icon from media picker.
+ Member position
+ Social link
- Choose carousel/grid display
- Item number show (per row - Grid display / visible - Carousel display)
- Show left and right arrows (only Carousel Mode)
- Show pagination (only Carousel Mode)
- Choose interval between slide animations. Set to 0 to disable autoplay (only Carousel Mode)
- Specify animation speed (only Carousel Mode)
- Extra CSS class

Style 1
Preview Get shortcode
Style 1
                            [jv_teams style="style-1" members="4" number="4"]
  [jv_member name="LANA P." image="images/avatar/5.jpg" position="CEO"]
  [jv_member name="JOHN DOE" image="images/avatar/6.jpg" position="Designer"]
  [jv_member name="JORDAN CREPT" image="images/avatar/7.jpg" position="Coder"]
  [jv_member name="CHARLIE K." image="images/avatar/8.jpg" position="Maketer"]
[/jv_teams]
                            
Style 2
Preview Get shortcode
Style 2
                            [jv_teams style="style-2" members="4" carousel="no" number="4" arrows="no" pagination="no" autoplay="5000" speed="600"]
  [jv_member name="LANA P." image="images/avatar/9.jpg" position="CEO"]
  [jv_member name="JOHN DOE" image="images/avatar/10.jpg" position="Designer"]
  [jv_member name="JORDAN CREPT" image="images/avatar/11.jpg" position="Coder"]
  [jv_member name="CHARLIE K." image="images/avatar/12.jpg" position="Maketer"]
[/jv_teams]
                            
Style 3
Preview Get shortcode
Style 3
                            [jv_teams style="style-3" members="4" carousel="no" number="4" arrows="no" pagination="no" autoplay="5000" speed="600"]
    [jv_member name="Member name 1" image="images/avatar/1.jpg" position="CEO" facebook="#" google="#" twitter="#"]
    [jv_member name="Member name 2" image="images/avatar/2.jpg" position="Designer" website="#" facebook="#" google="#"]
    [jv_member name="Member name 3" image="images/avatar/3.jpg" position="Coder" website="#" facebook="#" google="#"]
    [jv_member name="Member name 4" image="images/avatar/4.jpg" position="Maketer" website="#" linkedin="#" tumblr="#"]
  [/jv_teams]
                            
                            

23. Google map

[jv_googlemap width="0" height="400" address="New York" coordinate="40.7127840,-74.0059410" infowindow="" border="1px solid #cccccc" ="13" zoom_control="yes" pan_control="yes" streetview_control="yes" maptype_control="yes" scale_control="yes" overview_control="yes"][/jv_googlemap]

- Set width in pixels. Leave it 0 for responsive mode
- Set height in pixels
- Set your marker adress. It is also map center
- Set your marker coordinate. It is also map center. If it isn't empty, it will be prioty.
- Info Window
- Set border style
- Set zoom value when the map is initialized
- Show Zoom Control
- Show Pan Control
- Show Street View Control
- Show Map Type Control
- Show Scale Control
- Show Overview Control
- Extra CSS class

24. Youtube Video

[jv_youtube url="https://www.youtube.com/watch?v=BLklI3nDAMg" width="600" height="400" responsive="yes" autoplay="no" class=""][/jv_youtube]

- Enter your youtube video's URL
- Set video's width in pixels
- Set video's height in pixels
- Allow the video to be responsive
- Autoplay video
- Extra CSS class

25. Vimeo Video

[jv_vimeo url="https://vimeo.com/46902388" width="600" height="400" responsive="yes" autoplay="no" class=""][/jv_vimeo]

- Enter your vimeo video's URL
- Set video's width in pixels
- Set video's height in pixels
- Allow the video to be responsive
- Autoplay video
- Extra CSS class

Components

1. JV Portfolio

JV Portfolio extension is a free Joomla! 3.x component designed to create image portfolio functionality in to your CMS website. Allows designers, artists, photographers to create, manage and publish a very modern and outstanding filterable portfolio. Present your best work to customers and new clients in an attractive, professional and responsive way. It’s very easy and fast to create stunning portfolios and integrate them into your Joomla! site. The Filterable Portfolio - when a particular tag is selected, the list of projects is instantly regenerated with a new list of projects from the selected tag.

1.1 Feature

- Package contains component and module
- It can be downloaded and use for free, also in commercial projects
- Simple-to-use solution, and it requires no coding knowledge
- Layout Settings (Default | Gallery with or without space between images)
- Thumbnail Styles to choose from: Square, Rectangular or Masonry
- You can add details to each item, such as: screenshots (thumbnail & full image), a title, alias, description, URL, and select status, language and access level
- Based on Tags system
- Images and Photos support (JPG,PNG, GIF)
- Columns to show : 1, 2, 3, 4 or 6
- You can set number of items to show per page
- You can upload your images
- Filtered items using animation
- Lightbox effect
- CSS3 Animation effect on thumbnails
- Multilingual support
- Search Engine Friendly URLs
- Responsive layout, which means your portfolio will look great on any device Modern look & feel

1.2 Configuration

In Joomla Administration, go to

Let's take a look at here:

a. JV Portfolio Tab

- Choosing folder default Image
- Choosing style default for portfolio detail page. See here

b. Button Social Tab

- Please enter html code to gain social button. As default, we support AddThis See here

c. Extra Group

This part will help you to create the optional data field.

For example: Let see the set up below:

- Group Name Extra
- The data field in group.
- Support Clone & Remove Extra group

1.3 Add New/Edit

In Joomla Administration, go to

Let's take a look at here:

Once you're on field portfolio, please click button "New" to create new Portfolio. Or click Portfolio name to edit:

Now we will have the field to enter:

- Id is generated automatically
- Portfolio Name
- Portfolio Categories
- Detailed description Portfolio
- Link to Portfolio or any links which you want to insert.
- Portfolio tags
- Introduce Video
- The displaying way the detail content of JV Portfolio: Default, Grid, Slider, Wide - is generated automatically
- With actions: Add, Check all, Unchecked, Remove checked. See here and See here
- Are those field which you've created 1.2 Configuration

Do not forget to save what you have done :)

1.4 Layout Settings

Create layout displaying list of those portfolio.
Firstly, please create new menu item.

At please click Select. Then click on JV Porfolio > Items. See here

Portfolio Tab:

- Choosing layout overider
- Enable/disable caption effect
- Set caption delay (millisecond)
- Enable/disable caption inverse
- Grid column: 1, 2, 3, 4, 6. If you want to display 5 column, please using classpfo-five fill inPage Class
- The number of displaying item on every page.
- Enable/disable filter
- Enable/disable sort by: Name, Date, Liked
- Displaying some items which its tag are choosen. It will be effect when filter is activated.
- Please choose the way to download item. Paginate, Scroll load or Button load
- Choosing the display size of thumbnail

- Show/hide title item
- Show/hide tags item
- Show/hide creation date
- Show/hide vote

- Choosing effect loading item. Please refer here
- Please choose the default or animate.css

Layout device:

At that time, this version don't support this function. We will update in the newest version.

Page Display:

Here we use the value of to builg those style layout

Using class pfo-wide to display layout at the maximum width

Using those class: pfo-caption, pfo-smooth, pfo-lateral, pfo-border, pfo-with-title, pfo-dark

2. JV Slideshow

The JV Slideshow is an amazing revolution slider for joomla. The slider has been developed by themepunch and we would like to thank them in advance before talking about the slider features. We have developed a friendly backend that lets you manage your slider like no other extension yet made for joomla. You can design your slider with no css or jquery needed an come out with amazing effect.

2.1 Feature

- Image and Thumbs fully re-sizable
- Using CSS Animation with FallBack to jQuery
- Unlimited Caption Layers
- Unlimited Slides
- iPhone & Android Swipe Touch enabled
- jQuery Conflict free plugin
- Customizable 100% via Plugin Backend
- Easy installation in your Website
- Special Easing
- Vimeo & Youtube Supported
- Duplicate, Slider, slide, captions Function
- Drag and Drop Captions in the Editor
- Fullwidth, Responsive and Normal Modes
- Countless Art of Transitions
- Optional Shadows included

2.2 Installation

2.3 Import

This function will help you to set up the exist sample more quickly.

We've attached the sample file of JV Capitol, you just need to download it and import -> The slideshow will be start working. Or you can download free slider exchange. here. Please choose v4.x because at that time we don't update version v5.x

Slideshow 1 Slideshow 2 Slideshow 3 Slideshow 4 Slideshow 5 Slideshow About

2.4 Export

It will help you to save backup version.

2.5 Display - use module

Using module to display slideshow

2.6 Display - use shortcode

Please use shortcode to display slideshow via text or module Custom HTML

3. K2

First download K2 component from http://getk2.org/ and install it through .

K2 Documentation see here. K2 Support Forum see here

Settings - Backend
Frontend

4. Virtuemart

First download Virtuemart component from http://virtuemart.net/ and install it through . Make sure you first install the core than the AIO.

Download file virtuemart.cfg, file which has the proper settings (at least like in my demo). Copy this file to administrator/components/com_virtuemart/ folder overwriting the old one (you may want to backup the old one first). If you want to simply have your own configuration, make sure you will take a look at the and make sure you will uncheck loading the VM Jquery, see here . This will prevent conflicts.

If you're new to VM, you can go to and here you can Reset all tables and install sample data.

At this point, Capitol already has VM layout overrides which will take over the default VM styles in templates/jv-capitol/html/com_virtuemart/.

Virtuemart Documentation see here. Virtuemart Support Forum see here

Settings - Backend
Frontend

Extensions

Below we will introduce and instruct to set up some of modules which are used in template. Some of module Joomla, K2, Virtuemart you can search in the author's page. Or watching the setting at file quickstart.

1. Modules

We support the reference table for you to search the module position which JV Capitol use.

Module - Reference Table Module Position

1.1. Breadcrumbs Extend

Breadcrumbs Extend v1.0.0 is extensional module and developed from module Breadcrumbs of Joomla. We have added some functions to suit with JV Capitol. And it also works better with JV Capitol Template.

Please use the attached file.mod_breadcrumbs_ex_v1.0.0.zip in file download on themeforest and install it through .

Configuration

- Show/Hide "You are here" text in the pathway.
- Show/Hide the Home element in the pathway.
- This text will be shown as Home entry. If the field is left empty, it will use the default value from the MOD_BREADCRUMBS_EX.ini language file.
- Show/Hide the last element in the pathway.
- Module background. Select form media picker
- Background position css, value: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom or x% y% or xpx ypx or initial or inherit
- Background size css, value: auto or w% h% or wpx hpx or cover or contain or initial or inherit
- Enable/disable parallax scrolling. The background images translate slower than the content in the foreground
- Translational speed of the background images
- Create a overlay class stand between background and the content.
- The transparent of overlay class.

1.3. JV Contact

JV Contact is a free extension designed by Joomlavi. Please using this attached filemod_jvcontact_v3.1.5_j3x.zip in file download on themeforest and install it through .

Configuration

a. Module Tab
- Add header text ( in HTML )
- Add fotter text ( in HTML )
- Add text show message
- Add text in submit button
- Add More info text
- Add Mail subject text
- Select whether to show checkbox to send a copy email to sender
b. Custom Template Tab
- Module provides 2 options Default and Custom, Capitol also provides 2 extra options: Those are contact-1, contact-2, contact-2
- Inpput Custom HTML code
- The component which you enter in "Custome HTML"
- Add custom css

Capitol contact layout:

c. Recipients Tab
- Select recipients from list of existing users in your site
- Add recipient email address
d. Form & fields Tab
- Show/Hide form
- Show/Hide title in field
- Select fields from a dropdown list to add; or you can select default with 4 fields: name, email, subject, text
e. Social Tab
- Select not to show Social buttons or show with 3 style selections
- Show/Hide Facebook Button Share
- Show/Hide Tweeter Button Share
- Show/Hide Google+ Button Share
- Show/Hide LikedIn Button Share
- Show/Hide More Button
e. Captcha Tab

In this tab, you can config parameters for Captcha, to get Captcha you to visit https://www.google.com/recaptcha/admin#whyrecaptcha to get and

- Show/Hide Re-Captcha on form
- Insert public key after signing up and creating reCaptcha
- Insert private key after signing up and creating reCaptcha
- Choose theme for reCaptcha from dropdown menus
- Enter your own text for "instructions visual"
- Enter your own text for "instructions audio"
- Enter your own text for "play again"
- Enter your own text for "cant here this"
- Enter your own text for visual challenge
- Enter your own text for audio challenge
- Enter your own text for instructions visual
- Enter your own text for "help"
- Enter your own text for "incorrect try again"
e. Google Map Tab

This tab allow you to show and config parameters for google map
To be able to us google map in contact form, you need to visit https://code.google.com/apis/console/ to get API key to

- Show/hide google map in front-end
- Insert APT key
- Set map width (in pixel or %)
- Set map height(in pixel)
- Set zoom ratio
- Enter URL of the icon image
- Set Latitude of the location
- Set longtide of the location
- change the text "I'm here" with yours
- Preview map

1.4. JV Custom

JV Custom is a free extension designed by Joomlavi. Please using this attached file mod_jvcustom_v1.0.2.zip in file download on themeforest and install it through .

Configuration

a. Module Tab
- Set text align content: None, Center, Left, Right
- Module background. Select form media picker
- Set background color CSS
- Background position css, value: left top, left center, left bottom, right top, right center, right bottom, center top, center, center bottom
- Set background attachment CSS: None, scroll, fixed, local
- Set background repeat CSS: None, repeat, repeat-x, repeat-y, no-repeat
- Background size css, value: auto or w% h% or wpx hpx or cover or contain or initial or inherit
- Enable/disable parallax scrolling. The background images translate slower than the content in the foreground
- Translational speed of the background images
- Choose parent element level to set background
- Create a overlay class stand between the background and the content
- The transparency of overlay class
- Content color CSS: light, dark
- Skewed background with CSS. See here
- Set module Full Screen
- Enable/disable Prepare Content. Optionally prepare the content with the Joomla Content Plug-ins.
- Input HTMl content
b. Video Blackground Tab
- Set video background id (Only Youtube). eg: hWemtpycSG0
- The time at which you’d like the video to begin playing
- The time at which you’d like the video to end playing
- Set mute video
- Create an overlay class stand between the video and the content
- The transparency of overlay class

1.5. JV Insgram

JV Custom is a free extension designed by Joomlavi. Please use this attached file mod_jvinsgram_v1.5.zip in file download on themeforest and install it through .

Configuration

a. Insgram Tab


Go to http://instagram.com/developer/ and create a new account.


- Sign in using your account.
- Click on "Manage Clients" menu on the top of the site.v - Click on "Register a New Client" and complete the form. + Application Name : Choose an appropriate name for your application, for example My Instagram Gallery.
+ Description : Write a few words that describe your application, for example "Sharing Instagram Photos".
+ Website : The URL of your website, for example http://www.mywebsite.com
+ Redirect URL : the root URL of your website, for example http://www.mywebsite.com
After registering you will get Client information, for example:


- Sign in using your account.
- Click on "Connect Instagram" link and click on "Authorize" button on popup window.
- The popup window will be redirected to your website automatically. Please copy access_token in url of popup window and paste it into "Access token" textbox.

b. Display Feeds Tab
- Set the number of images that you want to display in your gallery. You can set a number between 1 and 30. The maximum of 30 is due to Instagram limitations.
- Choose Source
- Set Columns display: 1, 2, 3, 4, 6
- Set description feeds
c. Item Tab
- Choose thumbnail size
- Show/Hide caption
- Show/Hide like
- Show/Hide comment

1.6. Jv Newsletter

JV Newsleter is a installed package including 1 module and 1 plugin to carry out the sign up functions. (subscribe) on some services such as: MailChimp, Campaign Monitor via the Key API (API key). JV Newsletter provide the working methods on 2 services, those are: MailChimp and Campaign Monitor.. Please use the attached filesmod_jvinsgram_v1.5.zip infile download on themeforest and install it through .

Features:

a.Easy installation on the system.
b. Customize signup list for customer from the module's configuration.
c. Import email from some available account from your system.
d. Providing some forms for customer to sign up from the main page.(Front-end)
e. It can run on many different services.(APIs) as a copy of module.
f. Automatically subscribe email when clients sign up an account. (Registration), or sending a contact email(Single Contact)
g. It can subscribe subscribe on many different services or from a default service. (Warning: It can make your site be slow if you choose this function.).

Configuration

First, please provide an API key's service.Mailchimp orCampaign Monitor

- Chooose the mail service which you want to use.
- Enter API key with the service you have choosen above. Then save it.
- After successful saving, a mail list in your service account will appear: eg: See here Please choose the email which you want to use.
- Enable/Disable Always Check API
- Enable/Disable List to Subscibe. If off then auto switch to subscibe all on list activated
- Enable/Disable Validate email
- Show/Hide Label
- Show/Hide First Name
- Show/Hide Last Name
- Set max width form CSS
- Enter content pre text
- Show/Hide dialog comfirm
- Add JQuery and Bootstrap cho template is not available.
- Enter title dialog
- Enter content dialog

1.7. K2 Content

Module is provided free from K2. Here we introduce the layout which Jv Capitol overrides which will take over the default.
Capitol provide 4 additional sub-templates: Latest, Latest-2, NewsUpdate, Recent. You can see the option sub-temple below:

1.8. Login

Beside Layout Default. Capitol provides 1 additional Alternative Layout: popup

1.9. Menu

If you use this Module to your main navigation, please take a note with this:

Eg: Module Main Menu: At please choose the valueFlex (Default Effect) for

1.10. Module Scroll Up

Module Scroll Up v1.0.0 is the simple module to show button "Scroll To Top". And it also works with Capitol Template.

Please use this attached filemod_scrollup_v1.0.0.zip In file download on themeforest and install it through .

- Enter text of second link
- Choose link of second link
- Enter icon of second link

1.12. VirtueMart Shopping Cart - Joomlavi

Module VirtueMart Shopping Cart - Joomlavi is developed based on Module VirtueMart Shopping Cart of Virtuemart. It will be provided additionally displayed image. Ajax Data processomg, Show module with canvas style. Delete product in cart quickly and virtually .
Please use this the same with Module VirtueMart Shopping Cart

1.13. JV Portfolio

Module is installed together with JV Portfolio Component.

Configuration
- choose layout overider. Capitol provides 4 additional layout for you feel free to choose. Amazing!
- Using layout of this menu to display the content of portfolio detail
- Enable/disable caption effect
- Set caption delay (millisecond)
- Enable/disable caption inverse
- Grid column: 1, 2, 3, 4, 6. If you want to display 5 column, please use class pfo-five please fill inClass suffix
- The number of items which displayed on every page.
- Enable/disable filter
- Enable/disable sort by: Name, Date, Liked
- Display those item which tag is choosen. It is just activated when you activate filter.
- Please choose the way to download Item. Paginate, Scroll load or Button load
- Choosing the size to display thumbnail

- Show/hide title item
- Show/hide tags item
- Show/hide creation date
- Show/hide vote

- Choosign the loading item effect. Please refer to this linkhere
- You should set either default or animate.css

2. Plugins

2.1. Popup

This Plugin display a popup to have a quick look of Virtuemart's product. It's developed by Joomlavi

Please use this attached fileplg_popup_v1.0.2.zip in file download on Themeforest then install it through , see here. Then please plugin này ở , see here

SOURCE & CREDITS

1. Fonts used

Use those font come fromGoogle Fonts
- Montserrat
- Raleway

2. Icons used

- Font Awesome
- Stroke 7 Icon Font

3. Graphics used

Many thanks for these great images to:
- Picjumbo
- Shutterstock
- Pixeden
- Subtle patterns

4. Scripts used

- Bootstrap 3
- Headroom
- Modernizr
- Shuffle
- UIKit
- Magnific Popup
- OWL Carousel v1.3.2
- Images Loaded
- One Page Nav
- Slider Revolution Responsive jQuery Plugin

5. Joomla Extensions

- Virtuemart - Ecommerce component
- K2 Blog
- Simple Image Gallery
- AllVideos
- And Extensions by Joomlavi