Материалы
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?
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?
List Styles
As you maybe have seen before on the icons, of course it's also possible to use them in list-styles. Like all elements in this template extrem easy to use without need of coding or complicated techniques.
- All list styles are retina ready, so they look great on devices with high resolution
- Really great variaty, see the rich list here, there are icons for every needed possibility
- Also it's possible to use different icons in one list, use crosses or checkboxes in one list
Demo
List with Disc
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Circle
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Square
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Type1
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Type2
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Type3 (custom icon)
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
Use black icon
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
Use templatecolor icon
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
Use another Icon
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{list | Type of the Icon (disc, circle, square, type1, type2, type3)}
{listing}Type in some text to display in this list{/listing}
{listing}Type in some text to display in this list{/listing}
{listing}Type in some text to display in this list{/listing}
{/list}
Example for List Style disc, circle, square, type1 or type2 (predefined icons)
{list | type1}
{listing}Listing{/listing}
{listing}Listing{/listing}
{listing}Listing{/listing}
{/list}
Example for List Style type3 (custom icons, many available)
{list | type1}
{listing}{icon | icon-ok}Listing{/listing}
{listing}{icon | icon-ok}}Listing{/listing}
{listing}{icon | icon-ok}}Listing{/listing}
{/list}
Attention: Many many more list-styles are possible, see all available icons here.
Familiar with Basic HTML?
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?
Typography
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.
- Get an awesome styling to give your customers the best clarity
- A lot of different elements for you, most of them are easy to include using our shortcode system
- All elements are styled with CSS so no loading of images or other elements
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.
Blockquotes
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.
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.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
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.
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 de usual image icons we integrate Font Awesome v.3.0. with over 300 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.
Labels
Dermau ipsum dolor sit amet, consectetur adipisicing 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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur adipisicing 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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur adipisicing 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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur adipisicing 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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
How to use
{label | Style: radius, round, square | Color: success, alert, secondary, templatecolor | Your Text goes here}
{label | radius | success | Awesome} = 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 | 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 | Enter the height of the whitespace in pixels}
{spacer | 120px}
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}
Buttons
We buttons, really! That's why the this awesome Framework has multiple buttons sizes and color that are not only badass out of the box, but easy to customize for your projects. Of course you can easily add Buttons with the integrated Shortcode System, see a Demo of the possible Variations below.
- Nice styled with a lot of CSS3 effects and techniques which works in all modern browsers
- Four different sizes and 3 individual colors to take the best match of your websites look
- Very easy to use in your content with our integrated Shortcode System
- Styles for every situation, regular, hover and of course a active and focus style
Demo Regular Button
Add classes for size, type (color) and style (square, slightly rounded, and completely rounded) to achive what button you wish.
Demo Icon Button
Demo Advanced Button
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{button | (Size: tiny, small, medium, large) (Color: templatecolor, secondary, success, alert) (Style: square, round, radius or combined wih full-width) | Your Link goes here | Name your Button here}
{button | small secondary radius | http://www.google.de | Jump to Google}
Or use one of these Shortcodes (with Icons or with Link opens in a new Window)
{button-icon | small secondary radius | http://www.google.de | Jump to Google | icon-name}
{button-blank | small secondary radius | http://www.google.de | Jump to Google}
{button-data | small secondary radius | http://www.google.de | Jump to Google | data-attributes comes here}