Inicio
Shortcodes
Button
The structure used:
[ jvbutton link="http://joomlavi.com" color="btn-theme" size="btn-lg" type="btn-round" target="blank" icon=""]See more[/jvbutton]
Options:
- [link]: your url
- [color]:
btn-theme
,btn-primary
,btn-success
,btn-warning
,btn-danger
,btn-inverse
- [size]:
btn-lg
,btn-sm
,btn-xs
- [type]:
btn-round
,btn-outline
- [target]:
blank
,self
,parent
,top
- [icon]: Template classes that support. Example:
fa fa-star
,gala-star
,icon-star
[jvbutton color="btn-theme" type="btn-round" target="blank" icon="fa fa-flash"]See more[/jvbutton] [jvbutton color="btn-primary" type="btn-round" target="blank" icon=""]See more[/jvbutton] [jvbutton color="btn-danger" type="btn-outline btn-round" target="blank" icon=""]See more[/jvbutton]
Social
The structure used:
[ jvsocial mode="facebook_like" name="user_name" width="250" height="24"]
Options:
- [mode]:
facebook_like
,facebook_fanpage
,twitter_follow
,twitter_tweet
- [name]: Page name (only facebook_fanpage & twitter_follow)
- [width]/[height]: Width/height block facebook fanpage (only facebook_fanpage)
Quote block
The structure used:
[ jvquote type="quote-green" title="Someone famous in" subtitle="Source Title"]Cotents[/jvquote]
Options:
- [type]:
quote-green
,quote-red
,quote-yellow
,quote-icon
,quote-unstyled
or empty - [title]: Your title
- [subtitle]: Your subtitle
List style
The structure used:
[ jvlist type="arrow" icon="fa fa-star"]List item|List item|List item[/jvlist]
Options:
- [type]:
arrow
,check
,square
,round
or empty - [icon]: Template classes that support. Example:
fa fa-star
,gala-star
,icon-star
Arrow list
[jvlist type="arrow"]List item 1|List item 2|List item 3[/jvlist]Check list
[jvlist type="check"]List item 1|List item 2|List item 3[/jvlist]Round list
[jvlist type="round"]List item 1|List item 2|List item 3[/jvlist]Icon list
[jvlist icon="fa fa-calendar-o"]List item 1|List item 2|List item 3[/jvlist]Alert
The structure used:
[ jvalert type="success " close="yes" icon="yes" title="Your title"]Content[/jvalert]
Options:
- [type]:
success
,info
,warning
,danger
- [icon]:
yes
orno
(default) - [close]:
yes
orno
(default) - [title]: Your title
Accordion
The structure used:
[ jvaccordions type="accordions" style="icon" theme="info"] [jvaccordion title="Title 1" icon="fa fa-user" active="yes"]content[/jvaccordion] [jvaccordion title="Title 2" icon="fa fa-user" ]content[/jvaccordion] [/jvaccordions]
Options:
- [type]:
toggle
,accordions
or empty (default) - [style]:
icon
,unstyled
or empty (default) - [theme]:
theme
,primary
,info
,success
,danger
,warnig
or empty - [title]: Your title of accordion item
- [icon]: Icon title of accordion item. Template classes that support. Example:
fa fa-star
,gala-star
,icon-star
Accordion:
Toggle:
Columns
The structure used:
[ jvcolumns] [jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol] [jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol] [jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol] [jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol] [/jvcolumns]
Options:
- [number]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 1200px
- [desktop]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 992px
- [tablet]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 768px
- [mobile]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang bé hơn 768px
- [head]: heading
h1
,h2
,h3
,h4
,h5
,h6
,p
... - [title]: Your title
Testimonials
The structure used:
[jvtestimonials style="slide" number="4" desktop="4" tablet="2" mobile="1" title="Title" border="no"] [jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest] [jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest] [jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest] [/jvtestimonials]
Options:
- [style]:
silde
,full
andclassic
or empty dedault - [number]: Số cột trên màn hình chiều ngang lớn hơn 1200px (only classic style)
- [desktop]: Số cột trên màn hình chiều ngang lớn hơn 992px (only classic style)
- [tablet]: Số cột trên màn hình chiều ngang lớn hơn 768px (only classic style)
- [mobile]: Số cột trên màn hình chiều ngang bé hơn 768px (only classic style)
- [title]: Your title (only full style)
- [border]: Show/hidden border
Tabs
The structure used:
[ jvtabs active="1"] [jvtab title="Tab 1" icon=""]Content tab 1[/jvtab] [jvtab title="Tab 2" icon=""]Content tab 2[/jvtab] [jvtab title="Tab 3" icon=""]Content tab 3[/jvtab] [/jvtabs]
Options:
- [active]: Tab panel active
- [title]: Tab title
- [icon]: Template classes that support. Example:
fa fa-star
,gala-star
,icon-star
[jvtabs active="1"] [jvtab title="Tab 1" icon="gala-rocket-stroke"]Tab 1, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 2" icon="gala-leaf-stroke"]Tab 2, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 3" icon="gala-location-stroke"]Tab 3, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 4" icon="fa fa-star"]Tab 4, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [/jvtabs]
[jvtabs active="1" style="left"] [jvtab title="Tab 1" icon="gala-rocket-stroke"]Tab 1, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 2" icon="gala-leaf-stroke"]Tab 2, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [/jvtabs]
[jvtabs active="1" style="right"] [jvtab title="Tab 1" icon="gala-rocket-stroke"]Tab 1, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 2" icon="gala-leaf-stroke"]Tab 2, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [/jvtabs]
Pricing table
The structure used:
[ jvpricing number="4" desktop="4" tablet="2" mobile="1" color="theme"] [jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="yes"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [/jvpricing]
Options:
- [color]:
theme
,primary
,info
,success
,danger
,warnig
or empty - [number]: Số cột trên màn hình chiều ngang lớn hơn 1200px
- [desktop]: Số cột trên màn hình chiều ngang lớn hơn 992px
- [tablet]: Số cột trên màn hình chiều ngang lớn hơn 768px
- [mobile]: Số cột trên màn hình chiều ngang bé hơn 768px
- [title]: Your title
- [button_link]: Your button link
- [button_label]: Your button label
- [price]: Your price
- [per]: Your per price. Example: day, month, year...
- [feature]: Select Plan feature.
[jvpricing number="4" desktop="4" tablet="2" mobile="1" color="theme"] [jvplan title="Standard" button_link="http://joomlavi.com" button_label="Purchase" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Premium" button_link="http://joomlavi.com" button_label="Purchase" price="$25" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Profesional" button_link="http://joomlavi.com" button_label="Purchase" price="$35" per="month" feature="yes"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Ultimate" button_link="http://joomlavi.com" button_label="Purchase" price="$45" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [/jvpricing]
Progressbar
The structure used:
[jvprogressbar theme="back"] [jvprogress title="Graphic Design" width="75"] [jvprogress title="Web Design" width="87"] [jvprogress title="Development" width="63"] [/jvprogressbar]
Options:
- [theme]:
theme
,primary
,info
,success
,danger
,warnig
, ,black
,white
or empty - [title]: Your title
- [width]: Bar width.
[jvprogressbar] [jvprogress title="Graphic Design" width="75"] [jvprogress title="Web Design" width="87"] [jvprogress title="Development" width="63"] [/jvprogressbar]
Piechart
The structure used:
[ jvpiechart title="Title" from="100" to="25" barcolor="#dddddd" trackcolor="#ffd442" linecap="10" linewidth="10" size="253" icon="gala-flash-stroke"]
Options:
- [title]: Your title
- [from]: Start point
- [to]: End point
- [barcolor]: The color of the curcular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color.
- [trackcolor]: The color of the track for the bar, false to disable rendering.
- [linecap]: Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
- [linewidth]: Width of the bar line in px.
- [size]: Size of the pie chart in px. It will always be a square.
- [icon]: Template classes that support. Example:
fa fa-star
,gala-star
,icon-star
[jvpiechart title="Title" from="100" to="25" barcolor="#dddddd" trackcolor="#ffd442" linecap="10" linewidth="10" size="253" icon="gala-flash-stroke"]
Counting
The structure used:
[ jvcounting title="Title" color="theme" number="56343" icon="gala-flash-stroke"]
Options:
- [title]: Your title
- [color]:
theme
,primary
,info
,success
,danger
,warnig
,back
,white
or empty - [number]: Your number
- [icon]: Template classes that support. Example:
fa fa-star
,gala-star
,icon-star
Services
The structure used:
[ jvservices type="feature" title="Title" color="theme" icon="gala-flash-stroke"]Cotent[/jvservices]
Options:
- [title]: Your title
- [color]:
theme
,primary
,info
,success
,danger
,warnig
or empty - [icon]: Template classes that support. Example:
fa fa-star
,gala-star
,icon-star