Shortcodes (8)
Advanced template shortcodes
Enhance your website with custom shrotcodes. YJSG v2 comes with custom shortcodes located under your text editor .
Parse page
28 мая 2014
Yjsgparse is very powerful shortcode and can read external or internal page, cache it's contents and import it inside your Joomla article or extension. Please note that yjsgparse is including only safe html tags located inside the page body tag.
options:
| Option | Description |
|---|---|
url |
*Required option. Url link to the page you want parsed. |
days |
*Required option. If left empty cached page is recreated after 10 days and cached again. |
hours |
*Required option. If left empty cached page is recreated after 10 days and cached again. |
allowjs |
If declared the page javascript will be cached |
examples:
Yjsgparse example:
This entire article content is parsed from an external source.
markup:
[yjsgparse url="link to your page" days="1" hours="2"]// cache will be recreated in 1 day and 2 hours [yjsgparse url="link to your page" days="" hours=""]// cache will be recreated in 10 days [yjsgparse url="link to your page" days="" hours="0.5"]// cache will be recreated in 30 minutes [yjsgparse url="link to your page" days="" hours="" allowjs]// cache page with javascript
Code snippets
25 мая 2014
Present your code snippets with Yjsg v2 simple shrotcode. There is no need to reformat html for your pre content or even think about indenting your code. Just use yjsgpre shortcode within your text editor.
options:
| Options | Description |
|---|---|
pretty="1" |
*Required option. 1 display line number, 0 do not display line numbers. |
scroll="1" |
*Required option. 1 set max height of 340px on pre container, 0 do not set max height. |
example:
<div class="mycoolcode">
My cool code content
</div>
example:
<div class="mycoolcode">
My cool code content
</div> shortcode:
[yjsgpre pretty="1" scroll="0"]
<div class="mycoolcode">
My cool code content
</div>
[/yjsgpre] Tabs
18 мая 2014
Use any number of tabs shortcodes within your Joomla articles or modules.
They can easily be added inside the editor by using
Tabs shortcode form
located under text editor or by adding shortcodes directly.
examples:
Tabnav
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Pellentesque placerat nisl sed pulvinar consectetur.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien.
Tabpills
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis.Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Tabs left
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien.Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Tabs right
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Tabs centered
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas dignissim quam vel pretium. Fusce elementum vulputate sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
shortcode:
[yjsgstabs id="tabs5" type="tabnav"]//tabnav|tabpills|tabsleft|tabsright|tabscentered [yjsgstabsgroup title="Tab title" active="1"]Tab content goes here...[/yjsgstabsgroup] [yjsgstabsgroup title="Tab title" active="0"]Tab content goes here...[/yjsgstabsgroup] [yjsgstabsgroup title="Tab title" active="0"]Tab content goes here...[/yjsgstabsgroup] [/yjsgstabs]
Icons
18 мая 2014
Use any number of icons shortcodes within your Joomla articles or modules.
They can easily be added inside the editor by using
Icons shortcode form
located under text editor or by adding shortcodes directly.
example:
shortcode:
[yjsgfa name="fa fa-music"] [yjsgfa name="fa fa-heart fa-border"] [yjsgfa name="fa fa-flag fa-2x"] [yjsgfa name="fa fa-clock-o fa-3x"] [yjsgfa name="fa fa-star fa-4x"] [yjsgfa name="fa fa-spinner fa-spin fa-5x"]
Image Effects
30 ноября -0001
Use any number of images shortcodes within your Joomla articles or modules.
They can easily be added inside the editor by using
Images shortcode form
located under text editor or by adding shortcodes directly.
Lighbox
shortcode:
[yjsgimgs image="image" class="yjsg-lightbox radiusb5" title="Image 1" link="lightbox-image" target="" effect="none"]
Lighbox gallery
shortcode:
[yjsgimgs image="image1" class="yjsg-lightbox-items" title="Image 1" link="lightbox-image1" target="" effect="none"] [yjsgimgs image="image2" class="yjsg-lightbox-items" title="Image 2" link="lightbox-image2" target="" effect="none"] [yjsgimgs image="image3" class="yjsg-lightbox-items" title="Image 3" link="lightbox-image3" target="" effect="none"]
Polaroid
shortcode:
[yjsgimgs image="image" class="yjt_polaroid" title="Polaroid 1" link="" target="" effect="none"] [yjsgimgs image="image" class="yjt_polaroid" title="Polaroid 2" link="" target="" effect="none"] [yjsgimgs image="image" class="yjt_polaroid" title="Polaroid 3" link="" target="" effect="none"]
Tilted group
shortcode:
[yjsgimgs image="image" class="yjt_polaroid yjt_group" title="Polaroid 1" link="" target="" effect="none"] [yjsgimgs image="image" class="yjt_polaroid yjt_group" title="Polaroid 2" link="" target="" effect="none"] [yjsgimgs image="image" class="yjt_polaroid yjt_group" title="Polaroid 3" link="" target="" effect="none"] [yjsgimgs image="image" class="yjt_polaroid yjt_group" title="Polaroid 4" link="" target="" effect="none"]
Fade hover effect
Morph hover effect
Tilt hover effect
shortcode:
[yjsgimgs image="image" class="" title="" link="" target="" effect="fade|0.5|800"] [yjsgimgs image="image" class="" title="" link="" target="" effect="morph"] [yjsgimgs image="image" class="" title="" link="" target="" effect="tilt"]
Borders
shortcode:
[yjsgimgs image="image" class="bthin radiusb5" title="Image 1" link="" target="" effect="none"] [yjsgimgs image="image" class="bthick" title="Image 1" link="" target="" effect="none"] [yjsgimgs image="image" class="bspace" title="Image 1" link="" target="" effect="none"] [yjsgimgs image="image" class="bspacethick" title="Image 1" link="" target="" effect="none"]
Media
30 ноября -0001
Use any number of media elements within your Joomla articles or modules.
They can easily be added inside the editor by using
Media shortcode form
located under text editor or by adding shortcodes directly.
Audio
Missing MediaElelement:
Please go to template manager, tab Additional features and turn on MediaElementshortcode:
[yjsgmedia link="link to mp3" poster="" width="" height="" resp="yes" id="yjsg_media137"]
HTML5 video
[yjsgmedia link="images/docs/small.mp4" poster="/landshaft/images/docs/html5-poster.jpg" width="640" height="360" resp="yes" id="yjsg_media289"]shortcode:
[yjsgmedia link="link to mp4" poster="link to image" width="640" height="360" resp="yes" id="yjsg_media289"]
Youtube video
[yjsgmedia link="https://www.youtube.com/watch?v=0KSOMA3QBU0" poster="/landshaft/" width="640" height="360" resp="yes" id="yjsg_media253"]shortcode:
[yjsgmedia link="link to youtube" poster="" width="640" height="360" resp="yes" id="yjsg_media253"]
Vimeo video
[yjsgmedia link="http://vimeo.com/50700106" poster="/landshaft/" width="640" height="360" resp="yes" id="yjsg_media291"]shortcode:
[yjsgmedia link="link to vimeo" poster="" width="640" height="360" resp="yes" id="yjsg_media291"]
Notifications
30 ноября -0001
Use any number of notifications shortcodes within your Joomla articles or modules.
They can easily be added inside the editor by using
Notifications shortcode form
located under text editor or by adding shortcodes directly. Notification can be combined with icons, border types or border radius as well.
Notifications colors
shortcode:
[yjsgnote color="red" close="no" title="Title" border="default" radius="0" icon=""] Some text... [/yjsgnote]
Notification red
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notification green
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notification blue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notification yellow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notification gray
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notification dark
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notification clear
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notifications with close button
shortcode:
[yjsgnote color="red" close="yes" title="Title" border="default" radius="0" icon=""] Some text... [/yjsgnote]
Notifications with close button
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notifications with icon
shortcode:
[yjsgnote color="red" close="yes" title="Title" border="default" radius="0" icon="fa fa-heart fa-lg"] Some text... [/yjsgnote]
Notifications with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notifications with border radius
shortcode:
[yjsgnote color="blue" close="yes" title="Title" border="default" radius="radiusb5" icon="fa fa-camera fa-lg"] Some text... [/yjsgnote]
Notifications with border radius
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notifications dashed with border radius
shortcode:
[yjsgnote color="blue" close="yes" title="Title" border="dashedb" radius="radiusb5" icon="fa fa-camera fa-lg"] Some text... [/yjsgnote]
Notifications dashed with border radius
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notifications dotted with border radius
shortcode:
[yjsgnote color="green" close="yes" title="Title" border="dottedb" radius="radiusb5" icon="fa fa-camera fa-lg"] Some text... [/yjsgnote]
Notifications dotted with border radius
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Notifications double with border radius
shortcode:
[yjsgnote color="green" close="yes" title="Title" border="doubleb" radius="radiusb5" icon="fa fa-camera fa-lg"] Some text... [/yjsgnote]
Notifications double with border radius
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Accordions
30 ноября -0001
Use any number of accordions shortcodes within your Joomla articles or modules.
They can easily be added inside the editor by using
Accordions shortcode form
located under text editor or by adding shortcodes directly.
examples:
shortcode:
[yjsgacs id="myid"] [yjsgacgroup title="My title" active="1"]Accordion content goes here...[/yjsgacgroup] [yjsgacgroup title="My title" active="0"]Accordion content goes here...[/yjsgacgroup] [yjsgacgroup title="My title" active="0"]Accordion content goes here...[/yjsgacgroup] [yjsgacgroup title="My title" active="0"]Accordion content goes here...[/yjsgacgroup] [yjsgacgroup title="My title" active="0"]Accordion content goes here...[/yjsgacgroup] [/yjsgacs]