web-dev-qa-db-fra.com

Personnaliser le bloc de connexion utilisateur

Je joue avec Drupal 8 depuis environ une semaine. Il y a quelques jours, j'ai essayé de concevoir la page de connexion de l'utilisateur en fonction de mes besoins, mais je n'ai pas pu le faire. Mon problème est le suivant:

Je souhaite personnaliser le formulaire de connexion utilisateur (/ user/login). Je peux modifier la page de connexion utilisateur (page - utilisateur - login.html.twig) mais je ne peux pas savoir quel est le nom du formulaire de connexion utilisateur? Comment puis-je restructurer les éléments du formulaire de connexion utilisateur? Ou est-ce que je cherche au mauvais endroit?

J'apprécie toute aide que vous pouvez apporter!

themingblocks8users
2
adiii4

Une chose qui aide énormément est de activer Twig débogage dans votre services.yml (non recommandé pour l'environnement de production).

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

Les paramètres auto_reload et cache peuvent également être définis sur leurs paramètres de développement afin que vous n'ayez pas besoin de reconstruire le cache (supprimez les modèles compilés twig manuellement).

Cela activera les commentaires HTML qui montrent quel modèle est utilisé pour divers composants dans le balisage. Bartik et Classy, ​​par défaut, affichent ceci comme block.html.twig. Les suggestions de modèle pour un bloc sont block--PLUGINID.html.twig où PLUGINID est l'ID du plugin du bloc avec des traits de soulignement remplacés par des tirets.

Exemple de sortie de débogage de mon environnement de développement local utilisant un sous-thème de 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

2
mradcliffe

Vous avez cette page:

  • / user - page - user.html.twig
  • / user/login - page - utilisateur - login.html.twig
  • / utilisateur/mot de passe - page - utilisateur - mot de passe.html.twig

Je vous propose d'utiliser, pour toute cette page

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

A l'intérieur de cette page page - user.html.twig avec ceci

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

Et la blague est en CSS vous avez ceci:

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

Je n'ai fait que la page - user.html.twig et css pour tous les types.

Si vous souhaitez structurer les éléments d'une manière différente, regardez ceci:

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

Et les pls mettent debug: true inside services.yml

1
SakaSerbia

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

Il s'agit d'un module simple pour personnaliser les pages Drupal Login, Password et Register avec des images d'arrière-plan.

0
Satheesh kumar