Overriding the template

Move the User login block in the sidebar in /#overlay=admin/structure/block:

Go to your webpage and copy the html of the login form with firebug or similar (right-click form element).

Create a file themes/bartik/templates/block–user–login.tpl.php and paste the copied markup inside the login template.

Now you can edit the template the way you want (Keep the basic info unchanged though, like form post method, action and input name attributes).

Save the file and flush caches for changes to show up.

Example

Here’s an example of custom user login form with minor changes to original:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form accept-charset="UTF-8" id="user-login-form" method="post" action="/node?destination=node">
  <div class="custom-form">
    <div class="form-item form-type-textfield form-item-name">
      <label for="edit-name">Username <span title="This field is required." class="form-required">*</span></label>
      <input type="text" class="form-text required" maxlength="60" size="15" value="" name="name" id="edit-name">
    </div>
    
    <div class="form-item form-type-password form-item-pass">
      <label for="edit-pass">Password <span title="This field is required." class="form-required">*</span></label>
      <input type="password" class="form-text required" maxlength="60" size="15" name="pass" id="edit-pass">
    </div>
      
    <div id="edit-actions" class="form-actions form-wrapper">
      <input type="submit" class="form-submit" value="Log in" name="op" id="edit-submit">
    </div>
    
    <div class="item-list">
      <ul>
        <li class="first"><a title="Create a new user account." href="/user/register">Create new account</a></li>
        <li class="last"><a title="Request new password via e-mail." href="/user/password">Request new password</a></li>
      </ul>
    </div>
    
    <input type="hidden" value="<?php print $elements['form_build_id']['#value']; ?> " name="form_build_id">
    <input type="hidden" value="user_login_block" name="form_id">
  </div>
</form>

Notice that I print the form_build_id from the $elements array. You can see all available variables by putting this in your block–user–login.tpl.php:

1
dpm(get_defined_vars());

Overriding specific elements

If you don’t want to replace the whole template, you can override the elements in template.php. Use hook_form_alter hook to alter the form:

1
2
3
4
5
6
7
function bartik_form_alter(&$form, &$form_state, $form_id) {
  if ($form['#id'] == 'user-login-form') {
    //dpm($form);
    $form['name']['#title'] = t("Custom title");
    $form['actions']['submit']['#value'] = t("Hit this to login!");
  }
}

Use this to see available form elements (requires Devel module):

1
dpm($form); 

Now you can have something like this: