Joomla Website Layout: A Developer’s Guide

This is the third part of a Joomla web development tutorial in Ubuntu. In this part, we’ll cover the customization details, with a particular focus on editing the sidebar and making the article title linkable. These are important website components.

Make the title on the Joomla front page linkable

By default, the Joomla front page consists of a list of articles, but the title tag isn’t a hyperlink pointing to the exact post’s URL. Instead, Joomla relies on “read more” tags, which are not so helpful when it comes to user experience and search engine optimization.

One of the best ways to get SEO benefits in the web development stages of your Joomla website is to make the article titles linkable. This will introduce the benefit of having the targeted keywords in the anchor text.

Bear in mind that if you are not linking to the canonical article URLs, then the snippets of article content appearing on your Joomla front page introduce some kind of duplicate content issues with the exact article URLs.

The following are the steps you need to take to get this done:

Step 1. Log in as Joomla administrator.

Step 2. Go to Content ==> Article manager.

Step 3. In the Article manager, click “Parameters.” This will pop up the articles’ global configuration.

Step 4. Under Global Configuration, find “Title Linkable.”

Step 5. Change it from No to Yes.

Step 6. Click “Save.”

Step 7. Now that you have defined the global settings, go to “Menus” ==> “Main Menu.”

Step 8. Click “Home.”

Step 9. To your right, expand the “Parameters (Component).”

Step 10. Find “Title Linkable,” and change it from “No” to “Use Global.”

Step 11. Click “Apply” and then “Save.”

Try viewing your Joomla website (http://localhost/joomla/). For example, using our demo Joomla website (used in the previous tutorials), below are the changes:

You might have noticed that the title tag in the screen shot above (e.g Joomla! Community Portal) has been change to a hyperlink after the adjustment.

{mospagebreak title=Customize the sidebar in Joomla}

The default Joomla sidebar can be annoying because it includes the following not-so-useful features: Polls, Who’s online, and Advertisement. Wouldn’t it be nice to directly remove these unneeded features and replace them with a list of useful articles in your website?

The key to editing the sidebar is that those components (Polls, Who’s online, Advertisement) are added and activated as “modules” in your Joomla administration panel.

Try logging in to your Joomla website as an administrator, and then go to Extensions ==> Module Manager. You will notice that those components are there and enabled.

You should see a screen something like the screen shot above. If those modules are checked, they are enabled, and “right” means that they are located on the right sidebar of your website. Those modules marked with a red x are disabled.

The steps to edit the sidebar easily are as follows (assuming you are logged in as administrator):

1. Disable “Polls,” “Who’s Online” and “Advertisement” in the Module manager. This can be done by clicking the green check mark, which will then change the marks next to these modules to a red x, indicating they are now disabled.

2. To add a list of articles to the sidebar, let’s use the “Feed Display” module. Click the feed display module (also known as the mod_feed module).

3. In the Title, let’s change it from “Feed Display” to “Articles.” This will give a more relevant heading in the sidebar.

4. Check “Yes” for both “Show title” and “Enabled.”

5. In the Position section, select “right” since you are editing the right portion of the sidebar (in this demo website example).

6. Set the access level to “Public.”

7. Under Menu assignment, select “All,” so that this will appear in all Joomla website pages and sections.

8. Expand “Module Parameters.” In the feed URL, put the feed URL of your Joomla website. For the local host-based Joomla, this will be the feed URL:

http://localhost/joomla/?format=feed&type=rss

9. Configure the rest of the module parameters settings below as follows:

RTL Feed: No

Feed Title: Yes

Feed Description: No

Feed Image: No

Items: 7

Item Description: No

Word Count: 0

Do not do anything to Advanced Parameters.

10. Click “Apply” and then hit “Save.”

When you visit your Joomla website, it should look like the screen shot below:

You will no longer see the “Polls,” “Who’s Online,” etc., and the only module activated in the sidebar is ”Articles,” which is basically a list of the website’s articles.

However, one obvious problem is that the sidebar list of articles seems distorted when seen on the browser (refer to the above screen shot).

If you encounter situations like this, you need to tweak the CSS of the template to make things look better. For example, say you plan to:

1. Increase the font size of “Articles” to make it look more prominent on the front page.

2. Increase the font size of the article list hyperlinks a little bit, so that they will look clearer to your website visitors.

3. Increase gap, height or distances between hyperlinks on the sidebar so that it won’t get distorted.

To execute the above plan, the following are the steps:

Step 1. Go to the template CSS file. In this demo website, it is found in htdocs/joomla/templates/vj_anelco/css/template_css.css

Step 2. Let’s change the gap and distance first. Go to the affected styles:

#right li {
 text-indent: 5px;
 border-bottom: solid 1px #ccc;
 height: 20px;
}

Step 3. To remove the indent, so that the anchor text will align, you can change it from 5px to 0px. And then, to increase the height, you can change from 20 px to around 50px, so it will be:

#right li {
 text-indent: 0px;
 border-bottom: solid 1px #ccc;
 height: 50px;
}

Step 4. To increase the font size of the “Articles” heading in the sidebar, find the affected style of the H3 tags:

h3 {
font-size: 1.2em;
color: #3E6E96;
margin-top: 10px;
margin-bottom: 20px;
}

To increase the font size, say for example to 2.0em, the code will be:

h3 {
font-size: 2.0em;
color: #3E6E96;
margin-top: 10px;
margin-bottom: 20px;
}

Step 5. Finally, to change the font size of the hyperlinked text in the sidebar, you need to look for the affected styles — using Firebug, for example – and then adjust the font size (for example, increasing it to 12px):

#right a:visited {
 font-size: 12px;
 color: #333;
 text-decoration: none;
 font-weight: bold;
 
}

Your sidebar will now look clean and more friendly to both users and search engines.

Of course, the content featured is still not the content you need to show to your real web visitors (by the time your Joomla website will be uploaded to your web hosting server). But once you have made all of the web development changes, you can easily copy and paste your original content from another document (MS Word, for example) to replace/overwrite the default Joomla content, and  automatically replace the content and title tags in the live site.

In the next tutorial, you will learn more about customizing your Joomla website in detail (footer adjustment, removing unrelated banners, and other necessary changes).

Google+ Comments

Google+ Comments