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

Triky · #12 02-15-2008, 04:32 PM

What do you mean?

GoodKarmaKid · #13 03-22-2008, 12:44 AM

Really cool looking mod

Does it work with VB 3.7 RC1 ??

Thanks,
Jason

Triky · #14 03-30-2008, 05:47 PM

It should. Try it.

GDA · #15 09-01-2008, 07:19 PM

hi,

Will this work on VB 3.62?

Triky · #16 09-02-2008, 08:27 AM

Quote:

Originally Posted by Triky

It should. Try it.

As said above..

rrr · #17 11-14-2008, 03:51 AM

I've been looking for a mod like this for a while. Can it be extended to show help on the "New Thread" page to give the user help on how to write a good thread "title" and what the "tags" are for?

rrr · #18 12-03-2008, 03:40 PM

I can't seem to figure out where to edit the CSS to change the color of the "exit" and "do not show this again" links. It's hard to read the blue text on the dark blue background

Triky · #19 12-04-2008, 03:06 PM

Sorry for the deelay.

Quote:

Originally Posted by rrr

I've been looking for a mod like this for a while. Can it be extended to show help on the "New Thread" page to give the user help on how to write a good thread "title" and what the "tags" are for?

This would be another different mod.

Quote:

Originally Posted by rrr

I can't seem to figure out where to edit the CSS to change the color of the "exit" and "do not show this again" links. It's hard to read the blue text on the dark blue background

You will find some colours settings on the form-field-tooltip.js file in your clientscript directory. Open it with a simple text editor and you will find what you need to change.

Thorlax402 · #20 12-04-2008, 04:32 PM

Doesn't work for me. Tooltip doesn't pop up.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04683 seconds Memory Usage 2,333KB Queries Executed 26 (?)
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 (4)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_postinfo_query fetch_postinfo 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!