Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
Joomla! v 1.5 How to modify the default Template

Joomla! v 1.5 How to modify the default Template



|Views: 249,236 |Likes:
Published by AmyStephen
By Chad Windnagle (drmmr763)
Google Highly Open Participation Contest
By Chad Windnagle (drmmr763)
Google Highly Open Participation Contest

More info:

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


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





Customizing Joomla!'s Default Template
The 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
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 Figure1)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 2Figure 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 iswritable. You can do this by changing the file's permissions to 777 via FTP client, or a File Manager Componentfor 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 5Note:
Rhuk_milkyway's defalt templatewidth is not set. It is actually 'fluid'. Theidea behind this is that whatever sizescreen the user has, the template will fillthe whole width.
Figure 1
2Once you've set set the params.ini file to writable, you can then change the template parameters.There are three different
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:-
Background Variation Settings:
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
in it. Thismeans 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 
for those settings to be reflected on theuser end. (See Figure 6)
Figure 6How 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:
Transparent PNG
Figure 7
The logo is known to most web developers as a header. Its the heading of the website. It usually contains thelogo of the organization or company that the site represents. This image is in PNG format. The reason for this isbecause it is transparent.
Example of the
Color Variations
etting's effecton modules
3If the background color behind this header image was changed, the change would be seen in all the areas of thislogo that are not solid colors. This is done through CSS Z-Index settings. You don't really have to worry aboutthis, but when you replace this header, it will save you a lot of time and work if you create one that is the samesize (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. Theimage 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 tothis directory:
I named my new header:
and then uploaded it into the template's image directory. Now, youcan save yourself some work by naming the file the exact same name as the previous header. This way, youdon't have to change any code. The new image just overwrites the previous one. But if you feel like doing thingsdifferently (particularly for Search Engine Optimization reasons) you will have to edit the CSS call to the existingheader file.Follow the steps outlined in the '
Changing rhuk_milkeyway's default configurations
' section of thisdocument to get to rhuk_milkeyway's configuration editingscreen. 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 bethe 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 filesthat add more customization. The main CSS file is the one that contains all the required data for drawing the sitein 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 buttondirectly 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 8Note:
If the file template.css is not writable, you will not be able tosave any changes. You must change the permissions of this file to777 before you can edit it. Using an FTP client, go to this directory:
Make the file template.css writable. The CSS editing screen willdisplay “writable” indicating that the file is now available for editing.
Figure 9

You're Reading a Free Preview

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