1

I'm working on building a custom Drupal 7 theme using bootstrap. One of the things I want to achieve is a login form that is part of the standard page template, rather than sitting alone on its own login page.

Much like on pages like this, for example, where if you are not logged in, the login form sits on each page so you can log in directly from there.

I also need to modify the rendered form to use bootstrap containers and classes, so instead of just rendering the standard form, I need to wrap the form elements in divs with "col-md-4" etc classes.

Can anyone advise or direct me to any documentation on how to achieve this. I'm sure you know that for a beginner, Drupal can be very confusing!

2

Drupal provides login block, you can alter or theme this by tpl file block--user--login.tpl.php.

so you are telling you want to use bootstrap classes for this login block.

to achive this get elements of this block by calling $elements = drupal_get_form('user_login_block'); function

you can debug this by calling print_r($elements);

paste the following code in block--user--login.tpl.php and do changes

    <?php 
            $elements = drupal_get_form('user_login_block');     
            $rendered = drupal_render($elements);
            // to see what you have to work with
            // print "<pre>ELEMENTS: " . print_r($elements,1) . "</pre>";
            $output  = '<form action="' . $elements['#action'] .
                                      '" method="' . $elements['#method'] .
                                      '" id="' . $elements['#id'] .
                                      '" accept-charset="UTF-8"><div>';
            $output .= "<div class='col-sm-4'>".$elements['name']['#children']."</div>";
            $output .= "<div class='col-sm-4'>".$elements['pass']['#children']."</div>";
            $output .= $elements['form_build_id']['#children'];
            $output .= $elements['form_id']['#children'];
            $output .= $elements['actions']['#children'];
            $output .= $elements['links']['#children'];
            $output .= '</div></form>';
                print $output; 
?>
3

1 ) Create the login and password empty page files and place them in your theme "templates" folder. The name of the files are page--user--login.tpl.php and page--user--password.tpl.php. There's no need of all those steps of "hook", "alter", blablabla... Drupal will use those files automatically without any call or whatever.

2 ) Put this code inside your files.

page--user--login.tpl.php

<?php print $messages; ?>
<?php print drupal_render(drupal_get_form('user_login')); ?>
<a href="user/password">Request new password"</a>

page--user--password.tpl.php

<?php print $messages; ?>
<?php print drupal_render(drupal_get_form('user_pass')); ?>
<a href="user/login">Go back</a>

3 ) Done! In thee steps. Now style your css as much you need and pimp your new fancy login page. "Inspect" your html output of your new login page and see how clean it is now. ; D

Afterwords )

I just spent this last hour reading posts and questions about this all over the internet, and the work around in some cases are simply crazy like using the dpm(get_defined_vars()); function, copying html and paste all of those input forms and attributes, blablabla. I didn't found a concise post like this. It's crazy!!!

Also, you will need (if you still don't have it and if you want it) to disable "label/description" and enable "placehover" for the inputs. You can do it all together like this:

<?php
/*
 *  Remove labels and add HTML5 placeholder attribute to login form
 */
function THEMENAME_form_alter(&$form, &$form_state, $form_id) {
  if ( TRUE === in_array( $form_id, array( 'user_login', 'user_login_block') ) )
    $form['name']['#attributes']['placeholder'] = t( 'Username' );
    $form['pass']['#attributes']['placeholder'] = t( 'Password' );
    $form['name']['#title_display'] = "invisible";
    $form['pass']['#title_display'] = "invisible";
}
/*
 *  Remove login form descriptions
 */
function THEMENAME_form_user_login_alter(&$form, &$form_state) {
    $form['name']['#description'] = t('');
    $form['pass']['#description'] = t('');
}
?>

PS ) Do you have the "header", "footer" and "sidebar" visible and want to remove them too? No problem. Go to admin/structure/block and click "configure". Scroll down and include this on "Show block on specific pages" option:

user/login
user/password

Done! Drupal it's incredible powerful. I think people complicate things a lot and if you see it in a simple way it will be more efficient... Most of the things you can do it inside Drupal environment.

source: https://www.drupal.org/node/1195754

  • Hi @Krishna - just so I can check that this will do what I need, will this allow me to add a small login form to the top of each page, as specified in my question? I am asking as it looks like your answer is to create customised login and password pages, which is not the same thing. – Ambulare Oct 16 '14 at 12:16
  • ok i understand, we will render block & display it in page tpl. I will update my answer. – Krishna Kanth Oct 16 '14 at 12:33
0

https://www.drupal.org/project/simplelogin

It is a simple module for Customize Drupal Login, Password and Register pages with Background images.

Administrators can provide the ability to allow users to attach their own background images/ own background color to user login, password, registration pages. Better features including customize background color, image settings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.