Joomla Layouts: Customizing Your Website

Just to refresh your memory, the skills covered in the first part included the following:

• Changing your password in phpMyAdmin (in case you forget your administrator password).
  
• Changing the default and uploading Joomla templates.
  
• Working with and activating new Joomla templates.

Working with Joomla templates is the heart of Joomla web development, and if you know the basic skills, it will be very easy for you to advance to a more detailed stage of web development, which is important if you like to customize your website further.

In this part, you will learn these details in a step-by-step process. As this is the second part of the tutorial, you'll need to read the first part to easily understand some of the concepts discussed here.

Changing the Joomla Website Header Image

You might have noticed that in the first part, you uploaded a new Joomla open source template, named vj_anelco. However, when you start to view the website in your Ubuntu XAMPP localhost (http://localhost/joomla/), you might need to change the website header image into something you have defined as appropriate for your website content.

Say for example that you are developing a scuba diving training website. Let's name the fictitious company “Codex M Scuba Diving Training Agency.” So the best website header image will be related to scuba diving. So you decide you will use the image found here: http://www.publicdomainpictures.net/view-image.php?image=2872&picture=diver-feeding-fish&large=1

Below are the next steps you'll need to take.

Step 1. Download the image from the website to your desktop. Right click on the image ==> Save image as.

Step2. Using Firebug, measure the current image dimensions (Length and Width). If you're not familiar with Firebug, it is a Firefox extension, and you'll have to do the following to use it:

• Install it first: http://getfirebug.com/
  
• Once it is installed, go to View ==> Firebug.
  
• Click the inspect symbol (the one with the arrow).
  
• Mouse over to the image to inspect.
  
• Once the image has been fitted into a blue box, right click.
  
• Click “Layout” in the Firebug menu to your right. The image dimension is then shown (750 pixels by 260 pixels).

Step 3. Go to GIMP (Applications ==> Graphics ==> GIMP Image Editor).

Step 4. In GIMP, go to File ==> Open, and then open the downloaded image on the Desktop.

Step 5. Go to Image ==> Scale Image ==> click the chain symbol so that you can adjust both the width and the height freely according to your choice. Enter the desired height and width of the image as measured by Firebug in Step 2.

Here is a screen shot (note that the chain symbol has been separated or broken) :

Step 6. Once the image is resized, go to File ==> Save As. Enter the file name: hd.jpg, and then set the quality settings to 100 to make sure it looks very nice and does not appear to be too compressed.

Step 7. Using Firefox's Firebug, mouse over to the location of the website header image. You will notice that the image path is this:

<img alt="header" src="/joomla/templates/vj_anelco/images/hd.jpg">

Step 8. This means that you will replace this hd.jpg with the new one. Go to that image folder in your Joomla htdocs directory and overwrite hd.jpg with the new file (do not forget to back up the original image, so that you can revert if you want to).

Step 9. Refresh the website in the browser (right click on the tab and then reload the website).

You will notice that the website header has changed to the correct one. However, the logo is still not changed; the site is still using the old one. So you need to remove the “Anelco” logo in the website header and replace it.

Follow the procedures in steps 2 through 9 to replace the old website logo. Using Firebug, the image dimension for the image logo is 165 x 42.

Save the logo as logo.gif, because this is the file name of the logo as determined by this path using Firebug: <img alt="logo" src="/joomla/templates/vj_anelco/images/logo.gif">

Copy and replace the old logo.gif in that path with the new logo.gif file. Refresh your Joomla website in the browser; it should look like the screen shot below:

Here is an important tip regarding a mismatch in background colors: you can use grabc color picker to match the website's color background with your logo. For example, the website has this color background pickup by grabc (runs in a Linux terminal):

codex-m@codex-m-desktop:~$ grabc
#f3f2eb
243,242,235

Important note: If you do not have grabc installed, go to System ==> Administration ==> Synaptics Manager to install it.

Open the image in GIMP, go to Colors ==> Colorify ==> Click “Custom Color” and enter the f3f2eb under HTML notation. Click OK and the background color of that image will be matched with the website color background.