Agaric Design Collective

Theming Drupal's user login block with CSS

Average: 4.3 (4 votes)
By Benjamin Melançon
on 09 Oct
0 comments

Key words and phrases

user login block theme

Tags

Description

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.

 

Post new comment
The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <h1> <h2> <h3> <h4> <h5> <h6> <small> <pre> <strike> <sub> <sup> <kbd> <s>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.