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
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.
also remove this one
and also the last one
PERSONAL.CSS and LAYOUT.CSS (JoomlaPath/templates/css)
if you see blank or gray lines edit and search for min-height ...
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
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 :
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:
- ARI Ext Menu, it use the eXtjs framework
- Rocket Nav Menu
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.
- 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