1
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
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 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
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. 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
save
or
apply
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:
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 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:
<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, 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:
<joomlaroot>/templates/css/
Make the file template.css writable. The CSS editing screen willdisplay “writable” indicating that the file is now available for editing.
Figure 9
Search History:
Result 00 of 00
00 results for result for
p.
Joomla! v 1.5 How to modify the default Template
By Chad Windnagle (drmmr763)
Google Highly Open Participation Contest
Joomla!
Google Highly Open Participation Contest
Joomla!
536.7K
Reads
574
Readcasts
63.4K
Embed Views
Recommended
More From This User
Notes
Load more
