PDA

View Full Version : Mini Mods - [Monkey's Works] - Registration Help Popups


Triky
29 Jan 2008, 11:06
[Monkey's Works] - Registration Help Popups
by Triky - Web City (http://www.web-city.it/)


Hi there, guys and gals! Check this script: Tooltip for forms (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:

https://www.vbulletin.org/forum/external/2008/01/12.gif RegHelpPopup[Preview].jpg (http://www.vbulletin.org/forum/attachment.php?attachmentid=75143&stc=1&d=1201602680) (27.3 KB)Preview (with ImageShack):

RegHelpPopup[Preview].gif (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 donwload (http://www.vbulletin.org/forum/attachment.php?attachmentid=75146&stc=1&d=1201605811) this thread's attachment)

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

Seach for:

<!-- / CSS Stylesheet -->Below, add:

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


$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
$headinclude
<title>$vboptions - <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">$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" [B]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" [B]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">$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]" [B]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:#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! ;)

<!-- ------------------------------[Monkey's Works] - vBulletin.org Releases Archive---------------------------- -->


Modifications
Thread simple Navbar below QuickReply (http://www.vbulletin.org/forum/showthread.php?t=142589) | Text Editor Toolbar Background (http://www.vbulletin.org/forum/showthread.php?t=142641) | User Profile Web Page (http://www.vbulletin.org/forum/showthread.php?t=143207) | Announcements new Table (http://www.vbulletin.org/forum/showthread.php?t=142057) | Registration Button (http://www.vbulletin.org/forum/showthread.php?t=143407) | enCoded Navbar v1 (http://www.vbulletin.org/forum/showthread.php?t=146914) | Play your Game when in Mainteinance (http://www.vbulletin.org/forum/showthread.php?t=147244) | Hey, guest! You should be a registered member! (http://www.vbulletin.org/forum/showthread.php?t=163264) | Navbar enCoded Navigator / Personal Member Navigator in ForumHome (http://www.vbulletin.org/forum/showthread.php?t=164198) | vPro Navigation Header: Professional Header (http://www.vbulletin.org/forum/showthread.php?t=164379) | White Blank Beautiful Postbit_Legacy Style (http://www.vbulletin.org/forum/showthread.php?t=165767) | Ghost Images (http://www.vbulletin.org/forum/showthread.php?t=166235)

Styles
Black Web City Style (http://www.vbulletin.org/forum/showthread.php?t=134703)


<!-- / ----------------------------[Monkey's Works] - vBulletin.org Releases Archive---------------------------- -->

gwerzal
29 Jan 2008, 11:14
Looks good.

Better introduction than calling us all monkeys lol

Triky
29 Jan 2008, 11:22
Better introduction than calling us all monkeys lol

LOL (http://www.vbulletin.org/forum/showpost.php?p=1406085&postcount=3)

Marco van Herwaarden
29 Jan 2008, 11:26
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
29 Jan 2008, 11:30
Please solve the zip problems ASAP as we do not allow modifications to be posted on external sites.

Already done.

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
29 Jan 2008, 12:55
Thanks.

But wouldn't it be easier to just say:
Find $footer and and after:
<!-- 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
29 Jan 2008, 14:09
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
30 Jan 2008, 05:51
its not working for mee ...

Triky
31 Jan 2008, 09:01
its not working for mee ...

What does not work for you, Barakat?

logicuk
15 Feb 2008, 12:44
any updates coming for this?

Triky
15 Feb 2008, 18:32
What do you mean?

GoodKarmaKid
22 Mar 2008, 02:44
Really cool looking mod

Does it work with VB 3.7 RC1 ??


Thanks,
Jason

Triky
30 Mar 2008, 19:47
It should. Try it.

GDA
01 Sep 2008, 21:19
hi,

Will this work on VB 3.62?

Triky
02 Sep 2008, 10:27
It should. Try it.

As said above..

rrr
14 Nov 2008, 05:51
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
03 Dec 2008, 17:40
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
04 Dec 2008, 17:06
Sorry for the deelay.

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.

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
04 Dec 2008, 18:32
Doesn't work for me. Tooltip doesn't pop up.