Knowledgebase

How to change or remove the top banner in Joomla

Removing or changing the default top banner of your Joomla site is a bit more complicated than changing just the logo. You have to make some changes to the code of some of the files for the particular template. Here we'll use as examples the templates Beez2 and Beez5.

You can modify the files for each template from the backend's Template Manager (Extensions>Template Manager). When you open the Template Manager click on the Templates tab in the upper left corner, then from the table with the templates click on the template's name. On the right side of the new page that opens are the stylesheet files (.css) on the left are the .php files (index.php, error.php, component.php). When you click on the particular file you'll see its code which you can modify. You can also change the code of those files through the Files section of the Pixie control panel or via FTP.

You can remove the top banner (together with the logo) of the Beez2 template by commenting out the following code in its index.php file:

 

<div class="logoheader">

<h1 id="logo">

 

<?php if ($logo): ?>

<img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>"  alt="<?php echo htmlspecialchars($templateparams->get('sitetitle'));?>" />

<?php endif;?>

<?php if (!$logo ): ?>

<?php echo htmlspecialchars($templateparams->get('sitetitle'));?>

<?php endif; ?>

<span class="header1">

<?php echo htmlspecialchars($templateparams->get('sitedescription'));?>

</span></h1>

</div>

 

You can change the Beez2 banner image from the personal.css file. First you have to upload a new image in the folder where the default banner image is located (e.g. public_html/joomla/templates/beez_20/images/personal). If you want the new banner to be the same size, you have to crop and resize the image before uploading it. After you upload it just change the name of the default image (personal2.png) with the name of the new one in the following code inside the personal.css file:

.logoheader

{

 

background:  #0c1a3e  URL(../images/personal/personal2.png) no-repeat bottom right ;

color:#fff;

min-height:200px;

margin:0em 10px 0 10px !important;

 

}

The top banner image of the Beez5 template can be removed or changed from its index.php file. To remove it comment out the following code inside the index.php file:

<div id="header-image">

<jdoc:include type="modules" name="position-15" />

<?php if ($this->countModules('position-15')==0): ?>

<img src="<?php echo $this->baseurl ?>/templates/beez5/images/fruits.jpg"  alt="<?php echo JText::_('TPL_BEEZ5_LOGO'); ?>" />

<?php endif; ?>

</div>

If you want to change the image, don't comment out anything. Instead upload a new image in the respective directory (e.g. public_html/joomla/templates/beez5/images) and then just change the name of the default image (fruits.jpg) in the above code with the name of the new image.

For other templates you might need to look through the code of other files, but generally you should be able to find the code you need either in the index.php file of the template or in one of the .css files (e.g. template.css). Useful in finding the code for an element is the Firebug extension for the browser Mozilla Firefox.

For some more information and screenshots you can also check out the tutorial on changing or removing the top banner.

Also Read