Getting Started with Template Overrides

Joomla! Template
Template is a something which can be present as a website with the contents of database
tables. So the template itself is not a complete web site and it is only a basic foundation of the
design of a web site. So the appearance of a content management system can be changed by
using a template.

Beez Template.
Beez is a one of standard template which is created for joomla!. It gives more accessibility and
also the flexibility to the content management.

1
Benefits of using Beez template overrides
Accessibility
Since the content present in a completely separated file. Then the content can be presented
by using various layouts. So the users can use the layout as their thoughts to present the
content. So the things like font sizes are scalable. So the quality of the design can change by
using modern techniques. So the adjustments can be done according to the user needs.

Flexibility
It is flexible with replacing outdated technologies. For example use of table less web sites.
That can be dome with the style sheets. The style sheet is paying a major role of a content
management system since the appearance of the site change with the styles. The
confusability can be improved by using more than one style sheets.

Comfort ability with Jump labels concept

Since the linear way of presenting content has more difficulties Beez uses a concept called
jump labels. With this technique users enable to jump to the specific areas rather than
reaching the content areas in a long way.

Scalability
The change of the contents with the different sixes of browser windows is a one of anonymous
problem with web pages. So the Beez uses a semi scalable layout with full width size to
overcome those problems.

2
Template overriding with Beez
Beez is a template which overrides some of the core module and components. The override
modules and components are kept in the beez->html folder. For example there are seven
components and five modules from core modules and components are overridden by Beez.

Go to joomla1.5 -> modules ->

3
joomla1.5 -> components ->

4
joomla1.5 -> templates ->beez->html

5
Example 1:-
Override newsflash module with beez.

Step 1:
Remove the mod_newsflash folder from templates ->beez->html for a while.
Then newsflash module will not override by added module with beez.
Then look in to the newsflash module appearance in the Joomla! Beez template site.

6
Since the removal of mod_newsflash folder from templates ->beez->html, the newsflash
module is not overridden by Beez. So the newsflash appears as it defines in the core
modules.

The page source is:

7
Source for horizontal newsflash:

8
Step 2:

Now just copy the mod_newsflash folder which we removed, to the templates ->beez->html
again. Then newsflash module will override by the newly added module with beez. Now
look in to the newsflash module appearance in the Joomla! Beez template site.

9
Page source:

1
Source for horizontal newsflash:

11
Summery NOTE: See the difference of news flash module with horizontal layout

With Core module With override module

1
So the way Beez overriding technique can understand easily by looking above two steps.

There are two different page sources. The core newsflash module uses html table techniques
to arrange data. But most of the newer sites uses table less html.
So in Beez template those out dated technologies are replaced and it uses <dive>, <ul>, <li>
tags to replace tables.

The source code of newsflash module in Beez also has many improvements than the earlier
one.

1
Example 2:-
Override login module and get rounded look.

The usage of rounded corners will give a nice looking for a professional web site.
With Joomla! Templates we can have those rounded corners for the forms like login.
So I will see how we can have rounded corners for a login module with beez template.

There is a login form at the right corner of Joomla! site. By default it is not a rounded corner
one.

So now we are going to change those corners as rounded with just a few steps.

1
step 1:

Go to the admin panel.

Then select Extensions -> Module Manager from menu.

1
step 2:

There is a module called Login form.

Click on that module.

step 3:

Now we can change the parameters of Login Form module.

Set the “_login” as a module class suffix. Save it.

1
step 4:

Then go to the Joomla->templates->beez->html.

There is a folder named ‘mod_login’ and within this folder there are two files named
‘default.php’ and index.html.

1
step 5:

Open default.php file. Wrapper login and logged from using two divs.

<div id =”login-wrap1”>
<div id =”login-wrap2”>

Then put the closing tags for <div> tags at the end of <form> tag.

1
1
step 6:
Then go to Joomla- > Extensions -> Template Manager.

Click on beez.

2
Then click on the ‘Edit CSS’ button which appears in the left top corner.

Select ‘template.css’ file.

2
step 7:

Copy the following code in to the ‘template.css’ file and save it.

[CSS code]

/* Login form with Rounded corners */

div#left div.moduletable_login {
margin-left: 10px;
background: url(../images/login_right.gif) top right no-repeat;
}

div#left div.moduletable_login h3 {
margin: 0;
padding: 10px 10px 0 10px;
background: url(../images/login_left.gif) top left no-repeat;
}

div#left div.moduletable_login div#login-wrap1 {

margin: 0;
padding: 0 0 0 10px;
background: url(../images/login_left.gif) bottom left no-repeat;

div#left div.moduletable_login div#login-wrap2 {

margin: 0;
padding: 0 10px 10px 0;
background: url(../images/login_right.gif) bottom right no-repeat;
}

div#left div.moduletable_login form.form-login, div#left div.moduletable_login form.log {

margin: 0;
padding: 0;
background-color: transparent;
}

div#left div.moduletable_login form p { margin: 0; }

[End CSS code]

2
2
The above code uses below images. The images has include to the templates/beez/images
folder as folloews.

2
login_left.gif image look like this:

login_right.gif image look like this:

2
So now refresh the Joomla! site and see the different in login form.

2
Example 3:-
Change the article layout.

Change the way that content appears in the front page.

The front page main article of a Joomla! beez template.

Now we want to appear both ‘Last Updated’ and ‘Written by’ high lighted texts in the
bottom of the contents. Will se how can we do that.

2
Step 1:

Go to the Joomla->templated->beez->com_content->frontpage.

2
Step 2:

We are going to edit default_item.php file.

Now we want to print the date at the top of the content and Author and Last updated values at
the bottom.

So the print options for Author and Last updated values have to add at the bottom of the code.
To do that just copy the content from line 60 to line 80 and paste them in line number 99.

2
After paste the content.

3
Step 3:

So now we don’t need to check the parameter values for Author and Last updated values at
the beginning. But the date parameters have to check at the beginning.

Select the below content.

3
Remove the above selected part and just put the following content to that place.

<?php if ($this->item->params->get('show_create_date')) : ?>

3
Then select the highlighted part from the code and remove. We want to remove ‘Author’
and ‘Last updated’ from the top of the content.

3
Now top article info code will appear as follows.

3
Now we have moved the ‘Last updated’ and ‘Written by’ texts to the bottom as follows.

3
Step: 4
Now we want to remove the date from the bottom. So select the code which is showing below.
There it checks the ‘show_create_date’. Since it is needless we can remove that part from the
code.

3
So after remove the relevant part the code is as follows.

So now we can remove the code which is used to print the date at the bottom. In this case just
remove the high lighted part of below code from the file.

3
After doing changes the code will appear as follows

3
Now go to the front page of Joomla! with beez and refresh.

Then the front page will display the way wanted. The date will appear in the top of the content
and author and Last updated parts will show in bottom.

3
By following above examples it’s clear that beez used most
modern techniques with modules and components by replacing
out dated technologies. And also with beez template the content
management system becomes more flexible and accessible.