2012-12-04, 08:39 AM
(2012-07-14, 12:30 AM)brad-t Wrote: Here's the template for my registration page. I offer it with no warranty or support -- it's up to you to style it as needed.
<html> <head> <title>{$mybb->settings['bbname']} - {$lang->registration}</title> {$headerinclude} <script type="text/javascript" src="jscripts/validator.js"></script> </head> <body onload=' location.href="#content" '> {$header} <a name="signup"></a> <form action="member.php" method="post" id="registration_form" name="registration_form"><input type="text" style="visibility: hidden;" value="" name="regcheck1" /><input type="text" style="visibility: hidden;" value="true" name="regcheck2" /> {$regerrors} <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30%" valign="top"> <div class="insetbox" style=" border: 1px solid #DEDEDE; margin-left: 20px; margin-top: -10px; "> <h2>Sign Up ↓</h2><br /> <table cellspacing="0" cellpadding="4" width="95%"> <tr> <td colspan="2"> <h4>Username</h4> <input type="text" class="textbox" name="username" id="username" style="width: 100%; padding: 3px; font-size: 1.2em;" value="{$username}" /></td> </tr> {$passboxes} <tr> <td><h5>Email</h5> <input type="text" class="textbox" name="email" id="email" style="width: 100%; padding: 3px;" maxlength="50" value="{$email}" /></td> <td><h5>Confirm Email</h5> <input type="text" class="textbox" name="email2" id="email2"style="width: 100%; padding: 3px;" maxlength="50" value="{$email2}" /></td> </tr> <tr> <td colspan="2" style="display: none;" id="email_status"> </td> </tr> </tr> {$regq} </tbody></table> <input type="hidden" name="step" value="registration" /> <input type="hidden" name="action" value="do_register" /> <input type="hidden" name="emailpmnotify" id="emailpmnotify" value="1" {$emailpmnotifycheck} /> <input type="hidden" name="receivepms" id="receivepms" value="1" {$receivepmscheck} /> <input type="hidden" name="pmnotice" id="pmnotice" value="1" {$pmnoticecheck} /> <input type="hidden" name="allownotices" id="allownotices" value="1" {$allownoticescheck} /> <p class="smalltext">By joining Harajuju, you agree to our <a href="http://harajuju.net/misc.php?action=help&hid=8" target="_blank">Community Rules</a> and <a href="http://harajuju.net/misc.php?action=help&hid=13" target="_blank">Terms of Service</a>.</p> <input type="submit" class="button" style="font-size: 1.5em; margin-left: auto; margin-right: auto; width: 100%;" name="regsubmit" value="Let's do it" /> </div> </td> <td width="70%" valign="top" style="padding-left: 40px;"> <h2 style="margin-top: -22px; text-align: center; position: relative; bottom: -13px;">Some reasons to love HARAJUJU</h2><br /> <div class="reason"> <img src="/images/signup_women.png"><br /> <p style="color: #cc0000; font-weight: bold; text-transform: uppercase;">For Women</p> <p style="padding: 0px 10px;">Discuss everything from lolita to gyaru with other fashion-forward girls.</p> </div> <div class="reason"> <img src="/images/signup_men.png"><br /> <p style="color: #cc0000; font-weight: bold; text-transform: uppercase;">For Men</p> <p style="padding: 0px 10px;">A Japanese fashion community with a dedicated menswear base. Finally. </p> </div> <div class="reason"> <a href="/Forum-HARALOOKS" target="_blank"><img src="/images/signup_haralooks.png"><br /> <p style="color: #cc0000; font-weight: bold; text-transform: uppercase;">Haralooks <span class="icon-chevron-right"></span></a></p> <p style="padding: 0px 10px;">Share your looks. Get feedback from other Japanese fashion lovers. </p> </div> <div class="reason"> <a href="/Forum-Brand-Directory" target="_blank"><img src="/images/signup_brands.png"><br /> <p style="color: #cc0000; font-weight: bold; text-transform: uppercase;">Brand Directory <span class="icon-chevron-right"></span></a></p> <p style="padding: 0px 10px;">In-depth info on the best brands. Your favourite isn't there? Write it. We'll help. </p> </div> <div class="reason"> <img src="/images/signup_hearts.png"><br /> <p style="color: #cc0000; font-weight: bold; text-transform: uppercase;">Share the Love</p> <p style="padding: 0px 10px;">Give Hearts to your favourite posts and looks. Collect Hearts for being awesome. </p> </div> <div class="reason"> <img src="/images/signup_advice.png"><br /> <p style="color: #cc0000; font-weight: bold; text-transform: uppercase;">Get Advice</p> <p style="padding: 0px 10px;">Should you buy that? Need fit advice? No worries -- we're here to help. </p> </div> <div class="reason"> <a href="http://harajuju.net/Forum-Marketplace" target="_blank"><img src="/images/signup_marketplace.png"><br /> <p style="color: #cc0000; font-weight: bold; text-transform: uppercase;">Marketplace <span class="icon-chevron-right"></span></a></p> <p style="padding: 0px 10px;">Buy items directly from people who love fashion as much as you. </p> </div> <div class="reason"> <img src="/images/signup_culture.png"><br /> <p style="color: #cc0000; font-weight: bold; text-transform: uppercase;">A New Culture</p> <p style="padding: 0px 10px;">A fresh take on what a fashion community can be: open, intelligent, and evolutionary. </p> </div> <br class="clear"> </td> </tr> </table> <br /> <div align="center"> <input type="hidden" name="step" value="registration" /> <input type="hidden" name="action" value="do_register" /> </div> </form> <script type="text/javascript"> <!-- regValidator = new FormValidator('registration_form'); regValidator.register('username', 'notEmpty', {failure_message:'{$lang->js_validator_no_username}'}); regValidator.register('email', 'regexp', {match_field:'email2', regexp:'^([a-zA-Z0-9_\\.\\+\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$', failure_message:'{$lang->js_validator_invalid_email}'}); regValidator.register('email2', 'matches', {match_field:'email', status_field:'email_status', failure_message:'{$lang->js_validator_email_match}'}); {$validator_extra} regValidator.register('username', 'ajax', {url:'xmlhttp.php?action=username_availability', loading_message:'{$lang->js_validator_checking_username}'}); // needs to be last // --> </script> <!-- <script type="text/javascript" language="JavaScript"> document.forms['registration_form'].elements['username'].focus(); </script> --> {$footer} </body> </html>
A lot of inline styling...
