-2

I started to create my own homepage with a theme. Now i want to customize the user login-page. I can't find the user/login, user/register and user/edit pages in the context area of the administration menu.

I just want to change one block of the page and some css-type stuff. Is there an easy way to do this? I really don't want to create a whole new template just for some adjustments.

To be more specific, there is one style-element i want to be shown on the user-pages. I also want to change the URL's you are forwarded to after clicking the buttons.

4
  • 1
    first off Welcome! Commented Sep 17, 2018 at 19:40
  • 2
    Could you clarify a bit on what exactly you're trying to do and what problems you've run into? If you're just looking for a tutorial, there are many resources that show you how to modify the user login page on the web. Commented Sep 17, 2018 at 20:05
  • 1
    Of course. I'm using a theme. In this theme there is a login-user menu bar, but only on the user related pages. I want to hide this bar. I also want to group stuff in accordions. The theme has specifiv blocks for this i want to use. I'm looking for the easyiest way to edit this kind of stuff. As close to the normal editing of a page as you can get. Commented Sep 18, 2018 at 7:23
  • Those who down-voted this question are killing new-drupal users. We can't find the solution on google, thats why we are asking questions in this form. If you can't guide us, then leave us like a slum-dog. Don't hit us with your pride and ego. Commented Oct 14, 2022 at 6:11

1 Answer 1

2

Here is a module I have been messing around with to theme those login related pages.

slimlogin.module

/**
 * @file
 * Contains slimlogin.module.
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_theme().
 */
function slimlogin_theme($existing, $type, $theme, $path) {
  return array(
    'slimlogin_page' => array(
      'render element' => 'page',
    ),
  );
}

/**
 *
 */
function slimlogin_preprocess_html(&$variables) {
  $route_name = \Drupal::routeMatch()->getRouteName();

  if (in_array($route_name, ['user.login', 'user.pass', 'user.register'])) {
    $variables['html_attributes']->addClass('slimlogin-html');
    $variables['attributes']['class'][] = 'slimlogin-body';
  }
}

/**
 * Implements template_preprocess_slimlogin_page().
 */
function template_preprocess_slimlogin_page(&$variables) { }

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function slimlogin_theme_suggestions_page_alter(array &$suggestions, array $variables) {

  $route_name = \Drupal::routeMatch()->getRouteName();

  if (in_array($route_name, ['user.login', 'user.pass', 'user.register'])) {
    $suggestions = array('slimlogin_page');
    if ($route_name == 'user.login') {
      $suggestions[] = 'slimlogin_page__login';
    } elseif ($route_name == 'user.pass') {
      $suggestions[] = 'slimlogin_page__pass';
    } elseif ($route_name == 'user.regisiter') {
      $suggestions[] = 'slimlogin_page__register';
    }
  }

}

/**
 * Implements hook_form_BASE_FORM_ID_alter().
 */
function slimlogin_form_user_login_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state) { }

/**
 * Implements hook_form_BASE_FORM_ID_alter().
 */
function slimlogin_form_user_pass_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state) { }

templates/slinglogin-page.html.twig

{#
/**
 * @file
 * Default theme implementation to display a single Drupal page while offline.
 *
 * All available variables are mirrored in page.html.twig.
 * Some may be blank but they are provided for consistency.
 *
 * @see template_preprocess_slimlogin_page()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'slimlogin-main'
  ]
%}
{{ attach_library('slimlogin/base') }}
{{ page.messages }}

<main{{ attributes.addClass(classes) }}>
  {{ page.help }}
  {{ page.content }}
</main>

css/slimlogin.css

.slimlogin-body {
  background-color: #fff;
  color: #000;
  margin: 0;
}

@media all and (min-width: 460px) {
  .slimlogin-html {
    display: table;
    height: 100%;
    width: 100%;
  }
  .slimlogin-body {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    width: 100%;
  }
}

.slimlogin-main {
  background-color: transparent;
  margin-right: auto;
  margin-left: auto;
  width: 300px;
}
@media all and (min-width: 460px) {
  .slimlogin-main {
    width: 440px;
  }
}

slimlogin.install

/**
 * @file
 * Install, update, and uninstall functions for the SlimLogin module.
 */

/**
 * Implements hook_install().
 */
function slimlogin_install() {
  module_set_weight('slimlogin', 99);
}

slimlogin.libraries.yml

base:
  version: VERSION
  css:
    theme:
      css/slimlogin.css: {}

slimlogin.info.yml

name: SlimLogin
type: module
description: My Awesome Module
core: 8.x
package: Custom

A quick summary of the workings of this. hook_theme() give you a new template for the page. This page template is managed/customized into ways: the function template_preprocess_slimlogin_page() and the template file templates/slinglogin-page.html.twig.

hook_theme_suggestions_HOOK_alter() use the Route names to add the new page template to the list of suggestions for the user login, user password reset, and user request pages.

The preprocess and alter functions are there for you to made customization. for example slimlogin_preprocess_html adds some classes to the HTML and Body tags to help with your styling. you also have: template_preprocess_slimlogin_page(), slimlogin_form_user_login_form_alter(), and slimlogin_form_user_pass_alter().

And I think the other file are rather straight forward as to what they do. But if you need more info on those, ask in with a comment.

1
  • Hey, thanks for your detailed answer. If i can't manage to change things i will take a closer look. But actually thats exactly what i dont want to do. I just want to change some little details in the existing themes and i dont have a clue how to do that. But i will look for the stuff you did in the theme, maybe i can find someting. Commented Sep 18, 2018 at 10:00

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