Ви тут: ⏏

Статті

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

icon-cloud-download
icon-cloud-upload
icon-lightbulb
icon-exchange
icon-bell-alt
icon-file-alt
icon-beer
icon-coffee
icon-food
icon-fighter-jet

icon-user-md
icon-stethoscope
icon-suitcase
icon-building
icon-hospital
icon-ambulance
icon-medkit
icon-h-sign
icon-plus-sign-alt
icon-spinner

icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-circle-blank
icon-circle

icon-desktop
icon-laptop
icon-tablet
icon-mobile-phone
icon-quote-left
icon-quote-right
icon-reply
icon-github-alt
icon-folder-close-alt
icon-folder-open-alt

Web Application Icons

icon-adjust
icon-asterisk
icon-ban-circle
icon-bar-chart
icon-barcode
icon-beaker
icon-beer
icon-bell
icon-bell-alt
icon-bolt
icon-book
icon-bookmark
icon-bookmark-empty
icon-briefcase
icon-bullhorn
icon-calendar
icon-camera
icon-camera-retro
icon-certificate
icon-check
icon-check-empty
icon-circle
icon-circle-blank
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-coffee
icon-cog
icon-cogs
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-credit-card
icon-dashboard
icon-desktop
icon-download
icon-download-alt

icon-edit
icon-envelope
icon-envelope-alt
icon-exchange
icon-exclamation-sign
icon-external-link
icon-eye-close
icon-eye-open
icon-facetime-video
icon-fighter-jet
icon-film
icon-filter
icon-fire
icon-flag
icon-folder-close
icon-folder-open
icon-folder-close-alt
icon-folder-open-alt
icon-food
icon-gift
icon-glass
icon-globe
icon-group
icon-hdd
icon-headphones
icon-heart
icon-heart-empty
icon-home
icon-inbox
icon-info-sign
icon-key
icon-leaf
icon-laptop
icon-legal
icon-lemon
icon-lightbulb
icon-lock
icon-unlock

icon-magic
icon-magnet
icon-map-marker
icon-minus
icon-minus-sign
icon-mobile-phone
icon-money
icon-move
icon-music
icon-off
icon-ok
icon-ok-circle
icon-ok-sign
icon-pencil
icon-picture
icon-plane
icon-plus
icon-plus-sign
icon-print
icon-pushpin
icon-qrcode
icon-question-sign
icon-quote-left
icon-quote-right
icon-random
icon-refresh
icon-remove
icon-remove-circle
icon-remove-sign
icon-reorder
icon-reply
icon-resize-horizontal
icon-resize-vertical
icon-retweet
icon-road
icon-rss
icon-screenshot
icon-search

icon-share
icon-share-alt
icon-shopping-cart
icon-signal
icon-signin
icon-signout
icon-sitemap
icon-sort
icon-sort-down
icon-sort-up
icon-spinner
icon-star
icon-star-empty
icon-star-half
icon-tablet
icon-tag
icon-tags
icon-tasks
icon-thumbs-down
icon-thumbs-up
icon-time
icon-tint
icon-trash
icon-trophy
icon-truck
icon-umbrella
icon-upload
icon-upload-alt
icon-user
icon-user-md
icon-volume-off
icon-volume-down
icon-volume-up
icon-warning-sign
icon-wrench
icon-zoom-in
icon-zoom-out

icon-file
icon-file-alt
icon-cut
icon-copy
icon-paste
icon-save
icon-undo
icon-repeat

icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-indent-left
icon-indent-right

icon-font
icon-bold
icon-italic
icon-strikethrough
icon-underline
icon-link
icon-paper-clip
icon-columns

icon-table
icon-th-large
icon-th
icon-th-list
icon-list
icon-list-ol
icon-list-ul
icon-list-alt

Directional Icons

icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up

icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up

icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down

icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up
icon-circle
icon-circle-blank

Video Player Icons

icon-play-circle
icon-play
icon-pause
icon-stop

icon-step-backward
icon-fast-backward
icon-backward
icon-forward

icon-fast-forward
icon-step-forward
icon-eject

icon-fullscreen
icon-resize-full
icon-resize-small

Social Icons

icon-phone
icon-phone-sign
icon-facebook
icon-facebook-sign

icon-twitter
icon-twitter-sign
icon-github
icon-github-alt

icon-github-sign
icon-linkedin
icon-linkedin-sign
icon-pinterest

icon-pinterest-sign
icon-google-plus
icon-google-plus-sign
icon-sign-blank

Medical Icons

icon-ambulance
icon-beaker

icon-h-sign
icon-hospital

icon-medkit
icon-plus-sign-alt

icon-stethoscope
icon-user-md

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

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?
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

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?
Demo with regular Listings (disc, circle, square, type1 or type2) <ul class="type1"> <li>Content here</li> <li>Content here</li> <li>Content here</li> </li> Demo with custom Listings (type3) <ul class="type3"> <li><i class="icon-heart"></i>Content here</li> <li><i class="icon-heart"></i>Content here</li> <li><i class="icon-heart"></i>Content here</li> </li> You will see, simply give the UL Element a class, like seen above

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.

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

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

This is an H3 Header

This is an H4 Header

This is an H5 Header

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

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.

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

This is a standard message. ×

This is a success message. ×

This is a alert message. ×

This is a secondary message. ×

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.

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

With Icon-Heart

icon-heart

icon

With Icon-Gift

With Icon-Ban-Circle

Demo Advanced Button

With Icon-Heart

Open Link in new Window

Open Inline Reveal

Play a Video

With Icon-Ban-Circle

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 | 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}

ЗАБРОНЮВАТИ НОМЕР

Статті

Icons

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

Familiar with Basic HTML?

Responsive Videos and iFrames

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)

Familiar with Basic HTML?

List Styles

Demo

How to use

Familiar with Basic HTML?

Responsive Gridsystem

Demo

How to use

Familiar with Basic HTML?

Typography

Demo

This is an H1 Header

This is an H2 Header

This is an H3 Header

This is an H4 Header

This is an H5 Header

Blockquotes

Testimonial

Icons

Labels

Messages & Boxes

Demo Messages

Demo Panels

How to use

Buttons

Demo Regular Button

Sizes

Colors

Type

Demo Icon Button

With Icon-Heart

With Icon-Gift

With Icon-Ban-Circle

Demo Advanced Button

With Icon-Heart

With Icon-Ban-Circle

How to use