Registration Page Customization

12 years 9 months ago #57516 by Drunk_N_Japan
Registration Page Customization was created by Drunk_N_Japan
Customizing the Registration Page.
I am referencing alot of things from the post by bdkyle on 2006/05/17
Customizing Registration Form - Help & Help Needed

The first thing most people want to do is remove the icon legend that is on the registration page.

This can be found in the file /public_html/components/com_comprofiler/comprofiler.html.php.

In the latest version of CB the lines that you want to change are located around line 1261. In fact at the end of that line there is the comment // to remove top icons explanation just comment or remove this line.

The same goes for the bottom icon legend at around line 1324 (these are approximate line numbers as I have already made some changes).

After commenting out these lines I added a simple tag to the bottom set
[code:1]
?>
Required Fields <font color="red">*</font> [/code:1]after the closing php ?> above it.

Just remember you want to comment out the //echo getFieldIcons(1,true,true,"","",true); on the lines I mentioned so you can look for that if the line numbers don't match up.

There is also a css fix for this problem (thanks Beat) [code:1]#cbIconsTop, #cbIconsBottom { display:none; }[/code:1] you can use whichever you want.

The next thing I wanted to do was remove the Icons located next to the registration fields. This is located in /public_html/administrator/components/com_comprofiler/comprofiler.class.php. Thanks to earchy for posting this.
[code:1]
function getFieldIcons($ui, $oReq, $oProfile, $oDescription="", $oTitle="", $showLabels=false) {
$templatePath = selectTemplate($ui);
$oReturn = "";
if($oDescription) $oReturn .= " ".cbFieldTip($ui, getLangDefinition($oDescription), getLangDefinition($oTitle) );
// if ($showLabels) $oReturn .= " ".cbFieldTip($ui, _UE_FIELDDESCRIPTION, "?"«»)." "._UE_FIELDDESCRIPTION." | ";
// if($oReq) $oReturn .= " <img src='".$templatePath."required.gif' width='16' height='16' alt='*' title='"._UE_FIELDREQUIRED."' />";
// if ($showLabels) $oReturn .= " "._UE_FIELDREQUIRED." | ";
// if($oProfile) $oReturn .= " <img src='".$templatePath."profiles.gif' width='16' height='16' alt='+' title='"._UE_FIELDONPROFILE."' />";
// if( $showLabels) $oReturn .= " "._UE_FIELDONPROFILE." | ";
// if((!$oProfile) or $showLabels) $oReturn .= " <img src='".$templatePath."noprofiles.gif' width='16' height='16' alt='-' title='"._UE_FIELDNOPROFILE."' />";
// if( $showLabels) $oReturn .= " "._UE_FIELDNOPROFILE;
return "<span class='cbFieldIcons".(($showLabels) ? "Labels" : ""«»)."'>".$oReturn."</span>";
}
[/code:1]
That is how you get rid of all or some of the offending icons.

Now we want to add the asterisk * to the end of our Registration fields so that they look the way we want.

I found the file /public_html/components/com_comprofiler/plugin/user/plug_cbcore/cb.core.php. which controls the registration interface.
Starting at around line 433 I editied this file as below: Before:
[code:1]
<td class="titleCell"><?php echo _UE_YOUR_NAME; ?>:</td>
<td class="fieldCell"><input class="inputbox" type="text" size="40" id="name" name="name" mosReq="1" mosLabel="Name" value="<?php
if (isset($row->name)) echo htmlspecialchars($row->name);?>" /><?php
echo getFieldIcons(1,true,($ueConfig!=3)); ?></td>
</tr>
<?php
break;
}
?>

