1

I'm trying to customize my user login page in my custom theme using the template file page--user--login.html.twig, but am having issues accessing the different form elements. All aspects of the form are located in page.content, but I'd like to edit the content that's being outputted.

For a simple example, the base theme has Username and Password stacked vertically, where I'd like to adjust this to use bootstrap so that they are stacked horizontally on large screen and vertically on mobile.

In Drupal 7, we had a form element in the template file that allowed me to render certain form elements separately, like:

<div class="col-sm-12 col-lg-6">
  <?php print drupal_render($form['name']); ?>
</div>
<div class="col-sm-12 col-lg-6">
  <?php print drupal_render($form['pass']); ?>
</div>

Is there an equivalent for Drupal 8?

I attempted to create a template file for the form (form--user-login.html.twig and form--user-login-form.html.twig) to see if I could alter the form template itself instead of the page the form exists on, but didn't have any luck with that.

I'd prefer to override the current login theme instead of creating a whole new page and form and have to add all the necessary configurations so that a user lands on the correct login page, but have yet to find any way to do so, thanks in advance.

1
1

if you overrided correctly element will contain all items in form--user-login.html.twig,

<div class="login-form login-form__wrapper">
    <form{{ attributes }}>
        <div class="login-form__top">
            <h3>hello world</h3>
            <div id="error_messages"></div>
            {{ element.messages }}
            {{ element.name }} {# username element #}
            {{ element.pass }} {# password element #}
            <div class="login-form__help_actions">
                <input id="show_password" class="show_password" type="checkbox" />
                <label class="password-toggle" for="show_password">Show password</label>
                <a href="/user/password" class="forgot-password">Forgot Password?</a>
            </div>
            {{ element.form_build_id }} {# required #}
            {{ element.form_id }} {# required #}
            <div class="login-form__submit">
                {{ element.actions.submit }}
            </div>
        </div>
    </form>
</div>

if the template is not valid, you should try to add it.

function Yourtheme_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {

  if ($hook == 'form' & !empty($variables['element']['#id'])) {
    $suggestions[] = 'form__' . str_replace('-', '_', $variables['element']['#id']);
  }
}

then create form--user-login-form.html.twig in your theme.

do not forget to clear the cache.

Your Answer

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