Use any number of notifications shortcodes within your Joomla articles or modules.
They can easily be added inside the editor by using [yjsgfa name="fa fa-picture-o"] 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:

[yjsgpre pretty="1" scroll="0"] {yjsgnote color="red" close="no" title="Title" border="default" radius="0" icon=""} Some text... {/yjsgnote} [/yjsgpre]
[yjsgnote color="red" close="no" title="Notification red" border="default" radius="0" 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. [/yjsgnote]
[yjsgnote color="green" close="no" title="Notification green" border="default" radius="0" 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. [/yjsgnote]
[yjsgnote color="blue" close="no" title="Notification blue" border="default" radius="0" 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. [/yjsgnote]
[yjsgnote color="yellow" close="no" title="Notification yellow" border="default" radius="0" 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. [/yjsgnote]
[yjsgnote color="gray" close="no" title="Notification gray" border="default" radius="0" 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. [/yjsgnote]
[yjsgnote color="dark" close="no" title="Notification dark" border="default" radius="0" 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. [/yjsgnote]
[yjsgnote color="clear" close="no" title="Notification clear" border="default" radius="0" 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. [/yjsgnote]

Notifications with close button

shortcode:

[yjsgpre pretty="1" scroll="0"] {yjsgnote color="red" close="yes" title="Title" border="default" radius="0" icon=""} Some text... {/yjsgnote} [/yjsgpre] [yjsgnote color="red" close="yes" title="Notifications with close button" border="default" radius="0" 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. [/yjsgnote]

Notifications with icon

shortcode:

[yjsgpre pretty="1" scroll="0"] {yjsgnote color="red" close="yes" title="Title" border="default" radius="0" icon="fa fa-heart fa-lg"} Some text... {/yjsgnote} [/yjsgpre] [yjsgnote color="red" close="yes" title="Notifications with icon" border="default" radius="0" icon="fa fa-heart fa-lg"] 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. [/yjsgnote]

Notifications with border radius

shortcode:

[yjsgpre pretty="1" scroll="0"] {yjsgnote color="blue" close="yes" title="Title" border="default" radius="radiusb5" icon="fa fa-camera fa-lg"} Some text... {/yjsgnote} [/yjsgpre] [yjsgnote color="blue" close="yes" title="Notifications with border radius" border="default" radius="radiusb5" icon="fa fa-camera fa-lg"] 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. [/yjsgnote]

Notifications dashed with border radius

shortcode:

[yjsgpre pretty="1" scroll="0"] {yjsgnote color="blue" close="yes" title="Title" border="dashedb" radius="radiusb5" icon="fa fa-camera fa-lg"} Some text... {/yjsgnote} [/yjsgpre] [yjsgnote color="blue" close="yes" title="Notifications dashed with border radius" border="dashedb" radius="radiusb5" icon="fa fa-camera fa-lg"] 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. [/yjsgnote]

Notifications dotted with border radius

shortcode:

[yjsgpre pretty="1" scroll="0"] {yjsgnote color="green" close="yes" title="Title" border="dottedb" radius="radiusb5" icon="fa fa-camera fa-lg"} Some text... {/yjsgnote} [/yjsgpre] [yjsgnote color="green" close="yes" title="Notifications dotted with border radius" border="dottedb" radius="radiusb5" icon="fa fa-camera fa-lg"] 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. [/yjsgnote]

Notifications double with border radius

shortcode:

[yjsgpre pretty="1" scroll="0"] {yjsgnote color="green" close="yes" title="Title" border="doubleb" radius="radiusb5" icon="fa fa-camera fa-lg"} Some text... {/yjsgnote} [/yjsgpre] [yjsgnote color="yellow" close="yes" title="Notifications double with border radius" border="doubleb" radius="radiusb5" icon="fa fa-camera fa-lg"] 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. [/yjsgnote]