<tr>
<td class="titleCell"><?php echo _REGISTER_UNAME; ?></td>
<td class="fieldCell"><input type="text" id="username" name="username" autocomplete="off" mosReq="0" mosLabel="<?php
echo _REGISTER_UNAME; ?>" size="40" value="<?php if (isset($row->username)) echo htmlspecialchars($row->username);?>" class="inputbox" <?php
if ( ( isset( $ueConfig ) ) && ( $ueConfig ) ) {
echo 'onblur="cbSendUsernameCheck(this);" onkeyup="if (this.value != cbLastUsername) { document.getElementById(\'usernameCheckResponse\').innerHTML = \'\'; cbLastUsername = \'\'; }" ';
}
?>/><?php
echo getFieldIcons(1,true,($ueConfig!=1), sprintf( _VALID_AZ09, _UE_UNAME, 2 ), _REGISTER_UNAME); ?></td>
</tr>
<?php
if ( ( isset( $ueConfig ) ) && ( $ueConfig ) ) {
?>
<tr>
<td class="titleCell"> </td>
<td class="fieldCell"><?php
// <div id="usernameCheckLink"><input type=button value="<?php echo _UE_CHECK_USERNAME_AVAILABILITY; ? >" class="button" onclick="sendUsernameCheck(this);" /></div>
?><div id="usernameCheckResponse"></div>
</td>
</tr>
<?php
}
?>

<tr>
<td class="titleCell"><?php echo _REGISTER_EMAIL; ?></td>
<td class="fieldCell"><input type="text" id="email" name="email" mosReq="1" mosLabel="<?php
echo _REGISTER_EMAIL; ?>" size="40" value="<?php if (isset($row->email)) echo htmlspecialchars($row->email);?>" class="inputbox" /><?php
echo getFieldIcons(1,true,($ueConfig==1 || $ueConfig==2), _REGWARN_MAIL, _REGISTER_EMAIL); ?></td>
</tr>

<?php
if ($mosConfig_emailpass=="0" || isset($mosConfig_useractivation)) { ?>

<tr>
<td class="titleCell"><?php echo _REGISTER_PASS; ?></td>
<td class="fieldCell"><input class="inputbox" type="password" id="password" name="password" autocomplete="off" mosReq="0" mosLabel="<?php
echo _REGISTER_PASS; ?>" size="40" value="" /><?php
echo getFieldIcons(1,true,false, sprintf( _VALID_AZ09, _UE_PASS, 6 ), _REGISTER_PASS); ?></td>
</tr>
<tr>
<td class="titleCell"><?php echo _REGISTER_VPASS; ?></td>
[/code:1]

This is what it looked like when I was done: AFTER:
[code:1]
<td class="titleCell">Name:<font color="red">*</font></td>
<td class="fieldCell"><input class="inputbox" type="text" size="40" id="name" name="name" mosReq="1" mosLabel="Name" value="<?php
if (isset($row->name)) echo htmlspecialchars($row->name);?>" /><?php
echo getFieldIcons(1,true,($ueConfig!=3)); ?></td>
</tr>
<?php
break;
}
?>

<tr>
<td class="titleCell">Username:<font color="red">*</font></td>
<td class="fieldCell"><input type="text" id="username" name="username" autocomplete="off" mosReq="0" mosLabel="<?php
echo _REGISTER_UNAME; ?>" size="40" value="<?php if (isset($row->username)) echo htmlspecialchars($row->username);?>" class="inputbox" <?php
if ( ( isset( $ueConfig ) ) && ( $ueConfig ) ) {
echo 'onblur="cbSendUsernameCheck(this);" onkeyup="if (this.value != cbLastUsername) { document.getElementById(\'usernameCheckResponse\').innerHTML = \'\'; cbLastUsername = \'\'; }" ';
}
?>/><?php
echo getFieldIcons(1,true,($ueConfig!=1), sprintf( _VALID_AZ09, _UE_UNAME, 2 ), _REGISTER_UNAME); ?></td>
</tr>
<?php
if ( ( isset( $ueConfig ) ) && ( $ueConfig ) ) {
?>
<tr>
<td class="titleCell"> </td>
<td class="fieldCell"><?php
// <div id="usernameCheckLink"><input type=button value="<?php echo _UE_CHECK_USERNAME_AVAILABILITY; ? >" class="button" onclick="sendUsernameCheck(this);" /></div>
?><div id="usernameCheckResponse"></div>
</td>
</tr>
<?php
}
?>

