How to add CSS class to password-strength and password-confirm on /user/register page?

Question

I want to add a class to password-strength and password-confirm on /user/register page? I tried to alter the form but as these are made with js I could not change or add anything to them. How can I alter these?

Answer 1

Trying to explain, first you need to implement hook_theme(), in this case, you have to implement the function in your template.php file, that is located in the folder that contains the theme you are using (sites/all/themes/your_theme_folder).

function yourThemeName_theme()
{
$items = array();
$items['user_register_form'] = array(
        'render element' => 'form',
        'path' => drupal_get_path('theme', 'yourTheme') . '/templates',
        'template' => 'user-register',
);
return $items;
}

After implementing the function, you have to create the template file, in the example, the template file is called user-register.tpl.php and it's located inside the "yourThemeFolder/template" folder.

In the user-register.tpl.php file you define your custom html, for the form, the code that will be rendered inside the <form></form>. I can't test this now, but if I'm not wrong you can use the debug function to output the form array and check the fields names of your form.

debug($form);

Your template file would look like this:

<fieldset class="form-wrapper" id="edit-account">
        <legend><span class="fieldset-legend"><?php print t('User Account'); ?></span></legend>
        <div class="row">
            <div class="col-md-6">
                <?php
                // print render($form['account']);
                print render($form['account']['name']);
                print render($form['account']['mail']);

                ?>
            </div>
            <div class="col-md-6">
                <?php
                print render($form['account']['pass']);
                print render($form['account']['pass2']);
                ?>
            </div>
        </div>
    </fieldset>

For a more detailed example, check the following link: https://www.drupal.org/node/350634