Template articles

Tagged under

Frontpage elements

Button "Log in"

Menu bar

The "Log in" button is created when the menu item has class gkLogin defined in the GK Additional Menu Parameters. This CSS class creates a connection between menu item and the login popup. Please remember to publish the module on the login module position in order to get working popup.

The newest change is adding in the template language file phrase: TPL_GK_LANG_MYACCOUNT - this phrase is displayed instead of the menu item with gkLogin class when user is logged in and defaultly is displayed as "My Account".

Video block

Video block

The video block can be created in the Custom HTML module - the background is defined by the background image option and the content should look like the below code:

<a href="/VIDEO_URL" class="modal gkVideoBlock" rel="{handler: 'iframe', size: {x: 640, y: 480}}">Take a tour</a>

The above code will create a block which will open a popup with video after clicking it.

Information form

Information form

The above form is created by the following code:

<form action="#" class="gkInformation">
<strong>Get info based on<br /> your study lavel</strong>
<input type="text" placeholder="Full name" name="full-name" />
<input type="text" placeholder="Your education level" name="education-level" />
<input type="email" placeholder="Your e-mail" name="email" />
<input type="submit" value="Request information" />

Content block with image and buttons

Content block

The above content block is created by the following code:

<img src="/images/demo/students.jpg" class="gkContentImage" alt="University Joomla and WordPress Template" />

<div class="gkContent">
<p>Ut imperdiet ipsum vel est congue, a vestibulum orci faucibus. Mauris dictum orci ornare arcu placerat, eu porta quam sollicitudin. Fusce in dapibus turpis. Curabitur imperdiet fermentum tellus.</p>

<p>Nunc suscipit magna vitae nisi blandit, lacinia pellentesque elit euismod. Quisque ut mattis dolor, a gravida turpis.</p>

<a href="/index.php/about-us">More details…</a>

<ul class="gkContentList" data-cols="3">
<li><a href="#">Be part of us</a></li>
<li><a href="#">Find allies</a></li>
<li><a href="#">Get support</a></li>

Menu with icons

Menu with icons

In order to create menu with icons you have to add icons-menu suffix to the Custom HTML module and use as a content the following code:

<li><a href="#"><i class="gk-icon-script"></i>How to apply</a></li>
<li><a href="#"><i class="gk-icon-calendar"></i>Deadlines</a></li>
<li><a href="#"><i class="gk-icon-marker"></i>Plan a visit</a></li>
<li><a href="#"><i class="gk-icon-education"></i>Find a major</a></li>
<li class="last-item"><a href="#">More details…</a></li>

Social icons, newsletter, positioned title

Modules bar

In order to create a bar with modules you have to add to the page suffix bottomX-bar where X is a number of the bottom module position i.e. bottom3-bar.

The above bar is based on 3 Custom HTML modules which uses the following code:

Social Icons

<ul class="gk-social-icons">
<li><a class="gk-icon-gplus-outline" href="https://plus.google.com/+gavickpro/posts">Google+</a></li>
<li><a class="gk-icon-twitter-outline" href="https://twitter.com/gavickpro">Twitter</a></li>
<li><a class="gk-icon-fb-outline" href="https://www.facebook.com/gavickpro">Facebook</a></li>
<li><a class="gk-icon-youtube-outline" href="#">YouTube</a></li>
<li><a class="gk-icon-linkedin-outline" href="#">LinkedIn</a></li>

Positioned title

<h3 class="gkBottomTitle">Campus Life</h3>


<form class="gk-newsletter" action="#">
<p><input type="email" placeholder="Your e-mail address" /> <span><input type="button" value="Subscribe" /></span></p>

Template features

Custom K2 category listings

In this template you can set 3 additional category listings:

Events listing I

Events listing I

Events listing II

Events listing II


Professors listing

Professor Item View

Professor Item View

Event info

Event info

The event data are represented as a structure in the following code:

<div class="gkEvent">
          <h3>Event Details:</h3>
                    <li><strong>Date:</strong> <span class="gkEventPeriod">
                              <time datetime="10-07-2016" class="gkEventDateStart">10 July 2014</time>
                              <time datetime="16-07-2016" class="gkEventDateEnd">16 July 2014</time>
                              </span> <span class="gkEventHours">
                              <time datetime="07:00" class="gkEventTimeStart">7:00 am</time>
                              <time datetime="18:00" class="gkEventTimeEnd">6:00 pm</time>
                              </span> </li>
                    <li> <strong>Venue:</strong> <span>Poland, Krynica-Zdroj 246a</span> </li>
                    <li class="gkEventRegister"><a href="#">Register</a></li>
          <time class="gkEventCounter" datetime="29-05-2013">Time left to event</time>

These data are also used by the Events List portal mode in News Show Pro GK5 module.

Login or register page

The login page displays the registration view too:

Login or register page

Page suffixes

frontpage - adds some style adjustments to the page which is a homepage.

bottomX-bar - removes paddings and adds table display for the modules in the bottomX module position

bottomX-grey - adds grey background to the bottomX module position

bottomX-fullwidth - makes the bottomX module position a full width

Page break example

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.


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.

Module variations

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

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

02For News Show Pro GK5, Tabs GK5, Social GK5 and Image Show GK4 modules please always disable usage of the default CSS styles in the module settings.

03If you want to remove mainbody spaces while using the module instead the component on the frontpage, please add the frontpage suffix.

04For modules which should have bigger width than other modules on the top1, top2, bottom1, bottom2 or bottom3 module position, please add the double suffix. Please remember that this suffix should be applied to the first module in the group. Otherwise it won't work. You can also use the half suffix by the same way.

05If you want to connect the menu item with the login popup please add to that menu item the gkLogin CSS class.

06The News Show Pro GK5 module has additional suffix: darkbar - this suffix is used for creating the dark transparent bar under the first link list item.

07For the module placed on the header_right module position we recommend to use the transparent module suffix.

Більше статей...

  1. Messages
  2. Module positions
  3. Typography