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.

The frontpage of the Music State template contains a different structure than the rest of the template. This layout is optional and can be activated by using the frontpage page suffix.

Modules

Modules in the frontpage mode can use two width - normal width specified in the template settings as the template width or the 100% width. The 100% width is default in the frontpage mode. You can activate the normal width for the module using the normal-width module suffix.

Module with 100% width on the frontpage

Module with normal width on the frontpage:

Additional elements

You should also activate the additional element after the mainbody container in the frontpage mode - the dark block with image as background - it can be activated with using the dark-bottom page suffix.

Please remember that in this case it is important to use the white module suffix in the module displayed under the mainbody content.

The newsletter form can be created with using the newsletter module suffix and the following code inside the Custom HTML module:

<p>Small description</p>

<form action="#">
<input type="email" placeholder="Your e-mail address">
</form>

Section navigation

You can activate the navigation between sections of the frontpage - just use the section-nav page suffix for the frontpage. The script will automatically create the navigation links.