List all Categories

Useful Blocks - Bordered and Square Icon

Here are some examples of the Useful Blocks. You can easily define them (it's a Joomla Module) with a lot of integrated options to choose from.

Useful Blocks - Bordered and Round Icon

Here are some examples of the Useful Blocks. You can easily define them (it's a Joomla Module) with a lot of integrated options to choose from.

Useful Blocks - Not Bordered and Round / Square Icon

Here are some examples of the Useful Blocks. You can easily define them (it's a Joomla Module) with a lot of integrated options to choose from.

YouTube Video

This is a basic example of embedding a responsive YouTube video.

Shortcode

{youtube id="tu-ICTkM4SE"}

Vimeo Video

This is a basic example of embedding a responsive Vimeo video.

Shortcode

{vimeo id="63104408"}

Soundcloud (small)

This is a basic example of embedding a small Soundcloud iFrame.

Shortcode

{soundcloud-small url="url-here.com"}

Soundcloud (large)

This is a basic example of embedding a large Soundcloud iFrame.

Shortcode

{soundcloud-large url="url-here.com"}

General iFrame

This is a basic example of embedding a responsive iFrame.

Shortcode

{iframe url="http://clrs.cc/"}

Font Awesome default Icons

Default Icons

This is a example of the default Font Awesome Icons in different Colors and with size fa-5x.

Shortcode

{icon name="fa-joomla" size="fa-5x"}
{icon name="fa-leaf" size="fa-5x" color="color-black"}
{icon name="fa-flask" size="fa-5x" color="color-theme"}
{icon name="fa-magic" size="fa-5x" color="color-success"}
{icon name="fa-power-off" size="fa-5x" color="color-warning"}
{icon name="fa-star-o" size="fa-5x" color="color-purple"}
{icon name="fa-desktop" size="fa-5x" color="color-danger"}
{icon name="fa-globe" size="fa-5x" color="color-orange"}

Font Awesome default Icon sizes

This is a example of the default Font Awesome Icons in different Colors and with different sizes.

Shortcode

{icon name="fa-info"}
{icon name="fa-lock" size="fa-lg" color="color-black"}
{icon name="fa-magic" size="fa-2x" color="color-theme"}
{icon name="fa-pencil" size="fa-3x" color="color-success"}
{icon name="fa-power-off" size="fa-4x" color="color-warning"}
{icon name="fa-file" size="fa-5x" color="color-purple"}

Font Awesome round icons

This is a example of the default Font Awesome Icons in solid round style.

Shortcode

{icon-round name="fa-info"}
{icon-round name="fa-lock" size="fa-lg" color="color-black"}
{icon-round name="fa-magic" size="fa-2x" color="color-theme"}
{icon-round name="fa-pencil" size="fa-3x" color="color-success"}
{icon-round name="fa-power-off" size="fa-4x" color="color-warning"}
{icon-round name="fa-file" size="fa-5x" color="color-purple"}

Font Awesome round bordered icons

This is a example of the default Font Awesome Icons in round bordered style.

Shortcode

{icon-round-border name="fa-info"}
{icon-round-border name="fa-lock" size="fa-lg" color="color-black"}
{icon-round-border name="fa-magic" size="fa-2x" color="color-theme"}
{icon-round-border name="fa-pencil" size="fa-3x" color="color-success"}
{icon-round-border name="fa-power-off" size="fa-4x" color="color-warning"}
{icon-round-border name="fa-file" size="fa-5x" color="color-purple"}

Font Awesome square icons

This is a example of the default Font Awesome Icons in solid square style.

Shortcode

{icon-square name="fa-info"}
{icon-square name="fa-lock" size="fa-lg" color="color-black"}
{icon-square name="fa-magic" size="fa-2x" color="color-theme"}
{icon-square name="fa-pencil" size="fa-3x" color="color-success"}
{icon-square name="fa-power-off" size="fa-4x" color="color-warning"}
{icon-square name="fa-file" size="fa-5x" color="color-purple"}

Font Awesome square bordered icons

This is a example of the default Font Awesome Icons in square bordered style.

Shortcode

{icon-square-border name="fa-info"}
{icon-square-border name="fa-lock" size="fa-lg" color="color-black"}
{icon-square-border name="fa-magic" size="fa-2x" color="color-theme"}
{icon-square-border name="fa-pencil" size="fa-3x" color="color-success"}
{icon-square-border name="fa-power-off" size="fa-4x" color="color-warning"}
{icon-square-border name="fa-file" size="fa-5x" color="color-purple"}

All available Icons

Here you can see all available Icons. But in the Package is also a Editor Button integrated for easy usage.

Lightbox

RokBox is a fully responsive Lightbox Plugin for the Joomla CMS. This very popular extension can showcase many different media formats such as images, videos, music, embedded widgets, Ajax content, and Joomla modules, all from a three-dimensional display. It also takes advantage of new technologies such as HTML5/CSS3. Details

Image

YouTube Video

Vimeo Video

iFrame

Google Map

Spotify

SoundCloud (Small)

SoundCloud (Large)

TwitPic

Shortcode

{image-overlay image="small-image.jpg" link="large-image.jpg"}

{image-overlay image="small-image.jpg" link="http://youtu.be/HjcPOZ_z3Ts"}

{image-overlay image="small-image.jpg" link="http://vimeo.com/94502406"}

{image-overlay image="small-image.jpg" link="http://www.wikipedia.com"}

{image-overlay image="small-image.jpg" link="https://maps.google.com/maps?q=stuttgart&hl=de&ie=UTF8&sll=37.0625,-95.677068&sspn=83.206395,191.513672&hnear=Stuttgart,+Baden-W%C3%BCrttemberg,+Deutschland&t=m&z=12"}

{image-overlay image="small-image.jpg" link="http://open.spotify.com/user/w00fz/playlist/2OCzUYQMB93T19UAq8hGSK"}

{image-overlay image="small-image.jpg" link="soundcloud-iframe-link" data="data-rokbox-size='900 200'"}

{image-overlay image="small-image.jpg" link="soundcloud-iframe-link" data="data-rokbox-caption='SoundCloud Player (large, without Autoplay)'"}

{image-overlay image="small-image.jpg" link="http://twitpic.com/e59kre"}

Gallery 6 Columns

Gallery 5 Columns

Gallery 4 Columns

Gallery 3 Columns

Gallery 2 Columns

Shortcode

{gallery columns="4"}
  {gallery-image image="image1.jpg"}
  {gallery-image image="image2.jpg"}
  {gallery-image image="image3.jpg"}
  {gallery-image image="image4.jpg"}
{/gallery}

Animations when a Element becomes visible

Here are some examples how to use the Shortcodes for the Animations. These Animation Effect will be activated when a Element, no matter which one, becomes visible, means when it comes into the Viewport.

Best of all: you can use the Animations on the Module Class Suffix, so you can animate nearly every element!

Animation bounceIn

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

Animation bounceInDown

Animation bounceInLeft

Animation bounceInRight

Animation bounceInUp

Animation fadeIn

Animation fadeInDown

Animation fadeInDownBig

Animation fadeInLeft

Animation fadeInLeftBig

Animation fadeInRight

Animation fadeInRightBig

Animation fadeInUp

Animation fadeInUpBig

Animation flipInX

Animation flipInY

Animation lightSpeedIn

Animation rotateIn

Animation rotateInDownLeft

Animation rotateInDownRight

Animation rotateInUpLeft

Animation rotateInUpRight

Animation rollIn

Shortcode

{animate effect="bounceIn"}Your Content or Element here{/animate}

Or use the Module Class Suffix: animation bounceIn
Please do not forget the whitespace in front of animation)

Possible animation names:

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rollIn

Shortcode System

Sottocategorie

Elements

Tables

Pagina 2 di 2

{emailcloak=off}

Azienda Servizi Municipalizzati - Taormina

Useful Blocks - Bordered and Square Icon

Useful Blocks - Bordered and Round Icon

Useful Blocks - Not Bordered and Round / Square Icon

YouTube Video

Vimeo Video

Soundcloud (small)

Soundcloud (large)

General iFrame

Font Awesome default Icons

Default Icons

Font Awesome default Icon sizes

Font Awesome round icons

Font Awesome round bordered icons

Font Awesome square icons

Font Awesome square bordered icons

All available Icons

Lightbox

Gallery 6 Columns

Gallery 5 Columns

Gallery 4 Columns

Gallery 3 Columns

Gallery 2 Columns

Animations when a Element becomes visible

Animation bounceIn

Animation bounceInDown

Animation bounceInLeft

Animation bounceInRight

Animation bounceInUp

Animation fadeIn

Animation fadeInDown

Animation fadeInDownBig

Animation fadeInLeft

Animation fadeInLeftBig

Animation fadeInRight

Animation fadeInRightBig

Animation fadeInUp

Animation fadeInUpBig

Animation flipInX

Animation flipInY

Animation lightSpeedIn

Animation rotateIn

Animation rotateInDownLeft

Animation rotateInDownRight

Animation rotateInUpLeft

Animation rotateInUpRight

Animation rollIn

Sottocategorie

About Smarton

Contact Info

Latest News