L’interactivité ne se limite pas au web. Elle est partout où les relations ont de la valeur, partout où il y a un désir de partager et d’avancer.

In the SJ Plus v2 template we have implemented the animation engine based on the scrollReveal.js script. This script makes creating elements onscroll animations very simple to define.

Thanks to this script you can describe an animation using natural language.

Description of the animation is placed in the data-scroll-reveal attribute:

<!-- These 3 lines are equivalent -->
<div data-scroll-reveal="enter left and move 50px over 1.33s"> Foo </div>
<div data-scroll-reveal="enter from the bottom after 1s"> Bar </div>
<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px"> Baz </div>

The full description of the syntax is available on the project documentation page

We use shortcodes to do the bonus pages, and css file dedicated for bonus pages is joomla-page.less(path: ROOT/templates/YOUR_TEMPLATE/less/joomla-page.less)

Got Questions? We’ve Got Answers!

Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.

Kus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus alique.Ty fames pede elit nibh at risus tempus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas libero odio, fringilla a elementum nec, iaculis a tortor. Praesent eget tortor leo. Cras bibendum mauris ut metus lacinia cursus. Aenean posuere diam quis quam aliquet nec dignissim orci convallis. Mauris molestie tincidunt convallis. Curabitur vestibulum vehicula erat eget placerat.Donec mattis, sapien id ornare interdum, orci nibh egestas nulla, at consectetur nunc libero eget nunc. Sed dignissim nisl at diam

Kus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus alique.Ty fames pede elit nibh at risus tempus.

Splitting a long Article into multiple linked pages

Splitting up long articles into sections is a helpful way of presenting content. Joomla! can be used to split Articles into multiple pages which are linked using Previous and Next page navigation and also a Table of Contents section which is displayed as part of the Article.

• Enter the Page Title and Table of Contents Alias as required:
  • Page Title: Allows you to enter a sub title for the page displayed after the Article title. If left blank the main Article title will be used.
  • Table of Contents Alias: Used to give a shortened name for the Table of Contents which is displayed as part of multiple page Articles. If left blank the link will be displayed as Page #.
• Click the Insert Pagebreak button. The screen will close and a horizontal rule will be inserted to show the location of the Pagebreak.
  • To close the Insert Pagebreak screen without inserting a Pagebreak click the X close button.
• Repeat steps 2-5 for each Pagebreak required.
  • To remove a Pagebreak delete the horizontal rule using the delete or backspace keys.

It is not possible to edit the Page Title and Table of Contents Alias using the content editor once it has been inserted. To modify the Pagebreak you can do one of the following:

• Delete and re-insert the pagebreak using the process described above.
• Edit the raw HTML of the Article using the editor and modify the title and alt attributes of the relevant <hr> HTML tag.

Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Curabitur luctus tortor non quam gravida ultrices. In erat urna, tincidunt nec pulvinar ac, laoreet ut orci. Duis vestibulum, mi id malesuada pulvinar, arcu nibh facilisis augue, ut accumsan urna orci sagittis justo. Donec ut metus eros.

Nulla at tortor et mauris accumsan adipiscing. Morbi pellentesque, dui ut blandit vehicula, lectus ligula aliquam nulla, sed mollis nunc odio at ipsum. Mauris scelerisque metus a justo facilisis ut semper ligula eleifend. Phasellus non odio nibh. Curabitur at tincidunt neque. Nunc euismod malesuada massa ac luctus. Pellentesque sed bibendum velit. Vivamus dictum pulvinar ipsum, vitae vestibulum eros ornare sit amet. Donec ut felis at sem auctor iaculis. Nullam hendrerit tempus tellus, ut fringilla diam vehicula quis. Nulla facilisi. Morbi at eros et leo pulvinar molestie at rutrum orci.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat justo sit amet dui sollicitudin eget interdum nibh gravida. Cras nec placerat libero. Cras id risus sem. Maecenas sit amet ligula turpis, malesuada convallis dui. Ut ligula lorem, vestibulum sit amet fringilla lobortis, posuere at odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer egestas lectus egestas erat convallis et eleifend sapien tempor. Nulla aliquam nisi sed lorem rhoncus ut adipiscing leo semper. Vestibulum sit amet libero ante, a porta augue. Morbi ornare, leo a tristique rutrum, arcu nulla ornare purus, et pharetra tortor lectus at lectus. Cras congue rhoncus eros et facilisis. Maecenas vehicula pretium turpis, in volutpat mauris imperdiet vel. Nulla facilisi. Sed at justo sem, at iaculis ligula. Phasellus ligula tortor, porttitor in imperdiet et, dignissim in metus. Etiam vitae lorem at felis porta auctor. Nullam semper pharetra gravida.

