I am working with the new version 1.6 of Joomla.

I am trying to customize the beez 5 template and I think it's useful write some notes about the customization process. Last modified date : 4th april 2011

How to change the "bananas" image named fruits.jpg

I know 4 ways to change the fruits.jpg image.

1) Put a "Custom html" module in the position-15, it will be replace the "ghost" image fruits.jpg

note : THIS IS THE RIGHT WAY!

how to do it : go to module and ADD New module "Custom HTML" type "position-15" in the position field and put what you want in the "Custom output".

2) Simple way : download the fruits.jpg from template/beez5/images, change it and upload again.

3) Upload a new image and change the index.php replacing the fruits.jpg with your image file name.

- HTML Code for template/beez5/index.php -

1
2
3

<div id="header-image">
<img alt="TPL_BEEZ5_LOGO" src="templates/beez5/images/fruits.jpg">
</div>

4) use this way only if the above options n.1 did not work...may be  if you have the joomla 1.6 and not 1.6.1.... so...Last hard way consists to disable the harddcoded <img> tag, and use the "custom html" module in the the position-15. This module allows you to insert html code like  image and / or html code or what you want.

So you have to :

a) edit the index.php

b) comment the the div and image tag

1
2
3
4
5

<!--
<div id="header-image">
<img alt="TPL_BEEZ5_LOGO" src="/site/templates/beez5/images/fruits.jpg">
</div>
-->

c) Go on your Joomla -> Admin -> Extention->Module and make a new

d) Choose "Custom HTML" module

e) Set the position-15

f) insert your image and / or / not html code

In alternative to "Custom HTML" (steps c-d-e-f ), in position-15, you can use your favorite module, for example a slide show.

Edit the index.php and remove the followinf code.

1

<script type="text/javascript" src="/templates/beez_20/javascript/md_stylechanger.js"></script>

also remove this one

1
2
3
4
5
6
7

var fontSizeTitle='<REMOVE_ME?php echo JText::_('TPL_BEEZ2_FONTSIZE'); ?>';
var bigger='<REMOVE_ME?php echo JText::_('TPL_BEEZ2_BIGGER'); ?>';
var reset='<REMOVE_ME?php echo JText::_('TPL_BEEZ2_RESET'); ?>';
var smaller='<REMOVE_ME?php echo JText::_('TPL_BEEZ2_SMALLER'); ?>';
var biggerTitle='<REMOVE_ME?php echo JText::_('TPL_BEEZ2_INCREASE_SIZE'); ?>';
var resetTitle='<REMOVE_ME?php echo JText::_('TPL_BEEZ2_REVERT_STYLES_TO_DEFAULT'); ?>';
var smallerTitle='<REMOVE_ME?php echo JText::_('TPL_BEEZ2_DECREASE_SIZE'); ?>';

and also the last one

1

<div id="fontsize"></div>

Edit the file index.php (/joomlaPath/templates/)  and insert your favico instruction as usual

The Fix is valid for the template beez 5 and beez 2 Joomla 1.6 :

Note: In Joomla 1.6.1 this bug was fixed .

File to change on line 51-55

• JoomlaPath/templates/beez_20/javascript/hide.js
• JoomlaPath/templates/beez5/javascript/hide.js

FROM

1
2
3
4
5

   if ($('mod-search-searchword')) {
      $('mod-search-searchword').form.setProperties( {
         role : 'search'
      });
   }

TO

1
2
3
4
5

if (document.id('mod-search-searchword')) {
      document.id(document.id('mod-search-searchword').form).set( {
         role : 'search'
      });
   }

How to customize the Footer

Create a new module "Custom HTML" and type "position-14".

I had 1 problem and 1 need.

Problem : How center my company address text. It's just one row.

To do it you have to type a name in the "Module Class Suffix" field in you Custom HTML module used for the footer, ad example type footer. Than you need to create a little css class named customfooter.

Edit your templates/beez5/css/beez5.css and add the following lines at the end of the file :

1
2
3

.customfooter {
   float:none !important;
}

Need : change the color of the background

To change the baground color we needs to replace the gradient image image templates/beez5/tabs_back.png with a new one.

How to add a drop down menu

I know 2 solution personally tested:

1. ARI Ext Menu, it use the eXtjs framework
2. Rocket Nav Menu
3. Or a simple way not test by me ... I found a post in the joomla forum with a couple of css and javascript code (jquery).

Note : I got a lot of problems with the menu using position-0 and position-1 in joomla 1.6.0. I didn't find an elegant way to solve the problems...I just used another position-2 as  work around and I also changed a couple of css to adapt the menu in the position-2....I will try to test it in joomla 1.6.1 may less problem.

REFERENCES

• How remove the font size function
• The Official Joomla Book - customizing the template
• FavIcon on google
• Script Error in IE (forum.joomla.org)
• Beez Template Article written by the main author of the template