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;
}
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!

Like this Article?

Comments

Post a comment
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

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.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 200883

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

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!

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!