Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

Template Beez Joomla 1.6 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.

 

How to Remove the Font-Size feature

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>

 

PERSONAL.CSS and LAYOUT.CSS (JoomlaPath/templates/css)
if you see blank or gray lines edit  and  search for min-height ...

 

How to add the favico.

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

 

How to Solve the script bug for Internet Explorer

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

 

DISQUS - Leave your comments here