Creating a new module position in the header area of your template

This tutorial applies to the following templates:

  • Colette
  • Maya
  • Grace
  • Magnolia
  • Harmony
  • Verona
  • Kodaline
  • London
  • Hannah
  • Elvira
  • Valencia
  • Serenity
  • Chelsea
  • Scarlett
  • Trinity
  • Willow
  • Caitlin
  • Nadia
  • Beaumont
  • Ashley
  • Fedora
  • Artisan
  • Creative
  • Revolve
  • Madison
  • Florence
  • Vitality
  • Enterprise
  • Boutique
  • Stockholm
  • Alexis
  • Central
  • Boss
  • Journal
  • Enlighten
  • LifeStyle
  • Habitat
  • Grafik
  • Brooklyn
  • Cashmere
  • Virtuoso
  • Polaris
  • Calibra
  • Renovate
  • PianoForte
  • Kindle
  • LetterPress
  • Impulse
  • Nocturne
  • Metropolis
  • Clarity
  • Substance
  • Privilege
  • Resonate
  • Arkadia
  • Presence
  • Evolution
  • Catalyst
  • Executive
  • Bordeaux
  • Novation
  • Specialize
  • Chimera
  • Avenue
  • Rendezvous

Following we will detail for you how to create a new module position in the header area of your template. This can be usefull when you wish to add a banner or language switcher to the header area of your site.

First of all locate the following line of code in your templates header.php..

<div id ="header" class="block_holder">

Directly after this code paste the following..

<div id="newmodule">
	<jdoc:include type="modules" name="newmodule" />
</div>

This will add a module position called newmodule in the header area of your template.

Next we must give the module position some styling to set the positions dimensions, location etc. To do so add the following to the Custom CSS field of your templates parameters..

#header {
	position: relative;
}
#newmodule {
	height:50px; 
	margin:0;  
	padding:0;  
	position: absolute;
	right:20px;
	top:10px;
	width:200px;
	z-index:99;
}

The above styling will create your module position to the top right of your header area. You can edit this CSS to your own taste in particular top, left. height & width under #newmodule. We gave the position absolute positioning relative to the containing #header div. In most cases the top property will be the distance between the top of your module position and the top of the browser window. The right property will be the distance between the right of your module position and the right of the wrapper area of your header. You may also wish to add other properties like color, font-family, background etc.

Other elements can be styled within your new module position by using the same #newmodule selector. An example may be something like..
#newmodule h3 {
	font-size: 18px;
	color: #CCCCCC;
}

And that should be it. You'll find the position won't be listed in the positions dropdown within your modules parameters so simply type it in to create (newmodule).

  • Tuesday, 13 August 2013

Who's Online

We have 347 guests and 2 members online

Join Our Newsletter

Free Classic Template

Sign up to our Newsletter and receive news on template releases and discount coupons along with free access to our 'Classic' Joomla template.

Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.