The Arcive of Official vBulletin Modifications Site.

[Monkey's Works] - Registration Help Popups · **Released**: 01-28-2008

[Monkey's Works] - Registration Help Popups
by Triky - Web City

Hi there, guys and gals! Check this script: Tooltip for forms. Do you like it? If you want to integrate it in your registration page, continue reading this post.

Preview:

RegHelpPopup[Preview].jpg (27.3 KB)

Preview (with ImageShack):

RegHelpPopup[Preview].gif

Modification:

Quote:

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 donwload 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

gwerzal · #2 01-29-2008, 09:14 AM

Looks good.

Better introduction than calling us all monkeys lol

Triky · #3 01-29-2008, 09:22 AM

Quote:

Originally Posted by gwerzal

Better introduction than calling us all monkeys lol

LOL

Marco van Herwaarden · #4 01-29-2008, 09:26 AM

Please solve the zip problems ASAP as we do not allow modifications to be posted on external sites.

PS It is preferred that you only post instructions on how to change a template. The template can already be modified and you don't want to overwrite it in such case.

Triky · #5 01-29-2008, 09:30 AM

Quote:

Originally Posted by Marco van Herwaarden

Please solve the zip problems ASAP as we do not allow modifications to be posted on external sites.

Already done.

Quote:

PS It is preferred that you only post instructions on how to change a template. The template can already be modified and you don't want to overwrite it in such case.

I have make in bold red all the additions to the code. Just check those and add one by one.

Marco van Herwaarden · #6 01-29-2008, 10:55 AM

Thanks.

But wouldn't it be easier to just say:
Find $footer and and after:

HTML Code:

<!-- 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! -->

Also you can not really rely on colors as some members might copy the entire posted template into an editor and then loose these color coding.

Edit: on a second view of the isntructions, i notice that there is more code in red at the end of some lines. Very easy to miss 1 like this.

PS Not trying to be negative, just advicing on how to make it both easier for you and for those who want to install this.

Triky · #7 01-29-2008, 12:09 PM

Quote:

Originally Posted by Marco van Herwaarden

PS Not trying to be negative, just advicing on how to make it both easier for you and for those who want to install this.

I understand and I appreciate your help, Marco.
I will try to re-visit this modification instructions soon as possible. Now I can't, zorry.

Barakat · #8 01-30-2008, 03:51 AM

its not working for mee ...

Triky · #9 01-31-2008, 07:01 AM

Quote:

Originally Posted by Barakat

its not working for mee ...

What does not work for you, Barakat?

logicuk · #10 02-15-2008, 10:44 AM

any updates coming for this?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05560 seconds Memory Usage 2,329KB Queries Executed 23 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (4)bbcode_code (1)bbcode_html (6)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (6)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (9)postbit (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!