Customize user login block

Question

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!

Answer 1

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

Answer 2

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

Answer 3

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

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