• 1 Dead wrong intro - Notorious
• 2 juicy-r - Notorious
• 3 it's all about the crystalizabeths - Notorious
• 4 Islands is the limit - Notorious
• 5 One more chance for a heart to skip a beat - Notorious
• 6 Suicidal fantasy - Notorious

[playerlist title="TITLE_PLAYERLIST"] 
[player_item src='MP3_SRC' song="SONG_NAME" artist="ARTIST_NAME"] 
[player_item src='MP3_SRC' song="SONG_NAME" artist="ARTIST_NAME"] 
[player_item src='MP3_SRC' song="SONG_NAME" artist="ARTIST_NAME"] 
[/playerlist]

[audio_player src='MP3_SRC' song="SONG_NAME" artist="ARTIST_NAME"]

[carousel width="auto" height="250" align="none" count="3"  control="yes"]
   [carousel_item] ADD_CONTENT_HERE [/carousel_item]
   [carousel_item] ADD_CONTENT_HERE [/carousel_item]
   [carousel_item] ADD_CONTENT_HERE [/carousel_item]
[/carousel]

[tooltip link="#" title='TITLE' position='top']ADD_CONTENT_HERE [tooltip]

[button  link='#' title='TITLE' position='top|right|bottom|left' type='warning']ADD_CONTENT_HERE[[/button]
[button  link='#' title='TITLE' position='top|right|bottom|left' type='primary']ADD_CONTENT_HERE[[/button]
[button  link='#' title='TITLE' position='top|right|bottom|left' type='info']ADD_CONTENT_HERE[[/button]
[button  link='#' title='TITLE' position='top|right|bottom|left' type='success']ADD_CONTENT_HERE[[/button]

Customization Options / Features

• Link : Link for website
• Position : Select position align (top, bottom,left,right)
• Type : Select type color (warning, primary, info, success)
• Title : Text in tooltip

Fusce nec velit ac dolor egestas aliquam

Morbi vestibulum feugiat ipsum eget posuere

Fusce nec velit ac dolor egestas aliquam

Morbi vestibulum feugiat ipsum eget posuere

Fusce nec velit ac dolor egestas aliquam

Morbi vestibulum feugiat ipsum eget posuere

Nulla ac convallis ipsum

Fusce nec velit ac dolor egestas aliquam. In aliquet tincidunt risus, a tempus ante varius ut. Morbi vestibulum feugiat ipsum eget posuere. Sed massa arcu; pretium consectetur suscipit non, adipiscing sit amet massa. Pellentesque ipsum lorem

Maecenas ornare metus eu ultrices mollis. Nullam imperdiet justo nibh, ac vulputate risus porttitor ut. Ut adipiscing adipiscing orci ac blandit. Donec vestibulum nisl placerat lectus mattis adipiscing.

[slideshow width='800' height='350' align='none' count="3"]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
[slideshow]

Nulla ac convallis ipsum

Fusce nec velit ac dolor egestas aliquam. In aliquet tincidunt risus, a tempus ante varius ut. Morbi vestibulum feugiat ipsum eget posuere. Sed massa arcu; pretium consectetur suscipit non, adipiscing sit amet massa. Pellentesque ipsum lorem

Maecenas ornare metus eu ultrices mollis. Nullam imperdiet justo nibh, ac vulputate risus porttitor ut. Ut adipiscing adipiscing orci ac blandit. Donec vestibulum nisl placerat lectus mattis adipiscing.

[slideshow width='400' height='250' align='left' caption="no"]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
[slideshow]

Nulla ac convallis ipsum

Fusce nec velit ac dolor egestas aliquam. In aliquet tincidunt risus, a tempus ante varius ut. Morbi vestibulum feugiat ipsum eget posuere. Sed massa arcu; pretium consectetur suscipit non, adipiscing sit amet massa. Pellentesque ipsum lorem

Maecenas ornare metus eu ultrices mollis. Nullam imperdiet justo nibh, ac vulputate risus porttitor ut. Ut adipiscing adipiscing orci ac blandit. Donec vestibulum nisl placerat lectus mattis adipiscing.

[slideshow width='400' height='250' align='right' caption="no"]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
   [slider_item title='CAPTION_TITLE' src='IMAGE_SRC'] CAPTION_DESCRIPTION [/slider_item]
[slideshow]

Customization Options / Features

• Width : The width for slideshow
• Height : The height for slideshow
• Align : Select position align (left, right, none)
• Src : The image (jpg, png, gif) source, the url should be from site root, eg: "images/.../abc.jpg".
• Title : Title of the item, display as heading of item caption.
• Caption : "caption=no" Not show Title, content of the item Slideshow.

[modal link="#" title="TITLE" header="TITLE_HEADER"]ADD_CONTENT_HERE]/modal]
[modal link="#" icon="comment" type="primary" title="TITLE" header="TITLE_HEADER"]ADD_CONTENT_HERE]/modal]
[modal link="#" icon="info-circle" type="info" title="TITLE" header="TITLE_HEADER"]ADD_CONTENT_HERE]/modal]
[modal link="#" icon="check" type="success" title="TITLE" header="TITLE_HEADER"]ADD_CONTENT_HERE]/modal]
[modal link="#" icon="warning" type="warning" title="TITLE" header="TITLE_HEADER"]ADD_CONTENT_HERE]/modal]
[modal link="#" icon="refresh" type="danger" title="TITLE" header="TITLE_HEADER"]ADD_CONTENT_HERE]/modal]

