Template articles

Grid GK5 - configuration III

Grid GK5 is very useful if you need to display thumbnails of your articles - combine it with News Show Pro GK5 new portal mode - Grid Title overlay.

Please remember about useful crop options and image filters available in the newest version of News Show Pro GK5 - it will be useful if you need to adjust your images for the Grid GK5 layout.

Grid GK5 - configuration II

The above module shows the amazing possibilities of our new Grid GK5 module. You can mix a lot of kind of content inside this module:

  • Videos
  • Images (with or without header)
  • Headers
  • Icons with link
  • News Show Pro GK5 module with the Grid Title Overlay portal mode

Please remember that you can also create your own types of content. In general blocks needs only few basic things:

  • The background layer should be positioned absolutely and be expanded to 100% width and height in the CSS
  • Content should be responsive for the tablet and mobile views

GK JomSocial Feed module

GK JomSocial Feed is a module prepared especially for this template and our brand-new Grid GK5 module. We recommend to use this module only inside the Grid GK5 module.

The module is very simple to configure:

Content type - specifies if the module will search for status updates or photos.

Data source - specifies if the module will search in all JomSocial activities or only in the feed of one specific user.

User ID - if the data source option is set for one specified user in this option you can specify which user will it be.

Offset - you can select using this option second, third, fourth etc. status from the feeds.

Depending of the selected content type you have to configure module layout on the status settings or in the photo settings:

Show avatar - you can enable/disable showing the avatar which will take 50% of the module width.

Avatar position - you can specify the position of the avatar

Show read more - you can enable/disable showing the read more button under the status text. Then the status text won't contain a link to the author profile.

Show username - you can enable/disable showing of the status author username.

Read more text - specifies a text used in the read more button. If blank, then the phrase from the language file will be used.

Text limit (chars) - specifies how many chars can contain the longest status text.

Image type - you can select quality of the image used in the module.

Text position and color - you can specify the position and color of the text (useful for some photos).

Show text - you can enable/disable showing of the status text.

Text limit (chars) - specifies how many chars can contain the longest status text.

Additionally in the advanced options you can disable usage of the default CSS file of the module - we recommend to disable the default CSS in the MSocial template.

Grid GK5 - configuration I

Grid GK5 can be used as a great form of presenting your articles or works. You can combine this module with static Custom HTML modules using gkPhoto suffix or use the new portal mode in our amazing News Show Pro GK5 module - Grid Title Overlay.

We recommend to use News Show Pro GK5 module in the grid elements if you want to achieve automatically updating grid elements.

Template features

This article describes additional features used in this template.


Menu is available in two variants - classic and overlay. You can change the menu variant using the template settings - tab "Menu" - option "Menu type". The extended possibilites like columns, groups are available only for the classic menu.

Big buttons

You can create big buttons using the anchor tag and class big-btn. The big buttons looks best when are centered in the paragraph. Example:

<a href="#url" class="big-btn">I'm a really big button!<a>


Testimonials are based on the following structure:

<blockquote class="gkQuote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at dictum mi, et sodales urna. Pellentesque tincidunt mi leo, id cursus quam porta ac ..</p>
<span class="gkAuthor"> <img src="/templates/2013_8/images/demo/avatar1.png" alt="Robert Gavick"> <span><strong>Robert Gavick</strong><a href="http://www.gavick.com">www.gavick.com</a></span></span></blockquote>

If you want to put more testimonials in one line please read about columns in the next paragraph.


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

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

You can create a layout with 2-4 columns using this structure.

Grid elements - Icons

In the GK Grid module you can embed a lot of Custom HTML modules. We have prepared few additional typography elements which will make GK Grid much more powerful for your use cases. First type of this typography elements are icons.

You can embed any Font Awesome icon with your own link using the following structure:

<a href="#url" class="gkIcon gkColor1"><i class="icon-ICONNAME"></i></a>

You can replace class gkColor1 with following classes which will add other background colors for your icons:

  • gkColor2
  • gkColor3
  • gkColor4
  • gkFb
  • gkTwitter
  • gkGplus

Grid elements - Photos

GK Grid is an ideal solution for creating awesome galleries. Creating blocks with images is very simple:

  1. Create new Custom HTML module instance
  2. In the module options please select the background image
  3. Please set the module suffix class to gkPhoto

And that's all! As simple as possible.

Grid elements - Photos with text

If you want to put some text over your image, please create the photo as it was described in the previous paragraph and then please add the following code:

<h3 class="gkTextBottom">Your header</h3>

You can also replace class gkTextBottom with gkTextTop.

You can embed a link inside the header and create new lines using the strong element. If you need a smaller title you can use the h4 element

If you want to create a clickable photo, just create an anchor element inside the Custom HTML module - every anchor tag which will be placed as a children of the root element will be expanded to cover the whole module area.

Grid elements - Videos

Another important media - videos. If you want to put video object to your grid please make following steps:

  1. Create new Custom HTML module instance
  2. Please set the module suffix class to gkVideo
  3. Prepare an embed code of your video - we recommend to use size approximate to size of your block.
  4. Paste your video code to the module content.

Please remember that blocks with videos shouldn't be too small and shouldn't change their proportions too much on the tablet and mobile devices.

Grid elements - Text

The last important group of the grid typography elements - text blocks. You have to put in your Custom HTML module the gkText suffix and the you can use the gkHeader classes connected with h1, h2 and h3 tags. You can also add to your header element the gkCentered class if you want to center vertically your text - but we recommend it only for the one-line texts.

Web Design © STEXEMC2. All rights reserved.

Visit fbetting.co.uk Betfair Review

Log In or Sign Up

Log in with Facebook

Forgot your password? / Forgot your username?