2

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. 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">Some dummy content</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?

  • I am using using bootstrap 3 base theme and I have created a sub theme under bootstrap(my template was created under bootstrap 3). – Sukhil S S Mar 17 '16 at 10:00
  • You have to add the '#theme'=> 'user_login_form' into the form itself. Also template is the default preset in D8 for theme definitions so you don't need to define it. – user21641 Mar 17 '16 at 12:17
  • Is it possible to give me any valuable resources or link to do this? – Sukhil S S Mar 18 '16 at 3:43
  • If I change in the default options it will change in all areas where it comes. I only want to change with in this form. For example, I want to change the form_element template only for this form. – Sukhil S S Mar 18 '16 at 3:45
  • This is a really good question - I once solved this in Drupal 7 but have yet to come back and do it in 8. I prefer isolated login/register/forgot forms without the entire page wrapping around it. In 7, I basically had to change the router delivery callback for those pages, provide my own html and page tpl wrapper for them so I got exactly what I wanted on the page. – Kevin Oct 1 '16 at 17:42
0

See How to manipulate forms in Drupal 8:

To make changes to the fields in your form, you have to change the specific twig templates. First check which twig templates correspond with the base theme of your Drupal application. It is important that you give new twig templates the same name as the original ones, otherwise your new templates will not be recognized.

Your Answer

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

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