User login

Home ›
 Theming Drupal's user login block with CSS

Theming Drupal's user login block with CSS

in
Searched words: 
user login block theme

http://api.drupal.org/api/function/user_login_block/6

Really, what is wanted is CSS

Here's a sample:

  #block-user-0 .form-item /* "User login form" block */
  {
    margin-top: .5em;
    margin-bottom: .5em;
  }

  #block-user-0 .form-item label /* "User login form" block */
    font-weight: normal;
  }

  #block-user-0 .item-list ul, #user-login-form .item-list ul, #user-login-form .item-list ul li,
  {
    list-style-type: none;
  }

  #block-user-0 .item-list ul li
  {
    list-style-type: none;
    margin-left: -2em;
  }
 
  #block-user-0 .item-list ul {
    margin-top: .5em;
  }

/** Drupal blocks **/
  .block /* Block wrapper */
  {
    margin-top: .75em;
    margin-bottom: 1.2em;
  }

  .block h2.title /* Block title */
  {
    font-size: 1.2em;
    line-height: 1.1em;
    background: url(images/bg_nav.png) repeat-x left bottom;
    padding: .3em;
  }

Yeah, I'm reusing the main navigation menu background on the block titles! But the part with the minimal improvements to Drupal's historically ugly login form block is above that. I think somewhere else must be setting the text-align to left as normal, or maybe only some common Drupal themes do the strange center alignment.

Resolution

Comments

Thanks, and pls help me with something more

Submitted by Visitor (not verified) on March 18, 2010 - 6:42am.

How can I change the user logIn block content, Like

I want to change:

1. 'User' instead of 'username' and

2. the text box need to be beside the label, not below the label
3. I need to hide the 'create new account' link
4. change 'Request new password' to 'Forgot your password'

thanks in advance

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Internal paths in single or double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or path. Paths to files in single or double quotes, written as "files:somefile.ext", for example, are replaced with the appropriate URL that can be used to download the file.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.