Choose from over 570 Google Font’s to emphasize your Taglines

comes with over 500 Google web fonts you can pick for all your headings, navigation, titles, topbar, body, twitterbar, breadcrumbs text. Simply go to the Theme Options Panel, under the styling options, and select the fonts that suit you best. You won’t be disappointed with the selection of fonts.

[googlefont font-family="FONT_NAME" size="24" color="#4960B2" align="left" font_weight="400"  margin="1em 0 1em 0"] ADD_CONTENT_HERE [/googlefont]
[googlefont font-family="FONT_NAME" size="20" color="#506FC4" align="left" font_weight="400"  margin="1em 0 1em 0"] ADD_CONTENT_HERE [/googlefont]
[googlefont font-family="FONT_NAME" size="18" color="#5781D6" align="left" font_weight="400"  margin="1em 0 1em 0"] ADD_CONTENT_HERE [/googlefont]
[googlefont font-family="FONT_NAME" size="14" color="#6099EA" align="left" font_weight="400"  margin="1em 0 1em 0"] ADD_CONTENT_HERE [/googlefont]

[toggle_box]
   [toggle_item icon="user" title='ITEM_TITLE1'] ADD_CONTENT_HERE [/toggle_item]
   [toggle_item icon="heart" title='ITEM_TITLE2' active='yes'] ADD_CONTENT_HERE [/toggle_item]
   [toggle_item icon="bell" title='ITEM_TITLE3'] ADD_CONTENT_HERE [/toggle_item]
