Chapter 4
[ 77 ]
Step 1: Customize the layout
In Chapter 3 you've seen that the overall site layout (columns, colors, typography, and so on)
is set in the site's template les. Joomla! makes it easy to edit the current template using the
Template Manager. In this case, we'll choose a new color scheme, add a new header image,
and make a few addional changes.
Customize the color scheme
The color scheme of Joomla!'s default rhuk_milkyway template is all too well known.
There must be thousands and thousands of websites with a dark blue background, dark
blue rounded menu corners, and dark blue heading texts. Corporate and professional
looking as this may be, it's also about as special as a dark blue Japanese sedan in a car
park full of dark blue Japanese sedans. Of course, you don't want your client to think
their new website is just the same as everybody else's, so let's change things a lile.
Time for action – choosing a color variation
The rhuk_milkyway template oers you a choice of color schemes or "color variaons".
Let's pick a dierent one:
1. Navigate to Extensions | Template Manager and click on rhuk_milkyway.
2. In the Template: [ Edit ] screen, change a few values in the Parameters secon.
Select Color Variaon: Black and select Background Variaon: Black.
3. There are three Template Width opons:
 Fluid with Maximum: The width of the template is liquid; in a big window,
it will be displayed wider.
 Medium: The width of the template is set to 930 pixels.
 Small: The width of the template is set to 750 pixels.
 Fluid: The minimum size is 750 pixels; the width varies with the
window size.
Choose Medium. We'll have a xed page width of 930 pixels.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Web Building Basics: Creang a Site in an Hour

lile margin, we'll create a new header le of slightly smaller dimensions: 900
x 98 pixels. Click on New. In the Width and Height boxes, ll in 900 and 98
pixels. Choose Background Contents: Transparent.
3. In Photoshop, the PNG le shows a grey and white "checkerboard" background.
This indicates the background is transparent, which means the colors of the header
background will shine through. This way, the logo image you create blends in nicely
with the overall design.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Web Building Basics: Creang a Site in an Hour
[ 80 ]
4. Now you can create any logo you like. Let's skip the details, as these depend on
the specic needs of your site and the tool you are using. For this example, I've
created a nice rounded Web 2.0 style logo using two free fonts: Airstrip Four from
www.dafont.com (see www.dafont.com/faq.php for installaon instrucons)
and the Calibri Windows system font, I have also applied some Photoshop shapes
and eects.
5. Save the image as a PNG le. In Photoshop, click on Save for Web and Devices,
choose the PNG-24 le format, and save the image as srupheader.png. Make
sure to select the Transparency checkbox to preserve the transparent back-
ground.
Click on Save.
6. In the next screen, choose a locaon on your computer and click on Save
again. Done!
A previous version of the Microso Internet Explorer browser (version 6)
doesn't display PNG images correctly if they contain transparent areas. If you
want to accommodate for visitors using this old browser, it's beer to use an
image without transparency. Another soluon is to use a Joomla! extension
that remedies this specic browser issue. In Chapter 10, you'll learn more on
adding extensions to Joomla!. Do a Web search for "Ulmate PNG Fix Plugin"

If you're new to FTP, you can read more on the Web on using FTP soware such as FileZilla
(www.siteground.com/tutorials/ftp/filezilla.htm).
1. Using your FTP program, connect to your web server and nd the root directory
where Joomla! is installed. Browse to the /templates/rhuk_milkyway/images
directory. This is the directory that contains the images les for the default Joomla!
template, rhuk_milkyway. Upload the srupheader.png le you just created
to this folder.
Next,we'll take a peek under the Joomla! hood and change a rule in the template les to
point to the new image le. Yes, you're going to change a few lines of code—but don't worry,
it's really straighorward and we're going to explain this code thing in a minute.
2. In the Joomla! Control Panel, choose Extensions | Template Manager. In the Tem-
plate Name column, click on the name of the default template, rhuk_milkyway.
3. Click on the Edit CSS buon, select template.css and click on Edit. The Template
Manager editor screen opens. Scroll down to nd the code that starts with div#logo.
This is the code that tells Joomla! where the logo is posioned on the screen and what
image le should be used.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 4
[ 83 ]
4. Change the background: url code to refer to the new image le. This code
should now read: background: url( /images/
srupheader.png) 0 0 no-repeat;
5. Change the width and height values to reect the size of the new image. To
shi the image a lile to the le-hand side, decrease the margin-left value.
The three lines of div#logo should now read:
width: 900px;
height: 98px; mar-
gin-left: 25px;
6. Click on the Save buon. Click on Preview to see the results on the frontend. If you

We'll be exploring CSS in more detail in Chapter 11.
One last thing: Clean up a little whatchamacallit
It's me for one last template customizaon job. You may have noced a lile… well, a lile
whatchamacallit in the center of the design, just below the header:
These are two half spheres stuck together. It's what remains of the Top Menu. When the
Top Menu is enabled, these two spheres are displayed to the le-hand side and right-hand
side of the menu links. Now that you have vigorously removed the contents of the site and
disabled the Top Menu module, the template design leaves a few unwanted traces.
Time for action – remove the whatsis
We won't use the top menu on our site, so we want to remove all traces of it. To do this,
we'll have to delete a few lines in the template stylesheet:
1. Navigate to Extensions | Template Manager and click on rhuk_milkyway. Click on
the Edit CSS buon and select the CSS le template.css. Click on the Edit buon.
2. Find the CSS code that starts with /* horizontal pill menu *//.
3. Now, select all code of the horizontal pill menu styling: from the table.pill
style to the style pill # menu a # active_menu-nav.
4. This last style denion ends with background-position: 0 0;}.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 4
[ 85 ]
5. Because we will never use the horizontal menu in this site, we will remove these
styles. Press the Delete key.
6. Click on Save and then click on Preview. The header looks nice and clean.
What just happened?
You've changed the template stylesheet to remove some unnecessary formang. Again,
you've experienced how easy it is to use the built-in CSS editor to tweak the current
template's layout.
Have a go hero – explore layout settings
As you've seen, there are two ways to inuence the look and feel of your current template.

lile and see how this thing works.
As you've got a ght deadline to meet, we'll follow the three content creaon steps the quick
and dirty way. For this basic site, one secon split up into two categories will do.
Time for action – create a section and some categories
Your client wants to publish a range of arcles on the club acvies on their new site; that's
what they're all about. Specically, they want arcles on lectures and meengs.
How can we categorize these arcles the Joomla! way? Let's create an Acvies secon and
add two categories in that secon: Lectures and Meengs.
1. Navigate to Content | Secon Manager. Click on the New buon.
2. In the Title eld, type Acvies. Don't worry about the other elds; you can
leave them empty for now. Click on Save. You have created a secon.
3. Navigate to Content | Category Manager. Click on the New buon.
4. In the Title eld, type Lectures. As there is only one secon, the category is
automacally added to this secon. Click on Save. You've created a category
in the Acvies secon.
5. Adding more categories is done in a similar way. In the Category Manager, click
on New again to add a Meengs category. Click on Save.
Download at Wow! eBook
WWW.WOWEBOOK.COM