0

I have installed module Security Questions to allow users to answer security question while retrieving the password.

It works fine. But I'm facing layout issue with it.

enter image description here

How can I edit this module so that I can add a container div which will contain the fields related to security questions?

I tried to edit security_questions.pages.inc file but I'm unable to understand how to make changes in it.

This is the present HTML code:

<div id="edit-account" class="form-wrapper"> <!-- Main wrapper div -->
<div id="user_register_form"> <!-- User registration div-->
    <h1>Register</h1>
    <div class="form-item form-type-textfield form-item-name">
        <label for="edit-name">Username <span class="form-required" title="This field is required.">*</span></label>
        <input class="username form-text required" id="edit-name" name="name" value="" size="60" maxlength="60" type="text">
        <div class="description">Spaces are allowed; punctuation is not allowed except for periods, hyphens, apostrophes, and underscores.</div>
    </div>
    <div class="form-item form-type-textfield form-item-mail">
        <label for="edit-mail">E-mail address <span class="form-required" title="This field is required.">*</span></label>
        <input id="edit-mail" name="mail" value="" size="60" maxlength="254" class="form-text required" type="text">
        <div class="description">A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</div>
    </div>
    <div class="form-item form-type-password-confirm form-item-pass">
        <div class="form-item form-type-password form-item-pass-pass1 password-parent">
            <div class="password-strength">
                <div class="password-strength-text" aria-live="assertive"></div>
                <div class="password-strength-title">Password strength:</div>
                <div class="password-indicator"><div class="indicator"></div></div>
            </div>
            <label for="edit-pass-pass1">Password <span class="form-required" title="This field is required.">*</span></label>
            <input class="password-field form-text required password-processed" id="edit-pass-pass1" name="pass[pass1]" size="25" maxlength="128" type="password">
        </div>
        <div class="form-item form-type-password form-item-pass-pass2 confirm-parent">
            <div class="password-confirm">Passwords match: <span></span></div>
            <label for="edit-pass-pass2">Confirm password <span class="form-required" title="This field is required.">*</span></label>
            <input class="password-confirm form-text required" id="edit-pass-pass2" name="pass[pass2]" size="25" maxlength="128" type="password">
        </div>
        <div style="display: none;" class="password-suggestions description"></div>

        <div class="description">Provide a password for the new account in both fields.</div>
    </div>
</div> <!-- User registration div closed-->

<input name="form_build_id" value="form-CRUX64b0qE0buRS7NH8HQmW5Kc7ss4kVotSDcrN5BGk" type="hidden">
<input name="form_id" value="user_register_form" type="hidden">

<!-- These fields are dynamically added as per the settings for the module configuration -->
<!-- I want these fields to be contained in a single div -->
<div class="form-item form-type-select form-item-questions-0-question"> 
    <label for="edit-questions-0-question">Security question <span class="form-required" title="This field is required.">*</span></label>
    <select id="edit-questions-0-question" name="questions[0][question]" class="form-select required">
        <option value="" selected="selected">- Select -</option>
        <option value="2">xxxxxxxxxx?</option>
        <option value="4">yyyyyyyyyy?</option>
    </select>
</div>

<div class="form-item form-type-textfield form-item-questions-0-answer">
    <label for="edit-questions-0-answer">Answer <span class="form-required" title="This field is required.">*</span></label>
    <input id="edit-questions-0-answer" name="questions[0][answer]" value="" size="60" maxlength="128" class="form-text required" type="text">
</div>

<div class="form-item form-type-select form-item-questions-1-question">
    <label for="edit-questions-1-question">Security question <span class="form-required" title="This field is required.">*</span></label>
    <select id="edit-questions-1-question" name="questions[1][question]" class="form-select required">
        <option value="" selected="selected">- Select -</option>
        <option value="2">xxxxxxxxxx?</option>
        <option value="4">yyyyyyyyyy?</option>
    </select>
</div>

<div class="form-item form-type-textfield form-item-questions-1-answer">
    <label for="edit-questions-1-answer">Answer <span class="form-required" title="This field is required.">*</span></label>
    <input id="edit-questions-1-answer" name="questions[1][answer]" value="" size="60" maxlength="128" class="form-text required" type="text">
</div>

<div class="form-actions form-wrapper" id="edit-actions">
    <input id="edit-submit" name="op" value="Create new account" class="form-submit" type="submit">
    <div class="back-to-login clearfix"><a href="/en/user/login" class="login-account" title="Sign in">Back to login</a></div>
</div>
<!-- I want to close the container here -->

  • sorry you're question is merely a CSS question and has little to do with Drupal. Inspect the HTML for your screenshot there is already likely proper nesting of elements to select what you need since you have a 2 column layout already. – tenken Mar 11 '15 at 4:14
  • I know this is a CSS question. But I want to add an extra div to contain all the fields related to security questions (which vary as per the user configuration). So how can I add that extra div? – Akshay Mar 11 '15 at 5:00
  • You can use either form_alter or theme/template for achieve this. – Rupesh Mar 11 '15 at 5:05
0

Just added these lines to the function in security_questions.pages.inc and it worked.

$form['#prefix'] = '<div class="security_questions_container">';
$form['#suffix'] = '</div>';

enter image description here

| improve this answer | |

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.