[/toggle_box]

/*-- Tablet portrait (768x1024) && Small tablet landscape (800x600) --*/
@media (min-width: 768px) and (max-width: 979px) {
    /* Block Lightbox*/
    .yt-lightbox{display: block;}
    div.yt-vimeo iframe,
    div.yt-youtube iframe{width:100%;height: 300px;}
}

[highlighter label="CONTENT_HERE" ] ADD_CONTENT_HERE [/highlighter]

Font Awesome 4.0.3

Font Awesome is a pictographic language of web-related actions which delivers 369 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0. You can find the full examples of usage at Font Awesome - Font Awesome 4.0.3

[icon name="twitter"  size="34" color="#0AA7DB"  ] 
[icon name="facebook" size="34" color="#3C5A9A" ]
[icon name="linkedin" size="34" color="#1B5690" ]

Glyphicons

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to Glyphicons whenever possible.You can find the full examples of usage at Glyphicons - Glyphicons

[icon type="gly" name="user"  align="left" size="80" color="#fff"]
[icon type="gly" name="hd-video"  align="left" size="80" color="#fff"]
[icon type="gly" name="globe"  align="left" size="80" color="#fff"]

1. [youtube align='none' height='HEIGHT' width='WIDTH' ] PLACE_LINK_YOUTUBE [/youtube]

1. [youtube align='left' height='HEIGHT' width='WIDTH'] PLACE_LINK_YOUTUBE [/youtube]

1. [youtube align='right' height='HEIGHT' width='WIDTH'] PLACE_LINK_YOUTUBE [/youtube]

 [vimeo align='none' height='HEIGHT' width='WIDTH' ] PLACE_LINK_HERE [/vimeo]

 [vimeo align='left' height='HEIGHT' width='WIDTH'] PLACE_LINK_HERE [/vimeo]

 [vimeo align='right' height='HEIGHT' width='WIDTH'] PLACE_LINK_HERE [/vimeo]

[testimonial author="TESTIMONIAL_AUTHOR" position="AUTHOR_POSITION"] ADD_TESTIMONIAL_HERE [/testimonial]

[testimonial author="TESTIMONIAL_AUTHOR" position="AUTHOR_POSITION" avatar="URL_IMAGES"]
    ADD_TESTIMONIAL_HERE
[/testimonial]

[testimonial author="TESTIMONIAL_AUTHOR" position="POSITION" avatar="URL_IMAGES" style="blue"] ... [/testimonial]
[testimonial author="TESTIMONIAL_AUTHOR" position="POSITION" avatar="URL_IMAGES" style="red"] ... [/testimonial]
[testimonial author="TESTIMONIAL_AUTHOR" position="POSITION" avatar="URL_IMAGES" style="green"] ... [/testimonial]
[testimonial author="TESTIMONIAL_AUTHOR" position="POSITION" avatar="URL_IMAGES" style="oranges"] ... [/testimonial]

• Home
• Profile
• messages
• settings

Fusce pellentesque commodo

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Suspendisse nisi quam, lobortis eu ultrices at; pellentesque ut arcu! Pellentesque eros ipsum, aliquet vel bibendum sed

Donec volutpat, nibh convallis lacinia rutrum, magna augue pretium est, sed lacinia tellus felis in sapien. Phasellus lorem velit, interdum ac luctus eu, sagittis eget neque.

Read More

Fusce pellentesque commodo

Nulla vitae adipiscing dolor

Donec non felis in elit imperdiet cursus nec et turpis. Phasellus a purus tortor. In porttitor suscipit massa nec euismod! Aenean turpis erat

Volutpat, nibh convallis lacinia rutrum, magna augue pretium est, sed lacinia tellus felis in sapien. Phasellus lorem velit, interdum ac luctus eu, sagittis eget neque.

Read More

Fusce pellentesque commodo

