InMotion Hosting Support Center

login-form-now-has-cssIn the last tutorial within our building a basic Joomla 3.0 template tutorial series, we showed you how to add style to login form using CSS. You can see in the screenshot to the right how this added a grey background and rounded corner to the login form. You can also see however that the other items in the sidebar still do not have any style added to them.


Locating our CSS classes

To add style to the rest of the items in the sidebar, we need to know either their classes or ids. We've done the work for you and labeled each section and the corresponding label we used to modify their styles (see the screenshot to the right).

As you can see, we're working with the following items:

  • .category_module
  • .weblinks
  • .mostread
  • .syndicate-module

The final look after making changes

all-right-sidebar-now-has-styleBefore we show you the CSS code that we used to style the rest of the modules in the sidebar, we'll skip ahead and show you the results. The screenshot to the right shows how our Joomla 3.0 template looks after we finished styling all of the elements in the right sidebar.


Applying a uniform style to the sidebar

Adding the rounded corners

Because our login form has a grey background and rounded corners, we'll apply the same style to the other sidebar modules. We don't need to copy the code we already added, instead we can add to it. In the code below, the green text is the original css code for the login form, and the text in red is the updates.

#login-form { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; background:#eee; border:1px solid #ccc; padding:5px; margin:0px 0px 10px 0px; }

Adjusting padding on the unordered lists

Because most of the modules are actually unordered lists, we found that adding some padding to the lists made them look much better:

.category-module {
padding:0px 0px 0px 20px;

Setting the .syndicate-module to be a block element

Finally, for everything to appear correctly, the .syndicate-module must be set to a block element:

.syndicate-module {


Our final stylesheet

After making the updates mentioned above, our css/style.css file looks like the following:

#login-form {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border:1px solid #ccc;
margin:0px 0px 10px 0px;

.category-module {
padding:0px 0px 0px 20px;

.syndicate-module {
Was this article helpful?
You are viewing Section 12: Adding CSS to sidebar items in a Joomla 3.1 template
Section 11: Adding CSS to the Login Form in a Joomla 3.1 template

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

n/a Points
2016-10-20 3:10 am

Thank you for this wonderful tutorial series!! Very helpful to get ths started!

n/a Points
2016-09-14 10:35 am

 Clear, well explained !


n/a Points
2016-04-21 12:53 pm

How can i make this template RTL?

31,093 Points
2016-04-21 1:14 pm
Hello majid,

Thank you for contacting us. Unfortunately, the above guide does not cover the steps for making it RTL. I did find some documentation in the offiicial Joomla Content creators article that discusses the possiblility.

Thank you,
n/a Points
2016-03-15 11:24 am

Hi, thanks for your article. Very useful and easy to understand :)

n/a Points
2015-10-16 4:26 am

Very simple and clear explanation. Super. Need more concepts on joomla.

n/a Points
2015-09-01 7:16 am


n/a Points
2015-08-12 3:16 pm

Thanks :) Great Job

n/a Points
2015-08-11 3:03 am

You are Just awesome.

Your way of explaining things and time to show screenshots whenever neede is just amazing. Thanx a lot.

n/a Points
2015-06-23 7:34 am


I have one question.

I want to add module suffix class to modules, how to do it?

<?php if ($this->countModules( 'top' )) : ?>        <div class="top /* which php code to put here? */">            <jdoc:include type="modules" name="top" style="none" />        </div>       <?php endif; ?>


So, when I add for example 2 modules in that position and add them class suffix "module-1" and "module-2" my template should generate HTML like this:


<div class="top module-1">

/* something something something */



<div class="top module-2">

/* something else */




10,077 Points
2015-06-23 9:33 am
Hello Milan,

This is something that would require a developer to code up as custom coded solutions are outside the scope of support we provide on this forum.

Best Regards,
TJ Edens
n/a Points
2015-03-10 11:54 am

Thank you so much, a really good set of articles here. I really appreciate your efforts. 

10,077 Points
2015-03-10 11:55 pm
Hello Irfan,

I am glad the article suited your needs, please do not hesitate to drop us a question if you have any.

Best Regards,
TJ Edens
n/a Points
2015-03-05 5:10 pm

great help for me!!!


n/a Points
2014-12-02 4:12 pm

This is very well exlained tutorials. I will check for additional ones.

Thank you.

n/a Points
2014-11-12 7:23 am

Great article, this will lay the ground work for every template I create. Thank you So much for your tutorial.

n/a Points
2014-10-14 5:25 am

Great tutorial. Well explained, almost everything i needed for our project. Can add on it please for example:

  1. creating drop down menus
  2. creating slide shows

Otherwise thanks a lot.

n/a Points
2014-09-17 8:21 am


n/a Points
2014-08-22 5:56 am

Thank you! This was exactly what i was looking for. Only the last part didn't work. The css classes are different in my version. But I use 3.3 not 3.1 maybe its because of that.

n/a Points
2014-07-30 4:29 pm

Excellent job! it is a great tutorial and helped me a lot!


n/a Points
2014-07-30 8:18 am

The tutorial was great until the last page.  The trouble is that, as a template designer, you don't know how your template will be used.  (Even if you are making the template for your own use, you don't know what changes you might make in the future.)

For this reason, it's a really bad idea to style the output of specific modules to make the sidebar look uniform.  What if the user adds another module to the sidebar?  What if you decide to move one of those modules to the header instead?  It would mean rewriting the template each time.  A much better idea is to style based on position, so that the style is (only) applied to modules present in the sidebar.  That way, it doesn't matter a great deal which modules are being used.

n/a Points
2014-05-27 9:42 pm

This is a beautiful work with a lot of time expended on it. Thank sfor sharing knowledge

n/a Points
2014-04-30 5:18 am

Yep, straight to the point, great tut !



n/a Points
2014-04-15 10:48 am

Nice Explanations! I followed all through. Thanx for sharing.

Please wtire more....

Jah Bless!

n/a Points
2014-04-03 4:14 pm

What a great Set of tutorials!  Thanks!


Breaks the process of creating a Joomla template into small, manageable and logical chunks.


Only one comment for improvement: add a brief comment about what the various php commands (e.g., JADDCSS or whatever ) do.

Hwever, this is the clearest presentation I've seen on the subject.

Thanks again.

2013-10-02 2:01 am
Very well done ... I appreciate your thorough tutorial. Very helpful. SS
2013-07-17 12:22 pm
Fantastic!. Very good tutorial, easy to follow and well explained. Congratulations and thank you very much for your work.
2013-03-26 1:43 pm
You're awesome !! Very basic, but everything I needed to begin.

Thank you !!!!

Keep up the good job !!

Best regards,

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

29 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!