Custom HTML elements

Columns in the content

We have used in a few places a simple mechanism of the columns in the content. You can create 2,3,4,5 or even 6-column layout in the single module using the following structure:

<div class="gkColumns" data-cols="X">
<div>
// … column content
</div>
...
</div>

Amount of columns is specified in the data-cols attribute and should be in range 1-6.

Grid Photos

If you want to put a photo which will have an overlay for the whole image, then you can use the gkPhoto module suffix or place this CSS class in the container containing the image.

The necessary structure is following

<div class="gkPhoto">
<a href="#">
<img src="/the/sample/path" alt="Sample image">
</a>
</div>

Titles and Subtitles

Sometimes you can need to create a longer title with subtitles. Unfortunately Joomla! limists the module titles to 100 characters. For the longer titles we recommend to use headers and paragraphs with following CSS classes: gkTitle, gkSubtitle. Please remember to disable then the normal module title in the module settings.