A very important Element for good Web Design Web Design is Typography. This Template delivers you sophisticated typography, various stylings and awesome functions for nice styling of your content.
{panel-white} {list | type3} {listing}{icon | fa-caret-right}Get an awesome styling to give your customers the best clarity{/listing} {listing}{icon | fa-caret-right}A lot of different elements for you, most of them are easy to include using our shortcode system{/listing} {listing}{icon | fa-caret-right}All elements are styled with CSS so no loading of images or other elements{/listing} {/list} {/panel}{icon | fa-flask templatecolor}Demo
This is an H1 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H2 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H3 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H4 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H5 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
{h1-special-mt0 | This is an Special Headline}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
How to use
{h1-special | Headline here}
{liner | 30px 0 60px 0}
Blockquotes
{blockquote}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.{/blockquote} {blockquote}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.{/blockquote-name | Isaac Asimov}How to use
{blockquote}Your Content goes here{/blockquote}
{blockquote}Your Content goes here{/blockquote-name | Name here}
You can use this Shortcodes everywhere in your content, click here to find out more.
Testimonial
{testimonial}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.{testimonial-name | Isaac Asimov - HTML5 Expert}How to use
{testimonial}Your Content goes here{testimonial-name | Name or Link here}
You can use this Shortcodes everywhere in your content, click here to find out more.
Icons
Beside the usual image icons we integrate Font Awesome v.4 with over 350 icons. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. You can read more about it here.
Progress Bars
{progress | Animated Progress Bar | 0} {progress | Animated Progress Bar | 10} {progress | Animated Progress Bar | 20} {progress | Animated Progress Bar | 30} {progress | Animated Progress Bar | 40} {progress | Animated Progress Bar | 50} {progress | Animated Progress Bar | 60} {progress | Animated Progress Bar | 70} {progress | Animated Progress Bar | 80} {progress | Animated Progress Bar | 90} {progress | Animated Progress Bar | 100}How to use
{progress | Your Text here | Percent Value}
{progress | Animated Progress Bar | 60}
Labels
{row} {col6}Dermau ipsum dolor sit amet, consectetur {label | label | label} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea {label | label | commodo} consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur {label | label | adipisicing} elit, sed do eiusmod tempor incididunt ut labore.
{/col} {col6}Dermau ipsum dolor sit amet, consectetur {label | label-success | label-success} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea {label | label-success | commodo} consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur {label | label-success | adipisicing} elit, sed do eiusmod tempor incididunt ut labore.
{/col} {/row}{row} {col6}
Dermau ipsum dolor sit amet, consectetur {label | label-templatecolor | label-templatecolor} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea {label | label-templatecolor | commodo} consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur {label | label-templatecolor | adipisicing} elit, sed do eiusmod tempor incididunt ut labore.
{/col} {col6}Dermau ipsum dolor sit amet, consectetur {label | label-warning | label-warning} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea {label | label-warning | commodo} consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur {label | label-warning | adipisicing} elit, sed do eiusmod tempor incididunt ut labore.
{/col} {/row}{row} {col6}
Dermau ipsum dolor sit amet, consectetur {label | label-important | label-important} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea {label | label-important | commodo} consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur {label | label-important | adipisicing} elit, sed do eiusmod tempor incididunt ut labore.
{/col} {col6}Dermau ipsum dolor sit amet, consectetur {label | label-info | label-info} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea {label | label-info | commodo} consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur {label | label-info | adipisicing} elit, sed do eiusmod tempor incididunt ut labore.
{/col} {/row}{row} {col6}
Dermau ipsum dolor sit amet, consectetur {label | label-inverse | label-inverse} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea {label | label-inverse | commodo} consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur {label | label-inverse | adipisicing} elit, sed do eiusmod tempor incididunt ut labore.
{/col} {col6} {/col} {/row}How to use
{label | label, label-success, label-templatecolor, label-warning, label-important, label-info, label-inverse | Your Text goes here}
{label | label-success | Awesome} = {label | label-success | Awesome}
You can use this Shortcodes everywhere in your content, click here to find out more.
This is an Horizontal Rule
This is an Horizontal Rule width a individual distance {liner | 21px 0 22px 0}
{liner | Enter margin pixels here (top, right, bottom, left)}
{liner | 21px 0 22px 0}
Or use {line} to create a simple Line
This is an space for you if needed - attention: of course it's not visible
{spacer | 0}
{spacer | Enter the height of the whitespace in pixels}
{spacer | 120px}
This awesome Template comes with nice styled included tooltips for your own use. Many features, options and styles combined with an easy to use shortcode system for the developer make this tooltip to a new experience in content styling for the sophisticated user of joomla. See the full feature list, the demo and the usage above.
{panel-white} {list | type3} {listing}{icon | fa-caret-right}Works perfect on {tooltip | # | Mobile devices are smartphones like the iPhone or the Android | top | mobile devices}, first tap to open, second to link{/listing} {listing}{icon | fa-caret-right}Also you can control where the Tooltip appears, choose from left or right, top, bottom or auto{/listing} {listing}{icon | fa-caret-right}Tooltip View is made with CSS3 only so no images are to load{/listing} {/list} {/panel}{icon | fa-flask templatecolor}Demo
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus {tooltip | # | Tooltip with Class top | top | scelerisque} ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. {tooltip | # | Tooltip with Class top | top | Curabitur} blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur {tooltip | # | Tooltip with Class bottom | bottom | adipiscing} elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Yeah, this can be nullam {tooltip | # | Of course, the tooltip can also be really large and can include many many text like in this example - but for sure, it's not needed and handled by your own phantasie and creativity you know! Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | top | id dolor id nibh} ultricies vehicula ut id elit. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor.
{tooltip | # | Tooltip with Class top | top | Tooltip Top} | {tooltip | # | Tooltip with Class bottom | bottom | Tooltip Bottom} | {tooltip | # | Tooltip with Class left | left | Tooltip Left} | {tooltip | # | Tooltip with Class right | right | Tooltip Right} | {tooltip | # | Tooltip with Class auto, direction is choosen automatic | auto | Tooltip Auto}
{button-data | btn-primary has-tipsy-top | # | Tooltip as a Button | title="Wow, this Tooltip can also be displayed at a Button"} {button-data | btn-warning has-tipsy-top | # | Tooltip as a Button | title="Wow, this Tooltip can also be displayed at a Button"} {button-data | btn-success has-tipsy-top | # | Tooltip as a Button | title="Wow, this Tooltip can also be displayed at a Button"}
{icon | fa-question-circle templatecolor}How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{tooltip | your Link | Place here Content of the Tooltip | Position (left, right, top, bottom, auto) | Word for Tooltip}
{tooltip | # | I'm a Tooltip | top | Tooltip} = {tooltip | # | I'm a Tooltip | top | Tooltip}
Attention: you always must write the position like top or bottom in lowercases, maybe TOP will produce an error and the tooltip won't work!
{toggle | Familiar with Basic HTML?}Simple Button Tooltip on Top
<a href="#" class="btn has-tipsy-top" title="Content for the Tooltip here">Button Text here<a>
Simple Link with Icon and Tooltip on Bottom
<a href="#" class="has-tipsy-bottom" title="Content for the Tooltip here"><i class="icon-name"></i>Link Text here<a>
Simple Image with Tooltip on Auto Position
<a href="#" class="has-tipsy-auto" title="Content for the Tooltip here"><img src="/your-image.jpg" alt="Alternative Text here" /><a>
You will see, simply add the Class 'has-tipsy-top (or another value)' to your Link and the Content will open in a Tooltip
{/toggle}
We have integrated a awesome Page Preloader, this is a simple Module which can be assigned to specific pages or to your whole site. For example, simply activate it on pages where you have heavy Images to load to get a nice preloading of this Site only.
{panel-white} {list | type3} {listing}{icon | fa-caret-right}Choose a Individual Background Color for the Preloader{/listing} {listing}{icon | fa-caret-right}Use simple animated Gifs, 5 are already included for light and dark Backgrounds{/listing} {listing}{icon | fa-caret-right}Setup the Time the Preloader should fade out{/listing} {/list} {/panel}{icon | fa-flask templatecolor}Demo
You have already seen it as you have opened this site. Click the below Button to reload this Page.
{icon | fa-question-circle templatecolor}How to use
This function is made with an simple joomla module which is included in the download package of this theme.
Also some styles of mobile friendly Tabs are included in this Joomla Template. Simply organize your content in a nice and comfortable way, this module is like many others also included in the download package.
{panel-white} {list | type3} {listing}{icon | fa-caret-right}Two styles to choose from, all well designed and of course fully responsive to work on all devices{/listing} {listing}{icon | fa-caret-right}Place your content using your favorite Wysiwig editor easily directly in the module{/listing} {listing}{icon | fa-caret-right}Choose for every tab module which tab should be open at the first visit of your page{/listing} {/list} {/panel}{icon | fa-flask templatecolor}Demo - Left Tabs
Simple Joomla Tab Module, concepted and developed for easy handling of your Content Tabs
{icon | fa-flask templatecolor}Demo - Centered Tabs
Simple Joomla Tab Module, concepted and developed for easy handling of your Content Tabs
{icon | fa-question-circle templatecolor}How to use
This function is made with an simple joomla module which is included in the download package of this theme.
We integrated some really awesome shortcodes in this Template, you can use them nearly everywhere in your template using a short syntax, use them in module titles, use them in content, use them in other modules and so much more places.
{panel-white} {list | type3} {listing}{icon | fa-caret-right}Easy to use without knowledge of coding, works with every Editor{/listing} {listing}{icon | fa-caret-right}Awesome styling and functions for your content, you will love it{/listing} {listing}{icon | fa-caret-right}Spice up your Content using the WS-Shortcode system{/listing} {/list} {/panel}{icon | fa-flask templatecolor}Demo
You can see a Demo on nearly every page of this Template, scroll to the bottom of the respective page to see the shortcode syntax.
{icon | fa-question-circle templatecolor}How to use
The shortcodes are very easy to use, simply click the typography button and click on the element of your choice, edit the settings, save and ready. Yes it's true! But attention: if you are using frontend editing please deactivate the button (not the shortsystem, only the button)
{image-data | lightbox | images/sampledata/shortcodes.jpg | images/sampledata/shortcodes.jpg | title="Simple Shortcode System for Joomla with Editorbutton"}