Sed eget lectus eu elit dictum

Nunc sem orci, dictum eget sagittis eget, auctor at arcu. Quisque id urna nulla. Vivamus augue neque, faucibus et placerat id, varius eu turpis.

Donec volutpat, nibh convallis lacinia rutrum, magna augue pretium est, sed lacinia tellus felis in sapien. Phasellus lorem velit, interdum ac luctus eu, sagittis eget neque.

Read More

Fusce pellentesque commodo

Pellentesque commodo dui a neque

Consectetur adipiscing elit. Suspendisse nisi quam, lobortis eu ultrices at; pellentesque ut arcu! Pellentesque eros ipsum, aliquet vel bibendum sed

Donec volutpat, nibh convallis lacinia rutrum, magna augue pretium est, sed lacinia tellus felis in sapien. Phasellus lorem velit, interdum ac luctus eu, sagittis eget neque.

Read More

ITEM_TITLE
ITEM_TITLE
ITEM_TITLE
ITEM_TITLE
 ADD_CONTENT_HERE 
 ADD_CONTENT_HERE 
 ADD_CONTENT_HERE 
 ADD_CONTENT_HERE 

[social type="facebook"]    PLACE_LINK_HERE [/social]
[social type="twitter"] PLACE_LINK_HERE [/social]
[social type="google-plus"]      PLACE_LINK_HERE [/social]
[social type="pinterest"]       PLACE_LINK_HERE [/social]
[social type="dribbble"]    PLACE_LINK_HERE [/social]

[social type="flickr" title="ADD_TITLE_HERE" ]  PLACE_LINK_HERE [/social]
[social type="linkedin" title="ADD_TITLE_HERE" ]     PLACE_LINK_HERE [/social]
[social type="rss" title="ADD_TITLE_HERE" ]      PLACE_LINK_HERE [/social]
[social type="skype" title="ADD_TITLE_HERE" ]    PLACE_LINK_HERE [/social]
[social type="youtube" title="ADD_TITLE_HERE" ] PLACE_LINK_HERE [/social]

[social type="facebook" style="min"]    PLACE_LINK_HERE [/social]
[social type="twitter" style="min"] PLACE_LINK_HERE [/social]
...

[social type="facebook" style="cicle"]    PLACE_LINK_HERE [/social]
[social type="twitter" style="cicle"] PLACE_LINK_HERE [/social]
...

[social type="facebook" style="flat" color="Yes"]    PLACE_LINK_HERE [/social]
[social type="twitter" style="flat" color="Yes"] PLACE_LINK_HERE [/social]
...

[social type="facebook" style="cicle" color="Yes"]    PLACE_LINK_HERE [/social]
[social type="twitter" style="cicle" color="Yes"] PLACE_LINK_HERE [/social]
...

[social type="facebook" title="Facebook" color="Yes"]       PLACE_LINK_HERE [/social]
[social type="twitter" title="Twitter" color="Yes"]     PLACE_LINK_HERE [/social]
[social type="google-plus" title="Google" color="Yes"]           PLACE_LINK_HERE [/social]
[social type="pinterest" title="Pinit" color="Yes"]             PLACE_LINK_HERE [/social]

[social type="facebook" size="small" color="Yes"]       PLACE_LINK_HERE [/social]
[social type="facebook" size="default"  color="Yes"]    PLACE_LINK_HERE [/social]
[social type="facebook" size="large" color="Yes"]       PLACE_LINK_HERE [/social]

[social type="twitter" size="small"  color="Yes"]   PLACE_LINK_HERE [/social]
[social type="twitter" size="default"  color="Yes"] PLACE_LINK_HERE [/social]
[social type="twitter" size="large"  color="Yes"]   PLACE_LINK_HERE [/social]

[social type="pinterest" size="small" color="Yes"]          PLACE_LINK_HERE [/social]
[social type="pinterest" size="default" color="Yes"]        PLACE_LINK_HERE [/social]
[social type="pinterest" size="large" color="Yes"]          PLACE_LINK_HERE [/social]

