Logo grid

In this template we have included support for the grid layout with logotypes. It is based on the following structure:

<div class="gkGrid" data-cols="3"> <div> <a href="#logo1"><img src="/images/demo/logotypes/logo1.png" alt="Logo I"></a> <a href="#logo2"><img src="/images/demo/logotypes/logo2.png" alt="Logo II"></a> <a href="#logo3"><img src="/images/demo/logotypes/logo3.png" alt="Logo III"></a> <a href="#logo4"><img src="/images/demo/logotypes/logo4.png" alt="Logo IV"></a> <a href="#logo5"><img src="/images/demo/logotypes/logo5.png" alt="Logo V"></a> <a href="#logo6"><img src="/images/demo/logotypes/logo6.png" alt="Logo VI"></a> </div> </div> 

The most important are the gkGrid class and the data-cols attribute – this attribute specifies amount of the columns of logotypes. You can specify up to 8 columns.

Banners

If you want to put a banner using the standard com_banners component, you can use the clear module suffix – then the banner image will be displayed without any additional spacing, and will have applied streching CSS styles – it is very useful for responsive websites.

Price table Custom HTML is based on the following structure:

<div class="gkPriceTable col3"> <dl> <dt>Basic</dt> <dd class="gkPrice">$15<small>/ month</small></dd> <dd>Unlimited Storage</dd> <dd>Unlimited Transactions</dd> <dd>Unlimited Contacts</dd> <dd>Unlimited Users</dd> <dd>Try it for a month!</dd> <dd><a href="#">Choose</a></dd> </dl>  <dl class="gkPremium"> <dt>Premium</dt> <dd class="gkPrice">$99<small>/ month</small></dd> <dd>Unlimited Storage</dd> <dd>Unlimited Transactions</dd> <dd>Unlimited Contacts</dd> <dd>Unlimited Users</dd> <dd>Try it for a month!</dd> <dd><a href="#">Choose</a></dd> </dl>  <dl> <dt>Plus</dt> <dd class="gkPrice">$29<small>/ month</small></dd> <dd>Unlimited Storage</dd> <dd>Unlimited Transactions</dd> <dd>Unlimited Contacts</dd> <dd>Unlimited Users</dd> <dd>Try it for a month!</dd> <dd><a href="#">Choose</a></dd> </dl> </div>

The main wrapper contains two clases: the gkPriceTable class is required as a base of the CSS styling and the second class is used to specify the amount of columns – you can use classes col1–col5.

Every column is specified by dl element (with gkPremium class the column will be highlighted) – in the dt element you can specify the table column title. In the dd element with gkPrice class you can specify the price – using the small element you can specify te service period time.

Adding of the button at the bottom is very simple – it needs just to add the link element in the dd element.

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.

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.

Mauris justo metus, ultrices id lobortis et, euismod sit amet metus. Maecenas sed nisl a arcu ultricies consectetur. Integer ut mollis elit. Nulla ultrices scelerisque mauris id commodo. Integer congue lectus et justo pellentesque sed semper lacus facilisis. Nunc tristique placerat odio eget rutrum.

Ut viverra erat id augue bibendum rutrum. Nam aliquet feugiat molestie. Maecenas tempus scelerisque tellus eu mattis. Aliquam dignissim aliquam posuere. Sed dignissim, ipsum sed sodales aliquam, erat dolor varius eros, in semper sem metus vel metus. Nullam est mauris, laoreet condimentum hendrerit et, euismod quis dolor. Nunc eleifend lacinia libero eget scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.

Vivamus eget est urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus mauris justo, fermentum quis mattis vel, auctor vitae metus. Maecenas non dolor ac risus faucibus luctus non id turpis. Morbi ante nibh, suscipit non adipiscing in, ornare in ipsum.

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

01For the modules used on the top1-2 and bottom1-2 module positions we recommened to use only default module styles due the structure of these module positions.

02The 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.

03For the layout with the grey background please assign the frontpage page suffix in the template settings. Additionally if you need to create a transparent sidebar please use transparent-sidebar suffix.

04You can create modules with the border using the following module suffixes: border1(white border), border2(dark border), border3(color border). These suffixes are very useful especially on the pages when the frontpage suffix is used.

05You can create wider module on the bottom1-2 module positions – please use the double suffix which will increase the module width.

06If you want to create a modules with big title, please use the bigtitle suffix. Additionally you can use markdown syntax to achieve the small (subheader) and strong elements in the title. The small element can be created using syntax __text__, the strong element uses the following syntax: **text**.

Joomla! offers three different types of messages. Creatings standard information about Joomla! system is presented depending on a message type as follows:

Error

• This is a sample message

Error

• This is a sample of notice message

Error

• This is a sample of error message

It is possible with templates which have a typography page to show you how you can use e.g. headline tags in order to structure your content in a better way. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

#wrapper {
  float: left;
  display: block;
}