1

Customizing Joomla!'s Default TemplateThe goal of this document is to instruct users on how to customize the default Joomla! 1.5 template: “rhuk_milkyway”. To perform some of the changes in this document you may need a File Transfer Protocol client (FTP client). While chances are this will not be required, many people find it to be a very valuable asset. Further more, you will need to have Super Administrative access to Joomla!'s administration panel.

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.

Changing Rhuk_milkyway's Default Configurations:

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 todo this. One is to click the little radio button, and then click 'edit' on the menu that isat the top of the Template Manager screen. (See Figure 2 & 3)

Figure 2

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.

Params.ini file is unwritable – Figure 4

After setting the params.in file to writable (777), the parameters writable setting will change from 'Unwritable' to 'Writable' (See Figures 4 & 5)

Params.ini is writable – Figure 5

Note: Rhuk_milkyway's defalt template width is not set. It is actually 'fluid'. The idea behind this is that whatever size screen the user has, the template will fill the whole width.

Figure 1

2

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.

Color Variation Settings:-Blue-Red-Green-Orange-Black-White

Background Variation Settings:-Blue-Red-Green-Orange-Black-White

Template Width Settings:-Fluid with Maximum-Medium (930px)-Small (750px)-Fluid (Varies with window size – Minimum Size is 750px)

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.

Once you've selected a setting, you must click either save or apply for those settings to be reflected on the user end. (See Figure 6)

Figure 6

How to Change The Joomla! Logo:The Joomla! logo is located at the top of the template to the left. (See Figure 7)

Header Specs:File Name: mw_joomla_logo.pngLocation: <joomlaroot>/templates/rhuk_milkyway/images/Size: 298x75pxType: 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.

Example of the Color Variation setting's effect on modules

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.

Follow the steps outlined in the 'Changing rhuk_milkeyway's default configurations' section of this document to get to rhuk_milkeyway's configuration editing screen. At the top there are a number of command icons. One is marked 'Edit CSS'. Click it. (See Figure 8)

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).

Select the template.css file by clicking the radio button directly next to it, and then click edit. (See Figure 9)

The next screen you see will be a built-in CSS editor.On line 82 of the template's CSS code, you will seethis div tag:

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;

}

Figure 8

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.

Figure 9

4

As you might guess, the line we want to change is the 7th line in this div tag:

background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;

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 newheader file's directory, file path, and file extension (type) you can save the 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! logowas.

Changing Your Favicon:Many people like to change the favicon (favorite/bookmark image, it appears next to your URL in a browser's URL input area) of their site. It's a nice way to customize your template and add a little touch of professionalism. In Joomla! each template has it's own favicon already. Usually it's the Joomla! logo. Some people prefer to build their own favicons in Adobe Photoshop or The Gimp, but there are other ways to do it to.

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.

Once you've downloaded the favicon.ico file, upload it to this directory:

<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.

Figure 10

5

Removing the “Powered By Joomla” Link – and Site Code Validators:Why should I leave the “Powered By Joomla!” link? Joomla! is an open source, community based project. If possible, you should leave the link to Joomla.org because when your site visitors see what a pretty site you have, they'll discover the power of open source community projects. You shouldn't feel embarrassed that your site is powered by Joomla! Feel proud to have site powered by an award winning Content Management System!

Refer to the steps outlined in: “How to Change The Joomla! logo:” to get to the rhuk_milkyway's configuration area. Once there, on the toolbar, click edit html. (See Figure 11)

When you are in the HTML editor, you're actually looking at PHP code. In fact, you are looking at the template's index.php file. This file is located in this directory on your server:

<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:

<?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>.

If you want to remove the site code validators, remove the very next line:

<?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>.

Once the line(s) have been removed, you can save the index.php file by clicking save on the Joomla! tool bar. (See Figure 12)

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>

Figure 12

Note: When editing CSS, or PHP, I strongly recommend you use an FTP client and 'back up' the file by creating a copy of it and using a different name. If something goes horribly wrong and you delete the wrong code, you will always

have a replacement file that you can jump back to.

Figure 11