<tr>
<td class="titleCell">E-mail<font color="red">*</font></td>
<td class="fieldCell"><input type="text" id="email" name="email" mosReq="1" mosLabel="<?php
echo _REGISTER_EMAIL; ?>" size="40" value="<?php if (isset($row->email)) echo htmlspecialchars($row->email);?>" class="inputbox" /><?php
echo getFieldIcons(1,true,($ueConfig==1 || $ueConfig==2), _REGWARN_MAIL, _REGISTER_EMAIL); ?></td>
</tr>

<?php
if ($mosConfig_emailpass=="0" || isset($mosConfig_useractivation)) { ?>

<tr>
<td class="titleCell">Password:<font color="red">*</font></td>
<td class="fieldCell"><input class="inputbox" type="password" id="password" name="password" autocomplete="off" mosReq="0" mosLabel="<?php
echo _REGISTER_PASS; ?>" size="40" value="" /><?php
echo getFieldIcons(1,true,false, sprintf( _VALID_AZ09, _UE_PASS, 6 ), _REGISTER_PASS); ?></td>
</tr>
<tr>
<td class="titleCell">Verify Password:<font color="red">*</font></td>
[/code:1]
This allows you to change what the registration feilds say without changing the language files (which I found to be tedious and it didn't work for me). Remember that this only makes a change on the registration page. If you want to change it globally you should research changing the language file that contains the appropriate fields.

Hopefully this brings together all of the different posts on the subject into one nice neat location. Good luck and remember if you find a way to do something that others haven't found yet post about it. We all gain from others knowledge only if it is available for us to use.

Post edited by: Drunk_N_Japan, at: 2008/02/25 16:57

Post edited by: Drunk_N_Japan, at: 2008/02/25 18:00
The following user(s) said Thank You: ekpott

Please Log in to join the conversation.

12 years 6 months ago #63427 by J03C
Replied by J03C on topic Re:Registration Page Customization
Great stuff! Many thanks for sharing.

Please Log in to join the conversation.

12 years 6 months ago #64004 by Ninos
Replied by Ninos on topic Re:Registration Page Customization
Yeah great guide.

HOWEVER, it doesn't get rid on 'tooltips' (which I don't reall mind, to be honest) and on edit profile the legend is still at the bottom.

Any ideas on removing the legend on profile edit?

Thanks VERY much though for the guide so far, very helpful, karma increased

Please Log in to join the conversation.

12 years 5 months ago #66206 by richrock
Replied by richrock on topic Re:Registration Page Customization
Excellent - this saved me a lot of time - thanks!

Only thing though, is I have a whole series of custom fields which are both optional and required. I can see that mosReq drives this, and would easily put in an 'if' clause to add the red * is mosReq = '1', but I can't figure where the custom fields are generated.... :(

Any ideas?

Please Log in to join the conversation.

12 years 4 months ago #68714 by Drunk_N_Japan
Replied by Drunk_N_Japan on topic Re:Registration Page Customization
I honestly never thought about removing it on the profile edit page but may look into that as I am adding more custom feilds soon.

I am not sure about the tooltips (I don't know what it is) but I think the legend on profile should be similar to the one on the registration page.

As for custom required fields I am not using any but when you create a new field it also gives you the opportunity to make that a required field. The is also the option of making an asterisk.jpg and replacing the one that is supplied with community builder.

Drunk

Please Log in to join the conversation.

12 years 4 months ago #69723 by AprilFloyd
Replied by AprilFloyd on topic Re:Registration Page Customization
I have found this a few times that there is a CSS fix to this problem - can someone post details of where the CSS file is?

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.412 seconds

Facebook Twitter LinkedIn