Add dismiss functionality to all alert messages with this plugin.

[message_box type="error"   close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="info"    close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="warning" close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="success" close="Yes"] ADD_CONTENT_HERE [/message_box]

[message_box title='MESSAGE_TITLE' type="error" close="Yes"] ADD_CONTENT_HERE [/message_box]

Nulla ac convallis ipsum

Nulla ac convallis ipsum

Nulla ac convallis ipsum

Nulla ac convallis ipsum

Nulla ac convallis ipsum

<lightbox src='IMAGE_SRC' width="224" height="190" title="IMAGE_TITLE" align="left" >
<lightbox src='IMAGE_SRC' width="224" height="190" title="IMAGE_TITLE" align="left" style="img-rounded" >
<lightbox src='IMAGE_SRC' width="224" height="190" title="IMAGE_TITLE" align="left" style="img-circle" >

<lightbox src='IMAGE_SRC' width="224" height="190" title="IMAGE_TITLE" align="left" style="img-thumbnail" >
<lightbox src='IMAGE_SRC' width="224" height="190" title="IMAGE_TITLE" align="left" style="borderInner">
<lightbox src='IMAGE_SRC' width="224" height="190" title="IMAGE_TITLE" align="left" style="shadow">

Nullam ultrices

Nulla ac convallis ipsum

Nulla ac convallis ipsum. Nulla tellus erat, dapibus in auctor quis, aliquet a magna. Ut tortor nisl; pellentesque a rhoncus non, semper a quam. Sed aliquet libero at lorem ornare auctor ornare est condimentum.

Morbi pulvinar nibh egestas massa venenatis sed condimentum turpis suscipit. In hac habitasse platea dictumst. Quisque quis odio a odio porttitor mattis! Donec id elit nec massa ornare dictum.

[lightbox src='IMAGE_SRC'  width="200" height="200" lightbox="on" align="left" title="IMAGE_TITLE"] 

IMAGE_TITLE

Nulla ac convallis ipsum

Nulla ac convallis ipsum. Nulla tellus erat, dapibus in auctor quis, aliquet a magna. Ut tortor nisl; pellentesque a rhoncus non, semper a quam. Sed aliquet libero at lorem ornare auctor ornare est condimentum.

Morbi pulvinar nibh egestas massa venenatis sed condimentum turpis suscipit. In hac habitasse platea dictumst. Quisque quis odio a odio porttitor mattis! Donec id elit nec massa ornare dictum.

[lightbox src='IMAGE_SRC'  width="200" height="200" lightbox="on" align="right" title="IMAGE_TITLE"] 

[gallery title="GALLERY_TITLE" width="250" height="180" columns="4"]
    [gallery_item title="IMAGE_TITLE" src='IMAGE_SRC' video_addr="PLACE_LINK_YOUTUBE" ]
	IMAGE_DESCRIPTION
    [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src='IMAGE_SRC' video_addr="PLACE_LINK_YOUTUBE"]
	IMAGE_DESCRIPTION
    [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src='IMAGE_SRC' video_addr="PLACE_LINK_YOUTUBE"]
	IMAGE_DESCRIPTION
    [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src='IMAGE_SRC'] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src='IMAGE_SRC'] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src='IMAGE_SRC'] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src='IMAGE_SRC'] IMAGE_DESCRIPTION [/gallery_item]
[/gallery]

[dropcap  color="#000" ] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...

