Styling

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

With Icon-Heart

fa-heart

icon

With Icon-Gift

With Icon-Ban-Circle

Demo Advanced Button

Advanced Examples

Open Link in new Window

Open Inline Reveal

Play a Video

Advanced Examples

Shows a Tooltip

See an Image

See a Google Map

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 | HTTPS://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 | HTTPS://www.google.de | Jump to Google | icon-name}

{button-blank | small secondary radius | HTTPS://www.google.de | Jump to Google}

{button-data | small secondary radius | HTTPS://www.google.de | Jump to Google | data-attributes comes here}

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.

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

How to use

You can use this Shortcodes everywhere in your content, click here to find out more.

{icon | fa-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?
<i class="fa fa-name"></i> You will see, simply make an i Element with a class and name the icon

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: HTTPS://vimeo.com/24195442 means your ID is 24195442

YouTube

How to use YouTube Videos

{youtube | Yq_6kEyIAcM}

Example: HTTPS://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: HTTPS://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?
Simple YouTube Video <div class="article_media"><div class="flex-video">Embed Code here></div></div> Simple YouTube Wide Video <div class="article_media"><div class="flex-video widescreen">Embed Code here></div></div> Simple Vimeo Video <div class="article_media"><div class="flex-video vimeo">Embed Code here></div></div> Simple iFrame or Flash Content <div class="article_media"><div class="flex-video">Embed Code here></div></div> You will see, simply wrap the Content with the Class 'flex-video', this will make the Content responsive

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}

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.

2 Columns Layout

4 Columns Layout

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?
Two columns Grid System <div class="row"> <div class="six columns">Content here</div> <div class="six columns">Content here</div> </div> Three columns Grid System <div class="row"> <div class="four columns">Content here</div> <div class="four columns">Content here</div> <div class="four columns">Content here</div> </div> Four columns Grid System <div class="row"> <div class="three columns">Content here</div> <div class="three columns">Content here</div> <div class="three columns">Content here</div> <div class="three columns">Content here</div> </div> This Grid System could be nested as many times as you wish, it always fits and is always responsive

Moderne Software für den Viehhandel. Einfach! Sicher! Innovativ!
Setzen Sie auf unsere langjährige Erfahrung, wir unterstützen Sie gerne.

Unsere Software Lösungen

Gründe für mekoDATA

Kundenstimmen

Demo Regular Button

Sizes

Colors

Type

Demo Icon Button

With Icon-Heart

With Icon-Gift

With Icon-Ban-Circle

Demo Advanced Button

Advanced Examples

Advanced Examples

How to use

Demo

How to use

Vimeo

How to use Vimeo Videos

YouTube

How to use YouTube Videos

YouTube Widescreen

How to use YouTube Widescreen Videos

Responsive iFrames

How to use responsive iFrames (works also with Flash Content)

Pricing Table 1 ( 4 columns )

Pricing Table 2 ( 3 columns )

Pricing Table 3 ( alternative color and behavior - 3 columns )

How to use

Demo

How to use

Fernwartung

Moderne Software für den Viehhandel. Einfach! Sicher! Innovativ!Setzen Sie auf unsere langjährige Erfahrung, wir unterstützen Sie gerne.

Unsere Software Lösungen

Gründe für mekoDATA

Kundenstimmen

Demo Regular Button

Sizes

Colors

Type

Demo Icon Button

With Icon-Heart

With Icon-Gift

With Icon-Ban-Circle

Demo Advanced Button

Advanced Examples

Advanced Examples

How to use

Demo

How to use

Vimeo

How to use Vimeo Videos

YouTube

How to use YouTube Videos

YouTube Widescreen

How to use YouTube Widescreen Videos

Responsive iFrames

How to use responsive iFrames (works also with Flash Content)

Pricing Table 1 ( 4 columns )

Pricing Table 2 ( 3 columns )

Pricing Table 3 ( alternative color and behavior - 3 columns )

How to use

Demo

How to use

Fernwartung

Testreveal

Register now

Moderne Software für den Viehhandel. Einfach! Sicher! Innovativ!
Setzen Sie auf unsere langjährige Erfahrung, wir unterstützen Sie gerne.