A utility class is a class that defines a set of methods that perform common, often re-used functions. Your template includes a number of helpful utility classes to help style your content. In Joomla there is a number of different methods of adding a class name to an element..

Inline Styling

The most basic method is inline directly in to the HTML of your document. Note that this method is only used when your are viewing the HTML source of your document either via the CodeMirror editor or the source/HTML option available in most other editors. An example would look something like the following....

<h2 class="padding-bottom-40">
    A Sample Heading
</h2>

The above class name of padding-bottom-40 will add a padding (space) of 40px to the bottom of the text.

Module Class Suffix (Module)

This method is specific to modules. If you click in to the settings of any module and select the 'Advanced' tab you will notice a 'Module Class Suffix' field. Simply add the utility class to apply the CSS of this class to the enitre module. An popular example would be the utility class 'text-light' which will convert all the text within a module to white which you will find useful if you have a dark background image or color set for the module area background. Note you can add as many classes as you like by simply separating them with a space.

Link CSS Style (Menu Items)

This final method is specific to menu items. Clicking in to the settings of any menu item (Menus -> [YourMenu] -> [YourMenuItem]) and selecting the 'Link Type' you will notice a 'Link CSS Style' field. This will allow you to apply a class to that particular menu item.

Text/Icons Color Classes

Padding & Margin Classes

Background Color Classes

It is worth noting that we have not used !important with any of these classes, therefore if you apply a utility class to an element that has !important CSS styling applied to it then this styling will not be overridden.

If you like this feature please let us know in our forums and we will extend on this in future template releases!

Included with this template is the excellent Grid Gallery module extension. This stylish portfolio extension is an ideal solution to showcase site content in to attractive image boxes which can then be linked to further articles within your site. This extension is styled specifically for this template so it will blend seamlessly with the rest of the styling on your page.

Easily add title and description text for each image using the corresponding fields. Responsive options allow you to easily set the image box width depending on the device it is been viewed on. Multiple color choosers allow you to style the different elements of boxes to your own taste. And finally an 'On Scroll Animation' field allows you to easily add any of the animate classes included with the template to animate the image box as it is scrolled in to view within the browser window.

Our ThumbsGallery module extension allows you to easily create a simple and stylish thumbs gallery module in to any module position on your site. A thumbs gallery is an excellent way to showcase your images in an elegant and space efficient manner.

To set up your Thumbs Gallery module simply point the module to the image folder of your choice and the module will do the rest. The module will automatically create thumbs for each of your images, linking them to the original image in a stylish, easy to navigate lightbox.

Font Awesome is a pictographic language of web-related actions which delivers over 300 icons. The Font Awesome webfont and CSS files are licensed under CC BY 3.0 and you can find the full examples of usage at Font Awesome - http://fortawesome.github.com/Font-Awesome

Add class fa-CLASS_NAME to any element, best used with a <span>.

Can also be added to any menu item using the Link CSS Style field in your menu item settings or to a module title using the Header Class field in your module settings.

New Icons in Font Awesome4.2

Web Application Icons

Form Control Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

Medical Icons