Adding your own content to the Fest Joomla template’s event countdown header

Last Updated:

June 21st, 2015

Category:

Customization Tips

Fest Joomla template has been prepared primarily for websites for cultural events. Header section has been made using only styled text with nice guitar image, which can be replaced easily.

All text content is stored inside one Custom HTML module placed in “header” position, named also “header”. But to change it you have to disable WYSIWYG editor for a while, because sometimes it could delete/clean some our source code.

1. Go to User Manager and click on your account name, change your editor to “Code Mirror” or “No editor” and use Save button to apply changes.
2. Now you can go to : Module Manager -> find there a “Header” module and open it.
3. There you’ll all HTML code also for button label, event start and end date.

Guitar image (PNG 24-bit image with transparency to get better results) you should find here: templates/gk_fest/images/guitar.png

To show guitar image as background we used CSS:

.gk-animation .gk-guitar {
	background: transparent url('../images/guitar.png') no-repeat 0 0;
	height: 419px;
	position: absolute;
	right: 0;
	text-indent: -9999px;
	top: 30px;
	width: 187px;
	z-index: 2;
}

So if you want to change it to other picture you can simply replace PNG image (guitar.png) with yours (you can use this same filename) and override CSS to set right dimensions if it proves necessary.

Gray Map image in module background -> this file you’ll find also in template folder, here: templates/gk_fest/images/map.png

If you, but accident, deleted or broke original HTML code from module – don’t panic, here it’s (from J2.5 version):

<div class="gk-animation" data-height="530">
<div class="gk-animation-wrap">
<div class="gka-bg">Background</div>
<h2 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="200" data-time="500">Festival 21 Feb. - 27 Feb. 2012</h2>
<h1 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="600" data-time="500">Festival Musico</h1>
<div class="gk-stars" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="1000" data-time="500">* * * * * *</div>
<div class="gk-jscounter gk-scale-up" data-dateend="21-2-2015" data-timeend="19:42" data-timezone="+2" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="900" data-time="500">Counting finished!</div>
<div class="gk-guitar" data-start="{opacity: 0, right: '-200px'}" data-end="{opacity: 1, right: 0}" data-delay="900" data-time="450">Guitar</div>
<a href="#" class="gk-ticket" data-start="{opacity:0, top: '45px'}" data-end="{opacity:1, top: 0}" data-delay="1300" data-time="450">
<strong>Get a ticket</strong>
<small>Authentic Tickets on Time or Your Money Back!</small>
</a>
</div>
</div>

This article was first published July 6th, 2013