Home arrow Site Administration arrow Page 2 - Joomla Website Layout: A Developer's Guide

Customize the sidebar in Joomla - Administration

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.

  1. Joomla Website Layout: A Developer's Guide
  2. Customize the sidebar in Joomla
By: Codex-M
Rating: starstarstarstarstar / 4
September 13, 2010

print this article



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:


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).

>>> More Site Administration Articles          >>> More By Codex-M

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Coding: Not Just for Developers
- To Support or Not Support IE?
- Administration: Networking OSX and Win 7
- DotNetNuke Gets Social
- Integrating MailChimp with Joomla: Creating ...
- Integrating MailChimp with Joomla: List Mana...
- Integrating MailChimp with Joomla: Building ...
- Integrating MailChimp with Joomla
- More Top WordPress Plugins for Social Media
- Optimizing Security: SSH Public Key Authenti...
- Patches and Rejects in Software Configuratio...
- Configuring a CVS Server
- Managing Code and Teams for Cross-Platform S...
- Software Configuration Management
- Back Up a Joomla Site with Akeeba Backup

Developer Shed Affiliates


Dev Shed Tutorial Topics: