InMotion Hosting Support Center

As we continue to create a Joomla 3.0 template, the next task we will do is add a bit of style to it. Starting off, we'll focus on the login form.

before-adding-css-to-login-formAs you can see to the screenshot to the right, the login form is very bland. There is no background color to it, no border, and it does not stand apart from the rest of the items in the sidebar.


Styling the Joomla 3.0 login form using CSS

The Joomla 3.0 login form has an id of login-form. To add css to this form, you'll want to add a css declaration for #login-form.

  1. Open css/style.css

    Using your favorite text editor, in your template's folder, open css/style.css. Your css file may be different, but this is the name of the file we included in our template.
  2. Add CSS for #login-form and then save the file

    You can add any CSS that you would like for your login form, however we decided to give the form rounded corners with a grey background. Below is the CSS that we inserted into our css/style.css file:
    #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;

    login-form-now-has-cssAfter adding this code and saving the changes, you can see in the screenshot to the right how our Joomla 3.0 login form now has a bit more style to it.

Was this article helpful?
You are viewing Section 11: Adding CSS to the Login Form in a Joomla 3.1 template
Section 10: Adding security to a Joomla 3.1 template using JEXEC
Section 12: Adding CSS to sidebar items 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

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

Post a Comment

Email Address:
Phone Number:

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

0 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!