[Monkey's Works] - Registration Help Popups

[Monkey's Works] - Registration Help Popups

Mod Version: 1.00, by Triky

This modification is in the archives.

vB Version: 3.7.x	Rating: (2 votes - 4.50 average)	Installs: 25
Released: 29 Jan 2008	Last Update: 29 Jan 2008	Downloads: 165
Not Supported Template Edits Additional Files Re-usable Code Translations

[Monkey's Works] - Registration Help Popups
by Triky - http://www.web-city.it/

Hi there, guys and gals! Check this script: http://www.dhtmlgoodies.com/index.html?whichScript=form-field-tooltip. Do you like it? If you want to integrate it in your registration page, continue reading this post.

Preview:

&stc=1&d=1201602680 (27.3 KB)

Preview (with ImageShack):

http://img250.imageshack.us/img250/849/reghelppopuppreviewsa6.gif

Modification:

Uploads:

Upload form-field-tooltip.js and rounded-corners.js into your clientscript folder, in your forum directory.

Upload green-arrow.gif and green-arrow-right.gif to your images/misc folder.
(You have to &stc=1&d=1201605811 this thread's attachment)

Then..
Go to your headinclude template
(AdminCp -> Styles & Templates -> Edit Templates -> headinclude)

Seach for:

Code:

<!-- / CSS Stylesheet -->

Below, add:

Code:

<!-- Registration Popups -->
    <script type="text/javascript" src="clientscript/rounded-corners.js"></script>
    <script type="text/javascript" src="clientscript/form-field-tooltip.js"></script>
<!-- / Registration Popups -->

Save & Close.

Now go to your register template and replace all your code with this one:

Code:

$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
$headinclude
<title>$vboptions[bbtitle] - <if condition="$show['coppa']">$vbphrase[coppa] </if>$vbphrase[registration]</title>
</head>
<body>
$header
<br />
<if condition="$show['coppa']">
    <div>$vbphrase[until_receive_signed_form]</div>
</if>
<if condition="$show['errors']">
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <tr>
        <td class="tcat">$vbphrase[errors_occurred_during_registration]</td>
    </tr>
    <tr>
        <td class="alt1"><ul>$errorlist</ul></td>
    </tr>
    </table>
    <br />
</if>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
function verify_passwords(password1, password2)
{
    // do various checks, this will save people noticing mistakes on next page
    if (password1.value == '' || password2.value == '')
    {
        alert('$vbphrase[fill_out_both_password_fields]');
        return false;
    }
    else if (password1.value != password2.value)
    {
        alert('$vbphrase[entered_passwords_do_not_match]');
        return false;
    }
    else
    {
        <if condition="$show['coppa']">
        pass_copy = password1.value;
        passconfirm_copy = password2.value;
        </if>
        var junk_output;
        md5hash(password1, document.forms.register.password_md5, junk_output, $show[nopasswordempty]);
        md5hash(password2, document.forms.register.passwordconfirm_md5, junk_output, $show[nopasswordempty]);
        <if condition="$show['coppa']">
        document.forms.register.password.value = pass_copy;
        document.forms.register.passwordconfirm.value = passconfirm_copy;
        </if>
        return true;
    }
    return false;
}
</script>
<form action="register.php?do=addmember" name="register" method="post" onsubmit="return verify_passwords(password, passwordconfirm);">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="addmember" />
<input type="hidden" name="url" value="$url" />
<input type="hidden" name="agree" value="$agree" />
<input type="hidden" name="password_md5" />
<input type="hidden" name="passwordconfirm_md5" />
<if condition="!$show['birthday']">
    <input type="hidden" name="day" value="$day" />
    <input type="hidden" name="month" value="$month" />
    <input type="hidden" name="year" value="$year" />
</if>
<if condition="$show['coppa']">
    <input type="hidden" name="coppauser" value="1" />
</if>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
    <td class="tcat"><phrase 1="$vboptions[bbtitle]">$vbphrase[register_at_x]</phrase></td>
</tr>
<tr>
    <td class="panelsurround" align="center">
    <div class="panel">
        <div style="width:$stylevar[formwidth]" align="$stylevar[left]">
            <div class="smallfont" style="margin-bottom:$stylevar[formspacer]px">
                <phrase 1="$vboptions[bbtitle]">$vbphrase[to_post_must_first_register]</phrase>
            </div>
            <div class="smallfont" style="margin-bottom:$stylevar[formspacer]px">
                <strong>$vbphrase[username]</strong>:<br />
                <input type="text" class="bginput" name="username" size="50" maxlength="$vboptions[maxuserlength]" value="$username" tooltipText="Type in your nickname in this box" />
            </div>
            <fieldset class="fieldset">
                <legend>$vbphrase[password]</legend>
                <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0" width="400">
                <tr>
                    <td colspan="2">$vbphrase[enter_password_for_account]</td>
                </tr>
                <tr>
                    <td>
                        $vbphrase[password]:<br />
                        <input type="password" class="bginput" name="password" size="25" maxlength="50" value="$password" tooltipText="Type in your account password" />
                    </td>
                    <td>
                        $vbphrase[confirm_password]:<br />
                        <input type="password" class="bginput" name="passwordconfirm" size="25" maxlength="50" value="$passwordconfirm" tooltipText="Re-Type in your account password for security reasons" />
                    </td>
                </tr>
                </table>
            </fieldset>
            <fieldset class="fieldset">
                <legend>$vbphrase[email_address]</legend>
                <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0" width="400">
                <tr>
                    <td colspan="2">$vbphrase[enter_valid_email_address]</td>
                </tr>
                <tr>
                    <td>
                        $vbphrase[email_address]:<br />
                        <input type="text" class="bginput" name="email" size="25" maxlength="50" value="$email" dir="ltr" tooltipText="Type in in this box your e-mail adress" />
                    </td>
                    <td>
                        $vbphrase[confirm_email_address]:<br />
                        <input type="text" class="bginput" name="emailconfirm" size="25" maxlength="50" value="$emailconfirm" dir="ltr" tooltipText="Confirm your e-mail adress!" />
                    </td>
                </tr>
                <if condition="$show['coppa']">
                <tr>
                    <td>$vbphrase[if_under_13_provide_parent]</td>
                </tr>
                <tr>
                    <td>
                        $vbphrase[parent_guardian_email]:<br />
                        <input type="text" class="bginput" name="parentemail" size="25" maxlength="50" value="$parentemail" dir="ltr" tooltipText="Type in you parent guardian e-mail." />
                    </td>
                </tr>
                </if>
                </table>
            </fieldset>
            $human_verify
        </div>
    </div>
    </td>
</tr>
</table>
<br />
<if condition="$show['customfields_profile']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
    <td class="thead">$vbphrase[additional_required_information_profile]</td>
</tr>
<tr>
    <td class="panelsurround" align="center">
    <div class="panel">
        <div style="width:$stylevar[formwidth]" align="$stylevar[left]">
            $customfields_profile
            <if condition="$show['birthday']">$birthdayfields</if>
        </div>
    </div>
    </td>
</tr>
</table>
<br />
</if>
<if condition="$show['customfields_option']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
    <td class="thead">$vbphrase[additional_required_information_option]</td>
</tr>
<tr>
    <td class="panelsurround" align="center">
    <div class="panel">
        <div style="width:$stylevar[formwidth]" align="$stylevar[left]">
            $customfields_option
        </div>
    </div>
    </td>
</tr>
</table>
<br />
</if>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
    <td class="thead">$vbphrase[additional_information]</td>
</tr>
<tr>
    <td class="panelsurround" align="center">
    <div class="panel">
        <div style="width:$stylevar[formwidth]" align="$stylevar[left]">
            <if condition="$show['referrer']">
            <fieldset class="fieldset">
                <legend>$vbphrase[referrer]</legend>
                <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0" width="100%">
                <tr>
                    <td><phrase 1="$vboptions[bbtitle]">$vbphrase[if_referred_enter_name]</phrase></td>
                </tr>
                <tr>
                    <td>
                        $vbphrase[referrer]:<br />
                        <div id="referrerfield"><input id="referrerfield_txt" type="text" class="bginput" name="referrername" value="$referrername" size="50" maxlength="$vboptions[maxuserlength]" tooltipText="Who's your Referrer?" /></div>
                        <if condition="$show['popups']">
                            <div id="referrerfield_menu" class="vbmenu_popup" style="display:none; z-index:50"></div>
                            <script type="text/javascript" src="clientscript/vbulletin_ajax_namesugg.js?v=$vboptions[simpleversion]"></script>
                            <script type="text/javascript">
                            <!--
                                vbmenu_register('referrerfield', true);
                                rnc = new vB_AJAX_NameSuggest('rnc', 'referrerfield_txt', 'referrerfield');
                                rnc.allow_multiple = false;
                            //-->
                            </script>
                        </if>
                    </td>
                </tr>
                </table>
            </fieldset>
            </if>
            $timezoneoptions
            <fieldset class="fieldset">
                <legend>$vbphrase[receive_email]</legend>
                <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0" width="100%">
                <tr>
                    <td>
                        $vbphrase[administrators_may_send_email]
                    </td>
                </tr>
                <tr>
                    <td><label for="cb_adminemail"><input type="checkbox" name="options[adminemail]" value="1" id="cb_adminemail" $checkedoff[adminemail] />$vbphrase[receive_email_from_bulletin_board_staff]</label></td>
                </tr>
                <if condition="$show['email']">
                <tr>
                    <td>$vbphrase[allow_members_send_you_email]</td>
                </tr>
                <tr>
                    <td><label for="cb_showemail"><input type="checkbox" name="options[showemail]" value="1" id="cb_showemail" $checkedoff[showemail] />$vbphrase[receive_email_from_other_members]</label></td>
                </tr>
                </if>
                </table>
            </fieldset>
            $customfields_other
        </div>
    </div>
    <div style="margin-top:$stylevar[cellpadding]px">
        <input type="submit" class="button" value="$vbphrase[complete_registration]" accesskey="s" />
        <input type="reset" class="button" name="Reset" value="$vbphrase[reset_fields]" />
    </div>
    </td>
</tr>
</table>
</form>
$footer
<!-- Don't remove this code -->
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>
<!-- Don't remove this code! -->

</body>
</html>

(Remember to check the red code if you want to change phrases)

Save & Close.

You will need to CSS that pupup box now.
Go to your additional CSS box:
(AdminCp -> Styles & Templates -> All Style Options -> Go!)
Add these lines:

Code:

#DHTMLgoodies_formTooltipDiv{
    color:#FFF;
    font-family:arial;
    font-weight:bold;
    font-size:0.8em;
    line-height:120%;
}
.DHTMLgoodies_formTooltip_closeMessage{
    color:#FFF;
    font-weight:normal;
    font-size:0.8em;
}

You're done!

I hope you like it.

Download attachment!

Modifications

Download

This modification is archived, downloads are still allowed.

RegistrationHelpPopups.zip (11.0 KB, 169 downloads)

Screenshots

Miscellaneous Hacks [Monkey's Works] - Ghost Images	vBulletin 3.7 Template Modifications
Forum Home Enhancements [Monkey's Works] - Play your Game when in Mainteinance	vBulletin 3.6 Template Modifications
[Monkey's Works] - Registration Button	vBulletin 3.6 Template Modifications
Forum Home Enhancements [Monkey's Works] - enCoded Navbar v1	vBulletin 3.6 Template Modifications
[Monkey's Works] - User Profile Web Page	vBulletin 3.6 Template Modifications

vBulletin LTS