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?
1 Answer
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
-
Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.– mpdonadio ♦Jan 24, 2016 at 23:32
-
@claudio those tow i mentioned are added by JS. How can I change them using these functions?– lameeiJan 25, 2016 at 6:14
-
Do you use jQuery? If yes, you can use the addClass function, eg.:
$( "#pass2" ).addClass( "selected" );
.– ClaudioJan 25, 2016 at 20:21