Custom HTML elements



Columns needs main wrapper with gkCols class and data-cols attribute:

<div class="gkCols" data-cols="2">
First column content
Second column content

You can create a layout with 2-5 columns using this structure.

Topbar elements

Topbar I

Social icons are a first element which can be used in the topbar.

The structure of social icons is following:

<div class="gk-social">
<a href="#"><i class="fa fa-rss"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-vimeo-square"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>

As you can see in general you can use in this list any icon from FontAwesome iconset. More icons you can find on the Typography page.

Topbar II

The promo block is a second available type of blocks.

It has a very simple structure:

<span class="gk-promo">Take and  Extra <strong>20% OFF</strong> Your Purchase - Code: <strong>DEC2013</strong></span><

Please remember that you can also use inside the content the strong elements if you want to highlight some phrases.

Topbar III

The last and basic type of blocks have following structure:

<span>Call Customer Services on:  +1-888-222-1155</span>

Please remember that all span elements inside the topbar have set right float.



The newsletter custom HTML code is a structure for very simple newsletter form:

<form action="#" class="gk-newsletter">
<p><input type="email" placeholder="Enter Email Address"> <input type="button" value="Join"></p>

As you can see it uses the form element with gk-newsletter CSS class, and two basic input fields.

Joomla Template designed by GavickPro