Categories
We provide you quite a nice list of shortcodes. Pick your category from the list below:
List all Categories
Another short description of the Joomla category named styling, it contains all articles which fits to this category and shows you how to style your Website using our tools. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Icons
This is an important feature of our theme, we have included an icon-font for you which is really really awesome! You can place this icons on almost every location of joomla, scroll to the bottom to see how the icons working for you, also watch the really awesome features in the grey panel.
The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/.
- Icons are retina ready, so they look great devices with stunning high resolution displays
- Great variaty, see the rich list above, there are icons for every needed possibility
- The size of the icons always fit to the size of the text
Demo
New Icons in FontAwesome 3.0
Web Application Icons
Text Editor Icons
Directional Icons
Video Player Icons
Social Icons
Medical Icons
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{icon | icon-name templatecolor} - display an icon in the same color as the text where it is in
Possible options: black, white, or templatecolor (changes the color of the icon)
The Icon size is addicted to the font-size so the icon always have the perfect size. Of course, with the shortcode you can display also icons in module titles and many more.
Familiar with Basic HTML?
Pricing Tables
Also we integrated some nice pricing tables for your business plans into this template. Of course, they working very well with responsive webdesign so no matter about sizes or alignments of the tables.
- Use a maximum of four pricing tables per row, fully responsive
- Well styled with CSS3 so problems with table constucts on your website
- Nice effect when hover the pricing table or highlight one item
Pricing Table 1 ( 4 columns )
Pricing Table 2 ( 3 columns )
Pricing Table 3 ( alternative color and behavior - 3 columns )
How to use
These Pricing Tables are made with a nice and simple Joomla Module with a lot of options, so no worries about usage! You can insert the in Content using the following Syntax:
{loadposition name-of-the-pseudo-modulposition}
Responsive Gridsystem
We included an easy to use Grid System in this template for you using our Shortcode System so it's very easy for you to use Columns everywhere in Content or in modules.
- Works in every Wysiwig Editor using our shortcodes, so no loses of div or span classes
- Hundreds of variations are possible, made columns where ever you want and how often you like
- Columns works everywhere cause they are based on percentages values
Demo
3 Columns Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
2 Columns Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
4 Columns Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{row}
{col4}Your Content goes here.{/col}
{col4}Your Content goes here.{/col}
{col4}Your Content goes here.{/col}
{/row}
{row}
{col6}Your Content goes here.{/col}
{col6}Your Content goes here.{/col}
{/row}
{row}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{/row}
Attention: made columns like you want, but remember that the end value of your columns always should be fit to twelve!
Familiar with Basic HTML?
Responsive Videos and iFrames
Videos are a nice way to publish your message all over the world. If you want to include your Videos from YouTube, Vimeo or an other Video Hoster you can include this in an easy way using our shortcode system.
- You only must to type in the ID of the Video from YouTube or Vimeo, that's all
- The output video is responsive so it always fits to the device where you want to watch
- No complicated including of an iframe in a Wysiwig editor using extensions
Vimeo
How to use Vimeo Videos
{vimeo | 24195442}
Example: http://vimeo.com/24195442 means your ID is 24195442
YouTube
How to use YouTube Videos
{youtube | Yq_6kEyIAcM}
Example: http://www.youtube.com/watch?v=Yq_6kEyIAcM means your ID is Yq_6kEyIAcM
YouTube Widescreen
How to use YouTube Widescreen Videos
{youtube-wide | N966cATFWjI}
Example: http://www.youtube.com/watch?v=N966cATFWjI means your ID is N966cATFWjI
Responsive iFrames
How to use responsive iFrames (works also with Flash Content)
{iframe}Your iFrame embedding Code here{/iframe}
Attention: for including regular iFrames or Flash it's recommend to turn your WYSIWIG Editor, like TinyMCE, to off!
Familiar with Basic HTML?
Messages & Boxes
See what you've got, a new {icon-black | icon-envelope-alt}Message. These are possible Messages and Messages Boxes to highlight important content and show customers what's really amazing and highlighted! Use them on every place of your content using our out of the box shortcode system.
- Four color variations to choose from using a simple shortcode
- System messages are equipped with a cross to close the message when don't needed
- Awesome typography option to display really important infos to the viewers of the website
Demo Messages
Demo Panels
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
How to use
You can use this Shortcodes (Messages, Icons and more) everywhere in your content, click here to find out more.
Messages
{message | Style: templatecolor, success, alert, secondary}Your Text goes here{/message}
{message | success}This is a green success message{/message}
Boxes
{panel-white}Your Content goes here{/message}
{panel-templatecolor}Your Content goes here{/message}
More Articles...
Bonus software for free
We offer you this amazing piece of software completely free of charge.
Login
×Register now
I'm a small Introtext for the Register Module, I can be set in the Backend of the Joomla WS-Register Module.
×