Log in

Template articles

Custom HTML elements

Columns in the content

columns

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

columns

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

columns

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.

Frontpage elements

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

columns

Module with normal width on the frontpage:

columns

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.

columns

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

columns

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

columns

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.

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.

Más artículos...

  1. Page break example
  2. Module variations
  3. Messages
  4. Module positions

Patrocinadores

 

logos4 02

 

logo 02

Log in or Sign up