2

I've been playing around with Drupal 8 since about a week. A couple days ago I tried to design the user login page to my needs but I couldn't quite do it. My problem is the following:

I want to customize the user login form (/user/login). I can edit the user login page (page--user--login.html.twig) but I can't find out what the name is of the user login form? How can I restructure the elements of the user login form? Or am I looking in the wrong place?

I appreciate any help you can give!

2

One thing that helps immensely is to enable Twig debugging in your services.yml (not recommended for production environment).

parameters:
  twig.config:
    debug: true
    auto_reload: true
    cache: false

The auto_reload and cache settings can also be set to their development settings so you do not need to rebuild cache (remove compiled twig templates manually).

This will enable HTML comments that show what template is being used for various components in markup. Bartik and Classy, by default, displays this as block.html.twig. The template suggestions for a block is block--PLUGINID.html.twig where the PLUGINID is the the block's plugin id with underscores replaced by dashes.

Example debug output from my local development environment using a sub-theme of Classy:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   * block--userlogin.html.twig
   x block--user-login-block.html.twig
   * block--user.html.twig
   * block.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/blah8/templates/block--user-login-block.html.twig' -->
<div id="block-userlogin" class="contextual-region block block-user block-user-login-block" role="form">

templates/block--user-login-block.html.twig

  • I enabled the debugging for Twig already. In the HTML comments the suggestions are these: block--personal-content.html.twig, block--system-main-block.html.twig, block--system.html.twig, block.html.twig. I created a file like you mentioned and tried to output the variables with {{ kint() }} but nothing gets outputted. – adiii4 Jan 31 '16 at 16:30
  • I am not able to reproduce this. I see the following suggestions for the markup right above selector .block-user-login-block: block--userlogin.html.twig, block--user-login-block.html.twig, block--user.html.twig, block.html.twig. And block--user-login-block.html.twig has a "x" by it signifying that it is in-use. – mradcliffe Feb 1 '16 at 13:44
  • Another possibility is that you have not added the user login block to a region for your theme or maybe your theme does not have that region enabled. – mradcliffe Feb 1 '16 at 16:52
  • If I place the user login block in the content region and create a block--userlogin.html.twig file and try to output the variables with kint it works (normal page). But I want to customize the user login block on the url /user/login. When I go to this page no variables are being outputted by kint. Thanks for your help! – adiii4 Feb 1 '16 at 20:23
  • 2
    Yep, form id isn't a suggestion so you have to add it yourself: foreach.be/blog/how-manipulate-forms-drupal-8 – mradcliffe Feb 1 '16 at 21:19
1

You have this page:

  • /user - page--user.html.twig
  • /user/login - page--user--login.html.twig
  • /user/password - page--user--password.html.twig

I suggest you to use, for all this page

{% extends "page.html.twig" %}

Inside of this page page--user.html.twig with this

<div class="user-login">    
{% if page.content %}
       {{ page.content }}
    {% endif %}
</div>

And the joke is in css you have this:

.user-login input[type="text"],input[type="password"],input[type="email"],input[type="submit"]:hover, form, label, input[type="submit"]

I did only page--user.html.twig and css for all type.

If you want to structure the elements in a different way look this:

  • form.html.twig
  • form-element.html.twig
  • menu-local-tasks.html.twig

And pls put debug: true inside services.yml

  • But what if I want to structure the elements in a different way? I want to put each elements in different bootstrap coloumns. – adiii4 Jan 31 '16 at 16:26
  • I edit my post.. put debug: true inside services.yml – SakaSerbia Jan 31 '16 at 16:34
  • Its already true :) Don't all form elements change when I edit the form-element.html.twig? Or do I misunderstand something? – adiii4 Jan 31 '16 at 16:39
  • And how you would customize the fields ? for example lets say with a bootstrap theme and willing to give it's classes to the form fields ? – Gucho Ca Mar 21 '16 at 4:36
0

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

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

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.