[dropcap type="square" color="#fff" background="#333"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...

[dropcap type="round" color="#fff" background="#333"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...

Dropcap options

Style and content changes for simple variations on a standard Dropcap.

[dropcap color="#15B5E8"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...
[dropcap color="#FD6C01"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...
[dropcap color="#BE2B2A"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

[button target="_self" link="#"] Default icon="pencil" [/button]
[button type="primary" icon="comment" target="_self" link="#"] Primary [/button]   
[button type="info" icon="info-sign" target="_self" link="#"] Info [/button]   
[button type="success" icon="check" target="_self" link="#"] Success [/button]   
[button type="warning" icon="warning" target="_self" link="#"] warning [/button]   
[button type="danger" icon="refresh" target="_self" link="#"] Danger [/button]   
[button type="inverse" icon="trash" target="_self" link="#"] Inverse [/button]   
[button type="link" icon="twitter" target="_self" link="#"] Link [/button]

Flat buttons

[button type="flat" target="_self" link="#"] Default Button [/button]
[button type="flat primary" target="_self" link="#"] Primary Button [/button]
[button type="flat success" target="_self" link="#"] Success Button [/button]
[button type="flat warning"  target="_self" link="#"] Warning Button [/button]
[button type="flat inverse" target="_self" link="#"] Inverse Button [/button]
[button type="flat info" target="_self" link="#"] Info Button [/button]
[button type="flat danger" target="_self" link="#"] Danger Button [/button]

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add size= large, small, or mini for additional sizes.

[button type="primary" size="lg" target="_self" link="#"] Large button [/button]
[button size="lg" target="_self" link="#"] Large button [/button]

[button type="primary" target="_self" link="#"] Default button [/button]
[button target="_self" link="#"] Default button [/button]

[button type="primary" size="sm" target="_self" link="#"] Small button [/button]
[button size="sm" target="_self" link="#"] Large Small [/button]

[button type="primary" size="xs" target="_self" link="#"] Mini button [/button]
[button size="xs" target="_self" link="#"] Mini button [/button]

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

[button type="primary" size="lg" full="block"] Block level button [/button]
[button size="lg" full="block"] Block level button [/button]

Disabled state

For disabled buttons, add the state=disabled class to links and the disabled attribute for <button> elements.

[button type="primary" size="lg" state="disabled"] Primary button [/button]
[button size="lg" state="disabled"] Button [/button]

Customization Options / Features

• type : style of the button. You can combine the following options(primary, info, success, warning, danger, inverse, link, flat)
• icon : add any mini-icon (from the Icons section) here.
• size : available sizes ( xs, sm, default, lg)
• full : the full width of a parent
• target : link target (eg. target="_blank" will open link in a new window)
• state : disabled buttons, available ( true, disabled)

Unordered lists

A list of items in which the order does not explicitly matter.

[list type="disc"]
[list_item] ... [/list_item]
[/list]

[list type="circle"]
[list_item] ... [/list_item]
[/list]

[list type="square"]
[list_item] ... [/list_item]
[/list]

[list type="check"]
[list_item] ... [/list_item]
[/list]

[list type="arrow"]
[list_item] ... [/list_item]
[/list]

[list type="star"]
[list_item] ... [/list_item]
[/list]

[list type="check" color="#6B82A2" ]
[list_item] ... [/list_item]
[/list]

[list type="arrow" color="#6B82A2"]
[list_item] ... [/list_item]
[/list]

[list type="check" color="#6B82A2" ]
[list_item] ... [/list_item]
[/list]

Ordered lists

A list of items in which the order does explicitly matter.

[list type="roman"]
[list_item] ... [/list_item]
[/list]

[list type="decimal"]
[list_item] ... [/list_item]
[/list]

[list type="alpha"]
[list_item] ... [/list_item]
[/list]

Number Block

A list of items in which the order does explicitly matter.

[list type="numblocks1"]
[list_item] ... [/list_item]
[/list]

[list type="numblocks2"]
[list_item] ... [/list_item]
[/list]

[list type="numblocks3"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber1"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber2"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber3"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber4"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber6"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber5"]
[list_item] ... [/list_item]
[/list]

Customization Options / Features

• type (optional) – more optional type list (disc, circle, square, check, arrow, star, roman, decimal, alpha, numblocks1...)
• color (optional) – changes color of type list (disc, circle, square, check, arrow, star, roman, decimal, alpha)

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

[quote width="auto" align="none" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

Blockquote options

Style and content changes for simple variations on a standard blockquote.

[quote width="45%" align="left" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

[quote width="45%" align="right" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

[quote align="none" border="#468847" color="#468847" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#F89406" color="#F89406" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#B24745" color="#B24745" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#3A87AD" color="#3A87AD" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

Customization Options / Features

• Width : Select number unit (px, %, em...)
• Align : Select position align (left, right, none)
• Border : Changes border color Blockquote
• Color : Changes text color Blockquote
• Title : Someone famous in Source Title

Quisque arcu elit, condimentum eu convallis nec, mattis vitae elit. Aliquam eu justo eu ipsum ultricies rutrum non eu sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue porttitor ligula, in tempor ipsum sagittis ut. Suspendisse sit amet tortor urna, ut mattis massa.

Quisque arcu elit, condimentum eu convallis nec, mattis vitae elit. Aliquam eu justo eu ipsum ultricies rutrum non eu sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue porttitor ligula, in tempor ipsum sagittis ut. Suspendisse sit amet tortor urna, ut mattis massa.

Quisque arcu elit, condimentum eu convallis nec, mattis vitae elit. Aliquam eu justo eu ipsum ultricies rutrum non eu sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue porttitor ligula, in tempor ipsum sagittis ut. Suspendisse sit amet tortor urna, ut mattis massa.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Gimes pede elit nibh at risus tempus. Nulla semper ac nec sit massa In Curabitur id risus sit. Non ante gravida eros quis justo sed nonummy et velit orci sagittis eu

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Kus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus alique.Ty fames pede elit nibh at risus tempus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Nis nulla interdum et. Cursus senectus aliquet pretium at tristique hac ullamcorper adipiscing et Donec. Enim montes parturient metus laoreet dignissim

Rance fanceus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus alique maken chika

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

Suspendisse at libero porttitor nisi aliquet vulputate vitae at velit. Aliquam eget arcu magna, vel congue dui. Nunc auctor mauris tempor leo aliquam vel porta ante sodales. Nulla facilisi. In accumsan mattis odio vel luctus.

SJ iTech Template is using:

• Modules:

  • SJ Basic News
  • SJ Carousel
  • SJ Content Accordion
  • SJ Module Tabs
  • SJ Contact Ajax
  • SJ K2 Extra Slider
  • SJ Mega K2 News
  • SJ Responsive Listing for K2
  • SJ K2 Slideshow
  • SJ K2 Slideshow II
  • SJ Twitter
  • ACYMAILING STARTER

• Plugins

  • YT Framework Plugin
  • YT Shortcodes Plugin
  • SJ Content Related News
  • SJ Listing Ajax for Content

• Component

  • K2

This Joomla! template supports a wide variety of module positions which can be archived automatically by the system.The module positions are fully collapsible mean that if there are no modules published in particular position, this module position will disappear and the other modules with take this place. Also you can have 2-Columns layout (content, left or right)

Click here to view clearer picture

Enter any available suffixes at Extensions - Module Manager - Module - Module Class Suffix.

This template's module system comes with a wide range of module styles, color variations, badges and icons. Below you can see which module styles come with color variations and with which badges and icons you can combine them.Here is a list of the available options:

Yt Framework uses xml file to render your layout. The framework supports all general features of a joomla template. The below is the list of features:

• Multiple Layouts: Left-Main-Right, Left-Main, Main-Right, etc. With xml file, you can easy to create some layouts for a joomla template
• Mobile Ready
• Table-less Layout
• Search Engine Friendly
• Modules Types
• Cross-browser Support
• Typography
• Validation
• Template Parameters
• Google Font
• Font Size
• RTL language support