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.

 
css-classes-labeled

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:

  • ul.nav.menu
  • .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.

.mostread,
.weblinks,
.category-module,
.syndicate-module,
ul.nav.menu,
#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:

.mostread, 
.weblinks,
.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 {
display:block;
}

 

Our final stylesheet

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

.mostread, 
.weblinks,
.category-module,
.syndicate-module,
ul.nav.menu,
#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;
}

.mostread,
.weblinks,
.category-module {
padding:0px 0px 0px 20px;
}

.syndicate-module {
display:block;
}
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
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

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,
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-10-02 2:01 am
Very well done ... I appreciate your thorough tutorial. Very helpful. SS
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.

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-30 5:18 am

Yep, straight to the point, great tut !

 

Thanks.

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-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-07-30 9:58 am

Thanks a lot!

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

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

Thanks

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-09-17 8:21 am

thankssssss

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-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-12-02 4:12 pm

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

Thank you.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

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

15 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

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: support@InMotionHosting.com
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!