Custom Login page

By sukhil on 16 Mar 2016 at 12:14 UTC

I am new in Drupal 8. I want to create a new theme to according to my HTML. What is the best practice to integrating a custom build theme to drupal engine.

I have covered all sections in drupal 8 theming tutorial (https://www.drupal.org/theme-guide/8). Now I need to integrate custom login page.

I have added the following hook inside mytheme.theme file

function wms_aupl_theme(&$existing, $type, $theme, $path) {
  $hooks = array();  
  $hooks['user_login_form'] = array(         
      'render element' => 'form',
      'template' => 'user-login-form',
  );  
  return $hooks;
}

And Inserted my HTML in user-login-form.html.twig file as follows.

<div class="col-xs-12">
    <div class="reg-form-2-wrap">
        <form{{ attributes.addClass('user-login') }}>
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="main-head">Auktionsplattform</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <label class="gen-reg-label-small">Uber diese Auktionsplattform werden Beton und andere Baumaterialien en Grosgehandelt. Erstellen Sie eine Auktion fur den Besten Preis oder unterbieten Sieihre Mittbewerber fur die Besten Auftrage.</label>
                </div>
            </div>
            {{ form.name['#title'] }}
            <div class="row mrgn-top-30">
                <div class="row mrgn-top-30">
                    <div class="col-xs-3">
                        <label class="gen-reg-label">  </label>
                    </div>
                    <div class="col-xs-9">
                        {{ form.name. }}
                    </div>
                </div>
            </div>
            <div class="row">
                {{ form.pass }}
                <label class="gen-reg-label-pass"><a href="{{ base_url }}/user/password" class="reg-terms-anch">Passwort vergessen</a></label>                
            </div>
            {{ form.form_build_id }}
            {{ form.form_id }}
            <div class="row mrgn-top-30">
                <div class="col-xs-12">
                    {{ form.actions }}
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <label class="gen-reg-label-small">Noch kein Konto? <a href="{{ base_url }}/user/register" class="reg-terms-anch">Hier registrieren</a></label>
                </div>
            </div>
        </form>
    </div>
</div>

Now i need to specify inner element's template. How can I specify inner elements template?

Is there any better way to do this?

Comments

Specific child elements hook

sukhil commented 16 March 2016 at 12:50

Is there any way to specify child element's hook inside parent hook? Or Any method to define parent specific theme hooks?

Have you checked in your base

Jeff Burnz commented 17 March 2016 at 03:02

Have you checked in your base theme template, e.g. stable/templates/form? Here you will find form element templates.

Are you asking how to specify a template suggestion only for this form foreach element template used?

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Bootstrap 3 Base theme

sukhil commented 17 March 2016 at 04:25

I am using using bootstrap 3 base theme and I have created a sub theme under bootstrap(my template was created under bootstrap 3).

I am not only asking for template suggestion for this form but also how to specify template suggestions for inner elements of this form.

I successfully found a hook to track login form (which is "user_login_form") and I have specified template for this in the mytheme.theme file. Now I need to specify templates/template-suggestions for the elements(such as field_element, field_label, input etc) under this form. I can specify templates as general but i need to specify only for this form.