Joomla Layouts: Customizing Your Website

This is part two of a series on Joomla web development in Ubuntu. In the first part, you learned the basic but very important website development skills in Joomla. In this part, you’ll learn how to work with templates and other aspects of creating a customized Joomla-based 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.

{mospagebreak title=Enabling Search Engine and User Friendly URLs in Joomla}

The default URL structure of Joomla is not friendly. For example, if you try to visit one of the website’s pages, the URL you will see will look something like this: http://localhost/joomla/index.php?option=com_content&view=article&id=5:joomla-license-guidelines&catid=25:the-project&Itemid=2

Search engines like Google recommend the use of keywords in the URL and making the URL as user friendly as possible. This is best done in the website development stage, when there are still no important pages published on the Internet. It is not recommended that you do this if you have a Joomla website with hundreds to thousands of pages in the Google index, because this will entail a lot of work, take time to stabilize, and will drastically affect your current website traffic.

Since this website is still in the development stage, this is the best time to rewrite the URLs. Take the following steps:

1. Log in as a Joomla administrator: http://localhost/joomla/administrator/

2. Go to Site ==> Global configuration and look under “SEO Settings.” You will notice that the following items are off (set to No):

  • Search Engine Friendly URLs
  • Use Apache mod_rewrite
  • Add suffix to URLs

3. You need to enable the Apache mod_rewrite module, so make sure that the .htaccess is there on the website’s root directory. Go to Joomla’s root directory in XAMPP htdocs. Look for htaccess.txt and change the file name to .htaccess.

Using your Linux terminal prompt, this is a sample path for Joomla htdocs root directory:

codex-m@codex-m-desktop:/opt/lampp/htdocs/joomla$ 

Then, to change the filename from htaccess.txt to .htaccess, execute the command:

mv htaccess.txt .htaccess

In a Linux prompt:

codex-m@codex-m-desktop:/opt/lampp/htdocs/joomla$ mv htaccess.txt .htaccess

4. Now that the file has been renamed, go back to Site ==> Global Configuration in the Joomla administrator panel. Under SEO Settings, check the following options:

  • Search Engine Friendly URLs (Yes)
  • Use Apache mod_rewrite (Yes)
  • Add Suffix to URLs (Yes)

5. Click “Apply,” and then “Save.”

6. In Firefox, go to Tools ==> Clear Recent History, and set the “Time range to clear” to “Everything.”  Click “Clear Now.”

7. Open a new tab and type this in the browser: http://localhost/joomla/ 

8. You will notice that if you try visiting pages, the URLs are now short and search engine friendly (with keywords in the URL).

For example, the URL for “Joomla! License Guidelines” is changed from:

http://localhost/joomla/index.php?option=com_content&view=article&id=5:joomla-license-guidelines&catid=25:the-project&Itemid=2

to: http://localhost/joomla/joomla-license.html

Basically the purpose of the above selected options are the following:

  • Search engine friendly URL – forces the title tag of the page or page alias to be included in the URL.
  • Apache mod rewrite – shortens and cleans the URL.
  • Add Suffix to URLs – adds a .html extension to the URL.

IMPORTANT NOTE: Since the website path in the Ubuntu XAMPP localhost is: http://localhost/joomla/ , and then you are uploading this Joomla website to your hosting server root directory so that the Joomla homepage will be accessible in the browser with this URL (example only) : http://www.thisisyourjoomlawebsiteinserver.com , you need to go to configuration.php and edit the $live_site setting. So change that line from:

var $live_site = ”;

to:

var $live_site = ‘http://www.thisisyourjoomlawebsiteinserver.com';

Change the Home Page Title Tag

The current home page title tag in a default Joomla installation is: Welcome to the Frontpage

However, you can edit the title tag to something relevant to your website topic, considering its importance in search engine optimization. For example, let’s set the title tag to Codex-m Scuba Diving Training Agency.

To change the current home page title tag:

1. Log in as a Joomla administrator.

2. Go to Menus ==> Main Menu.

3. Click “Home” under “Menu Item.”

4. Expand “Parameters(System)” on the right.

5. Change the Page Title from “Welcome to the Front page” to Codex-m Scuba Diving Training Agency.

6. Click Apply, and then Save.

7. Log out of your website and clear your browser cache.

8. Visit the home page URL: http://localhost/joomla/

The title tag will now be changed to the correct one. See the screen shot below:


[gp-comments width="770" linklove="off" ]

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort