Joomla! V 1.5 How To Modify The Default Template
Joomla! V 1.5 How To Modify The Default Template
This document is rather basic, but it will show you how to change the Joomla! logo, change the template width,
choose from existing color schemes, and remove the footer link that will take site visitors back to Joomla.org.
After logging into the Joomla! 1.5 administrative back end, go to: Extensions - > Template Manager (See Figure
1)
Once you are in the Template Manager, select the template. There are two ways to
do this. One is to click the little radio button, and then click 'edit' on the menu that is
at the top of the Template Manager screen. (See Figure 2 & 3)
Figure 2
Figure 1
Figure 3
The other way to open the template's configuration is to simply click on the title, shown in Figure 2.
Before you change any of the settings in the Template Configuration, check to see if the parameters file is
writable. You can do this by changing the file's permissions to 777 via FTP client, or a File Manager Component
for Joomla! to do this. If you experience problems changing the file permissions, check the ownership settings.
Refer to the Joomla! forum (http://forum.joomla.org) for more information.
After setting the params.in file to writable (777), the parameters writable setting will change from 'Unwritable' to
'Writable' (See Figures 4 & 5)
Once you've set set the params.ini file to writable, you can then change the template parameters.
There are three different pre-built parameters. Each has a number of different options.
They are:
Color Variation – The color variation setting changes module outline colors and heading texts.
Background Variation – The background variation setting changes the background color of the template.
Template Width – The template width setting changes the width of the template.
You can chose the settings that best suit your needs and wants. Customizing this template does not stop here,
though. Because the rhuk_milkyway template is released under the GPL license, you can edit anything in it. This
means you can get the template.css and literally change any part of the template you wish.
Figure 6
Header Specs:
File Name: mw_joomla_logo.png
Location: <joomlaroot>/templates/rhuk_milkyway/images/
Size: 298x75px
Type: Transparent PNG
Figure 7
The logo is known to most web developers as a header. Its the heading of the website. It usually contains the
logo of the organization or company that the site represents. This image is in PNG format. The reason for this is
because it is transparent.
3
If the background color behind this header image was changed, the change would be seen in all the areas of this
logo that are not solid colors. This is done through CSS Z-Index settings. You don't really have to worry about
this, but when you replace this header, it will save you a lot of time and work if you create one that is the same
size (298x75px) and same file format.
I'm going to put a header that I created into this area by creating a new image in imaging editing software. The
image I use will be the same size as the original, and will also be a transparent PNG file.
After you have created a new header file, and saved it as a transparent PNG, you can then upload the new file to
this directory: <joomlaroot>/templates/rhuk_milkyway/images/
I named my new header: my-new-header.png, and then uploaded it into the template's image directory. Now, you
can save yourself some work by naming the file the exact same name as the previous header. This way, you
don't have to change any code. The new image just overwrites the previous one. But if you feel like doing things
differently (particularly for Search Engine Optimization reasons) you will have to edit the CSS call to the existing
header file.
Listed are a bunch of CSS files. Most of them are color specific. The one we are going to have to change will be
the main CSS file: template.css.
The CSS file we want to edit is known as the main CSS file. This is because the other CSS files are simply files
that add more customization. The main CSS file is the one that contains all the required data for drawing the site
in a web browser. The file name is template.css. (In Joomla! 1.0.X it was called template_css.css).
Note: If the file template.css is not writable, you will not be able to
save any changes. You must change the permissions of this file to
777 before you can edit it. Using an FTP client, go to this directory:
<joomlaroot>/templates/css/
Make the file template.css writable. The CSS editing screen will
display “writable” indicating that the file is now available for editing.
div#logo {
position: absolute;
left: 0;
top: 0;
float: left;
width: 298px;
height: 75px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 30px;
margin-top: 25px;
}
4
As you might guess, the line we want to change is the 7th line in this div tag:
This line calls the header file mw_joomla_logo.png if we want to call a different file that we've uploaded to the
sever, we'll have to change this line. Usually the new image we upload is in the same directory as the current
image:
<joomlaroot>/templates/rhuk_milkyway/images/
After you've changed the file path so that it exactly reciprocates the new
header file's directory, file path, and file extension (type) you can save the Figure 10
change to the code by clicking the save button on the toolbar. (see Figure 10)
At this point, you should have uploaded a new header file that was the same size as the previous (298x75),
saved it as a transparent PNG, and uploaded it to Rhuk_milkyway's image folder. Then, if you didn't name it the
same name (mw_joomla_logo.png), you should have changed the CSS call to the header image. If you've done
all these things, then the new header image you created should be appearing in the area that the Joomla! logo
was.
The favicon is 16x16 pixels square, and this is the usual file path (and name) to it:
<joomlaroot>/template_name/favicon.ico
There are several websites that allow you to upload your own image and it will automatically resize it for a
favicon, and let you download it. Here are URLs to a few that I found:
http://tools.dynamicdrive.com/favicon/
http://www.degraeve.com/favicon/
Both of these allow you to browse your computer for an image. Then you can upload it. The site automatically
resizes the image and converts it to 'ico' format. You can then download it, and upload it to your own site for use.
<joomlaroot>/template_name/
As you upload it, you may get a message asking you to overwrite a file by the same size. This is the Joomla!
favicon file, and you need overwrite it. Once the new favicon been uploaded, you need to go to your browser,
and clear your cache. Browsers cache (download) favicons because they don't expect them to change
frequently. So once the Joomla! favicon has been cached, you'll have to get delete it from your browser's cache
before your new one shows up in its place.
5
<joomlaroot>/templates/rhuk_milkyway/index.php
At the very bottom, line 170-180, you will see this code:
<div id="footer">
<div id="footer_l">
<div id="footer_r">
<p style="float:left; padding-left: 25px;">
<jdoc:include type="modules" name="syndicate" />
</p>
<p style="float:right; padding-right: 25px;">
<?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>.
<?php echo JText::_('Valid') ?> <a href="http://validator.w3.org/check/referer">XHTML</a> <?php echo
JText::_('and') ?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
</p>
</div>
This is the footer div. If you want to remove the “powered by Joomla!” link, then delete this line:
If you want to remove the site code validators, remove the very next line:
Now, say you wanted to add a link to this area. This is really simple. Just use this code:
<?php echo Jtext::_('your unlinked text here') ?> <a href="http://yoursite.com">linked text</a>