I guess they are easier ways to do this, but for me one of the most tedious tasks when I am creating a new Joomla template is to add CSS to some of the “in-house” Joomla modules.

I have a set of already html codes such as the login form, the display of the featured articles, the display of category list, between others. For me the easiest way to add this CSS is to copy and paste these codes into my HTML editor and add this ID’s and Classes into my CSS files.

In order to add CSS to your Joomla login form you need to be aware that you need to modify two more form: 

  • Create new account
  • Forgot password or username

This is the basic structe of the login form module in Joomla 2.5

<div class="moduletable">
        <form action="XXXX" method="post" id="login-form">
          <fieldset class="userdata">
            <p id="form-login-username">
              <label for="modlgn-username">User Name</label>
              <input id="modlgn-username" type="text" name="username" class="inputbox" size="18">
            </p>
            <p id="form-login-password">
              <label for="modlgn-passwd">Password</label>
              <input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18">
            </p>
            <p id="form-login-remember">
              <label for="modlgn-remember">Remember Me</label>
              <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes">
            </p>
            <input type="submit" name="Submit" class="button" value="Log in">
            <input type="hidden" name="option" value="com_users">
            <input type="hidden" name="task" value="user.login">
            <input type="hidden" name="return" value="aW5kZXgucGhwP29wdGlvbj1jb21fY29udGVudCZ2aWV3PWNhdGVnb3J5JmlkPTEzJkl0ZW1pZD0xMTg=">
            <input type="hidden" name="1b01694f821bbc4a7877c58b462ea3f3" value="1">
          </fieldset>
          <ul>
            <li> <a href="/index.php/en/component/users/?view=reset"> Forgot your password?</a> </li>
            <li> <a href="/index.php/en/component/users/?view=remind"> Forgot your username?</a> </li>
            <li> <a href="/index.php/en/component/users/?view=registration"> Create an account</a> </li>
          </ul>
        </form>
      </div>

This are the mains id and classes to add in order to give a nice format to your log in form:

#login-form {
  background: #F7F7F7;
  padding: 0.6em;
  color: #000;
  border: solid 1px #ccc;
}
#login-form ul {
  margin: 0px;
  padding: 0.5em 0 0.5em 0;
}
#login-form ul li {
  list-style: none;
  text-align: left;
  padding: 0.3em 0 0.1em 0.1em;
}
#login-form ul li a {
  font-weight:600;
  text-decoration: none;
}
#login-form INPUT {
  float: left;
  border: #ccc;
  background: #A7A7A7;
  font-weight: bold;
  padding: 0.5em;
}
#login-form input[type=text], #login-form input[type=password] {
  float: right;
  margin: 0.5em 0 0.5em 0
}
#login-form p /*#content #article #rightarticle */ {
  padding: 0.5em 0 0.2em 0;
}

These are the main CSS for the creation of an account

#member-registration {
  background: #F0F8FF;
  padding: 0.6em;
  color: #000;
  border: solid 1px #0683FF;
  margin:1em;
}
#member-registration dt {
  float: left;
  width: 12em;
}
#member-registration INPUT {
  /*  float:left;*/
  border: #0080FF;
  background: #B9DCFF;
  font-weight: bold;
  padding: 0.5em;
}
#member-registration input[type=text], #member-registration input[type=password], #member-registration input[type=email] {
  /*  float:right;*/
  margin: 0.5em 0 0.5em 0
}

And these are the main CSS for the form when some one selects forgot username/password

#user-registration {
  background: #F0F8FF;
  padding: 0.6em;
  color: #000;
  border: solid 1px #0683FF;
  margin: 1em;
}

#user-registration INPUT {
  float: left;
  border: #0080FF;
  background: #B9DCFF;
  font-weight: bold;
  padding: 0.5em;
}
#user-registration dt {
  float: left;
  width: 12em;
}