Welcome visitor you can log in or create an account

Η ΕΤΑΙΡΙΑ

Template articles

Custom HTML elements

Columns

Columns

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

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

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>
</div>

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.

Newsletter

Newsletter

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>
</form>

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

Frontpage elements

Banners

Banners

You can create banners with text overlay and link to specific point of your website. Creating a banner is very simple:

  1. Create a new instance of Custom HTML module
  2. Specify the module suffix as banner
  3. Specify the module content as described below:

The banner structure is following:

<div class="gkBanner">
<h2><a href="#">Collection <span>Women</span></a></h2>
<strong><a href="#">See New Collection</a></strong>
<a href="#"><img src="/templates/2013_11/images/demo/collection_2.jpg" alt=""></a>
</div>

The link around the image should be the same as links inside the h2 and strong elements.

Page break example

Ut dignissim aliquet nibh tristique hendrerit. Donec ullamcorper nulla quis metus vulputate id placerat augue eleifend. Aenean venenatis consectetur orci, sit amet ultricies magna sagittis vel. Nulla non diam nisi, ut ultrices massa. Pellentesque sed nisl metus. Praesent a mi vel ante molestie venenatis.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Read more

Page Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere nisi quis odio egestas non tempus est sollicitudin. Nulla facilisi. Pellentesque tempus suscipit nulla sed tempor. Phasellus et lorem id libero fermentum molestie sit amet sit amet mi. Quisque ultrices, neque et laoreet dictum, arcu sapien pulvinar odio, in aliquam mi dui eu leo. Nullam posuere, arcu et egestas fermentum, enim purus fermentum diam, quis porta mauris lectus ut odio. In tincidunt dapibus malesuada. Integer a lorem ligula. In tincidunt augue eget velit convallis nec pharetra eros tincidunt. Maecenas et tortor libero, vel malesuada est.

Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.



Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.

Donec libero urna, cursus vitae sollicitudin sit amet, elementum et massa. Donec feugiat, turpis a dictum vulputate, dui diam faucibus nunc, ac sodales augue magna id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet nisi felis. Morbi faucibus nunc id elit aliquam ac condimentum leo laoreet. Sed nec risus sed nulla mattis volutpat in eget diam. In leo nisl, eleifend vel lobortis vel, tincidunt a ligula. Nulla placerat gravida laoreet. In lobortis, ligula in sagittis pellentesque, orci magna venenatis neque, eu sagittis lacus ante et tellus. Morbi vel semper augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.

Module variations

On this page you can see basic suffixes used in this template.

01The clear suffix is very useful to create banners or images without additional borders, margins and paddings. The clear suffix is also very useful inside the mainbody, mainbody_top and mainbody_bottom module positions.

02For News Show Pro GK5 and Image Show GK4 modules please always disable usage of the default CSS styles in the module settings.

03In the bigtitle suffix you can achieve the second line by wrapping the text using __syntax__ i.e. First line __Second line__.

04If you want to remove mainbody spaces while using the module instead the component on the frontpage, please add the frontpage suffix.

05For modules which should have bigger width than other modules on the top1, top2, bottom1, bottom2 or bottom3 module position, please add the double suffix. Please remember that this suffix should be applied to the first module in the group. Otherwise it won't work.

06The newsletter suffix should be used if you want to place the newsletter module on the right side of the modules group.

07If you want to connect the menu item with the shopping cart please add to that menu item the gk-cart CSS class.

08The News Show Pro GK5 module has few additional suffixes: products - for displaying VirtueMart products, grid2 and grid3 for displaying articles in 2-columns and 3-columns layouts.