P. 1
Joomla! v 1 5 Getting Started with Template Overrides

Joomla! v 1 5 Getting Started with Template Overrides

4.89

|Views: 27,176|Likes:
Published by AmyStephen
By Wickrama Arachchi Vithanage Hashani Maduwanthi Weerarathna (Hashani)
Google Highly Open Participation Program
Joomla!
By Wickrama Arachchi Vithanage Hashani Maduwanthi Weerarathna (Hashani)
Google Highly Open Participation Program
Joomla!

More info:

Published by: AmyStephen on Mar 18, 2008
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as ODT, PDF, TXT or read online from Scribd
See more
See less

12/12/2013

pdf

text

original

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.

4

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->