A fullwidth banner template file for Joomla banner module

A fullwidth banner template file for Joomla banner module

This custom banner module template will allow for a full width, screen responsive banner that will get the attention of your visitors. The image banner will function just like the lead banner shown on this website.

You may need to make a small site template adjustment, if your template does not have an module position in an element outside a single main wrapper element.




If there is a module position in a wrapper that will not break the whole page, edit the inline CSS included within the custom banner module template's coding, to adjust the element(s) as needed for display. Change the class names to those used in your site template.

//--------[ Inline CSS . adjust as needed ]----------//

div.leaderboardwrap {
	background-color: #111111;
	border-bottom: 0 !important;
//----[ The wrapper with a relative position to allow positioning of the floating text box ]-----//
div.leaderboardwrap div.lead-inner {width: auto !important; position: relative;}

//------[ Commands for the image behavior ]-------//
div.leaderboardwrap img {
	display: block;
	height: auto;
	width: 100%;

//-----[ The text box behavior ]-----------//
div.lead-inner span.textbox {
	display: block;
	position: absolute;
	font-family: BebasNeueRegular;
	font-size: 26px;
	background: #ffffff;
	bottom: 0;
	left: 50px;
	color: #cd0000;
	padding: 10px;
	width: 30%;


How to use

  • FTP upload the file leadbanner.php to modules/mod_banners/tmpl (there is no installer function)
  • Create the fullwidth banner category in Components > Banners > Categories
  • Create the banners as usual and assign to the fullwidth category
    Add alt text to show the text overlay
  • Create a new Banner module and assign to the position
  • Select the fullwidth category
  • Select the 'leadbanner' template

Of course the image you use must be wide enough to span the the window. The average big screen width is 1920px.