MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > How to make a Sexy Login Page
Full Version: How to make a Sexy Login Page
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

Fireworks

2015-02-07, 12:19 AM
So You Want a Cool Splash Page?


Alright, so this took me ages to figure out. And finally, I found a much less complex solution after all my complex hard work. So, here a few features for this version:

  • Forum installed on Root
  • You Don't Have to Make a PHP Page (Just a simple Template Edit)
  • Should work on every theme (Only tested on DarkBB 1.8 though)
  • Makes for a beautiful login effect! (See Demo)
There are a couple of things that I've noticed do not work using this method:

  • The setting to Force Users to Login before being to able to view the board needs to be disabled. (It didn't work on my board with it on, (probably because I was using a separate .php page to handle it), but I haven't tested it on a board using this version of the modification. If it works, please let me know!)
Alright, so first up, a preview of what we're going to make! You can view a demo of it here. Or you can look at this screenshot:

[Image: pQMf5fq.png]

That's right, we'll be making something sexy for your board! First things first, since this is just a template edit. Go to Admin CP -> Templates & Styles -> "Your_Theme" -> Member Templates -> Member Login

Now, once there replace everything in that box, with this: 


<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->login}</title>
{$headerinclude}
</head>
<body>
{$headersplash}
{$inline_errors}
{$member_loggedin_notice}
  <center>
<form action="member.php" method="post">
<table border="0" cellspacing="35%" cellpadding="10" width="35%" class="form_splash" >
<tr>
<td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->username}</strong></td>
<td class="trow1"><input type="text" class="textbox" name="username" size="25" style="width: 200px;" value="{$username}" /></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->password}</strong><br /><span class="smalltext">{$lang->pw_note}</span></td>
<td class="trow2"><input type="password" class="textbox" name="password" size="25" style="width: 200px;" value="{$password}" /></td>
</tr>
<tr>
<td class="trow1" colspan="2" align="center"><label title="{$lang->remember_me_desc}"> <center><a href="member.php?action=lostpw">{$lang->lostpw_note}</a><input type="submit" class="button" name="submit" value="{$lang->login}" />
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$redirect_url}" />&nbsp; | &nbsp;<input type="checkbox" class="checkbox" name="remember" checked="checked" value="yes" /> {$lang->remember_me}</label></center></td>
</tr>
{$captcha}
</table>
<br />
</form>
  </center>
  <br />
  <br />
  <div class="lower">
		<div class="wrapper">
			<span id="current_time">{$lang->welcome_current_time}</span>
          <br />
			<span id="copyright">
				<!-- MyBB is free software developed and maintained by a volunteer community.
					It would be much appreciated by the MyBB Group if you left the full copyright and "powered by" notice intact,
					to show your support for MyBB.  If you choose to remove or modify the copyright below,
					you may be refused support on the MyBB Community Forums.

					This is free software, support us and we'll support you. -->
				{$lang->powered_by} <a href="http://www.mybb.com" target="_blank">MyBB{$mybbversion}</a>, &copy; 2002-{$copy_year} <a href="http://www.mybb.com" target="_blank">MyBB Group</a>.  
				<!-- End powered by -->
			</span><br><strong>Designed and Coded by: </strong>
<a href="http://community.mybb.com/user-86917.html" rel="nofollow">DevilKing</a> | Customized by Fireworks!<br />
		</div>
	</div>
  <!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}
</body>
</html>

Next, you need to make one template. (I called mine "header_splash") (If you don't know how to do this the thread is here.) This way, you don't mess up the default board and end up with something weird! 

Once you've made the "header_splash" template. Copy & Paste the following code in it:

<div id="container">
		<div id="header">
			<div id="logo">
				<div class="wrapper">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
				</div>
			</div>
          		</div>
  		</div>


<br />

If you want added Cool Factor you can make the page fade in as well as hide the scroll bar! Put this code right above the above code: (I'll upload the two Jscripts as an attachment.)

<style type="text/css">
body {
    overflow:auto;
}
</style>
<script type="text/javascript" src="jscripts/firework.js"></script>
<script type="text/javascript" src="jscripts/query-1.4.2.min.js"></script><style type="text/css"></style><style type="text/css"></style>
<script type="text/javascript">
			
			$(document).ready(function() {
				
				$('body').hide().fadeIn(3000);
				
			});
			
		</script>

Awesome! Now we need to make sure we have our CSS in Order! In Templates & Styles -> "Your Theme" -> global.css, find: 

form {
margin: 0;
padding: 0;
}
And replace with: 
form {
  margin: 0;
padding: 0;
  width: 35%;
  margin-left: auto;
  margin-right: auto;
}

Next up, we have a few more Styling modifications. All of these are under the Templates -> Members Templates, so just find the file and replace it.

First, we have member_register, replace it with this:

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->registration}</title>
{$headerinclude}
<script src="{$mybb->asset_url}/jscripts/validate/jquery.validate.min.js"></script>
</head>
<body>
{$headersplash}
<form action="member.php" method="post" id="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="35%" cellpadding="10" width="35%" class="form_splash">
<tr>
<td class="thead" colspan="2"><strong>{$lang->registration}</strong></td>
</tr>
<tr>
<td width="50%" class="trow1" valign="top">
<fieldset class="trow2">
<legend><strong>{$lang->account_details}</strong></legend>
<table cellspacing="0" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<td colspan="2"><span class="smalltext"><label for="username">{$lang->username}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="textbox" name="username" id="username" style="width: 100%" value="{$username}" /></td>
</tr>
{$passboxes}
<tr>
<td width="50%" valign="top"><span class="smalltext"><label for="email">{$lang->email}</label></span></td>
<td width="50%" valign="top"><span class="smalltext"><label for="email2">{$lang->confirm_email}</label></span></td>
</tr>
<tr>
<td width="50%" valign="top"><input type="text" class="textbox" name="email" id="email" style="width: 100%" maxlength="50" value="{$email}" /></td>
<td width="50%" valign="top"><input type="text" class="textbox" name="email2" id="email2" style="width: 100%" maxlength="50" value="{$email2}" /></td>
</tr>
<tr>
	<td colspan="2" style="display: none;" id="email_status">&nbsp;</td>
</tr>
{$hiddencaptcha}
</table>
</fieldset>
{$requiredfields}
{$customfields}
{$referrer}
{$regimage}
{$questionbox}
</td>
<td width="50%" class="trow1" valign="top">
<fieldset class="trow2">
<legend><strong>{$lang->account_prefs}</strong></legend>
<table cellspacing="0" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="allownotices" id="allownotices" value="1" {$allownoticescheck} /></td>
<td valign="top"><span class="smalltext"><label for="allownotices">{$lang->allow_notices}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="hideemail" id="hideemail" value="1" {$hideemailcheck} /></td>
<td valign="top"><span class="smalltext"><label for="hideemail">{$lang->hide_email}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="receivepms" id="receivepms" value="1" {$receivepmscheck} /></td>
<td valign="top"><span class="smalltext"><label for="receivepms">{$lang->receive_pms}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="pmnotice" id="pmnotice" value="1"{$pmnoticecheck} /></td>
<td valign="top"><span class="smalltext"><label for="pmnotice">{$lang->pm_notice}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="pmnotify" id="pmnotify" value="1" {$pmnotifycheck} /></td>
<td valign="top"><span class="smalltext"><label for="pmnotify">{$lang->email_notify_newpm}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="invisible" id="invisible" value="1" {$invisiblecheck} /></td>
<td valign="top"><span class="smalltext"><label for="invisible">{$lang->invisible_mode}</label></span></td>
</tr>
<tr>
<td colspan="2"><span class="smalltext"><label for="subscriptionmethod">{$lang->subscription_method}</label></span></td>
</tr>
<tr>
<td colspan="2">
	<select name="subscriptionmethod" id="subscriptionmethod">
		<option value="0" {$no_auto_subscribe_selected}>{$lang->no_auto_subscribe}</option>
		<option value="1" {$no_subscribe_selected}>{$lang->no_subscribe}</option>
		<option value="2" {$instant_email_subscribe_selected}>{$lang->instant_email_subscribe}</option>
		<option value="3" {$instant_pm_subscribe_selected}>{$lang->instant_pm_subscribe}</option>
	</select>
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset class="trow2">
<legend><strong><label for="timezone">{$lang->time_offset}</label></strong></legend>
<table cellspacing="0" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<td><span class="smalltext">{$lang->time_offset_desc}</span></td>
</tr>
<tr>
<td>{$tzselect}</td>
</tr>
<tr>
<td><span class="smalltext">{$lang->dst_correction}</span></td>
</tr>
<tr>
<td>
	<select name="dstcorrection">
		<option value="2" {$dst_auto_selected}>{$lang->dst_correction_auto}</option>
		<option value="1" {$dst_enabled_selected}>{$lang->dst_correction_enabled}</option>
		<option value="0" {$dst_disabled_selected}>{$lang->dst_correction_disabled}</option>
	</select>
</td>
</tr>
</table>
</fieldset>
{$boardlanguage}
</td>
</tr>
</table>
<br />
<div align="center">
<input type="hidden" name="regtime" value="{$time}" />
<input type="hidden" name="step" value="registration" />
<input type="hidden" name="action" value="do_register" />
<input type="submit" class="button" name="regsubmit" value="{$lang->submit_registration}" />
</div>
</form>
<script type="text/javascript">
<!--
$().ready(function() {
	// validate registration_form
	$("#registration_form").validate({
		rules: {
          username: {
            required: true,
            minlength: {$mybb->settings['minnamelength']},
			maxlength: {$mybb->settings['maxnamelength']},
			remote:{
				url: "xmlhttp.php?action=username_availability",
				type: "post",
              	dataType: "json",
				data:
				{
					my_post_key: my_post_key
				},
			},
          },
          email: {
				required: true,
				email: true,
          },
          email2: {
				required: true,
				email: true,
				equalTo: "#email"
          },
		},
		messages: {
            username: {
              		minlength: "{$lang->js_validator_username_length}",
              		maxlength: "{$lang->js_validator_username_length}",
            },
          	email: "{$lang->js_validator_invalid_email}",
			email2: "{$lang->js_validator_email_match}",
		}
	});

   {$validator_extra}
});
// -->
</script>
</body>
</html>

Next up, is member_registration_agreement, Replace with:

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->agreement}</title>
{$headerinclude}
</head>
<body>
{$headersplash}
<br />
  <center>
<form action="member.php" method="post" width="35%" margin-left:"auto" margin-right:"auto">
<table border="0" cellspacing="35%" cellpadding="10" width="35%" class="form_splash">
<tr>
<td class="thead"><strong>{$mybb->settings['bbname']} - {$lang->agreement}</strong></td>
</tr>
{$coppa_agreement}
<tr>
<td class="trow1">
<p>{$lang->agreement_1}</p>
<p>{$lang->agreement_2}</p>
<p>{$lang->agreement_3}</p>
<p>{$lang->agreement_4}</p>
<p><strong>{$lang->agreement_5}</strong></p>
</td>
</tr>
</table>

<br />
<div align="center">
<input type="hidden" name="step" value="agreement" />
<input type="hidden" name="action" value="register" />
<input type="submit" class="button" name="agree" value="{$lang->i_agree}" />
</div>
</form>
    <center>
      <br />
</body>
</html>

After that, we have member_resetpassword, replace with:

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->reset_password}</title>
{$headerinclude}
</head>
<body>
{$headersplash}
<br />
  <center>
<form action="member.php" method="post">
<table border="0" cellspacing="35%" cellpadding="10" width="35%" class="form_splash">
<tr>
<td class="thead" colspan="2"><strong>{$lang->reset_password}</strong></td>
</tr>
<tr>
<td class="trow1" width="30%"><strong>{$lang_username}</strong></td>
<td class="trow1"><input type="text" class="textbox" name="username" value="{$user['username']}" /></td>
</tr>
<tr>
<td class="trow1" width="30%"><strong>{$lang->activation_code}</strong></td>
<td class="trow1"><input type="text" class="textbox" name="code" value="{$code}" /></td>
</tr>
</table>
<br />
<div align="center"><input type="hidden" name="action" value="resetpassword" /><input type="submit" class="button" name="regsubmit" value="{$lang->send_password}" /></div>
  </center>
</form>
</body>
</html>

Next we have, member_lostpw, replace all with:

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->lost_pw}</title>
{$headerinclude}
</head>
<body>
{$headersplash}
  <center>
<form action="member.php" method="post">
<table border="0" cellspacing="35%" cellpadding="10" width="35%" class="form_splash">
<tr>
<td class="thead" colspan="2"><strong>{$lang->lost_pw_form}</strong></td>
</tr>
<tr>
<td class="trow1" width="40%"><strong>{$lang->email_address}</strong></td>
<td class="trow1" width="60%"><input type="text" class="textbox" name="email" /></td>
</tr>
</table>
<br />
<div align="center"><input type="submit" class="button" value="{$lang->request_user_pass}" /></div>
<input type="hidden" name="action" value="do_lostpw" />
</form>
  </center>
</body>
</html>

Next up we have member_resendactivation, paste & replace: 

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->resend_activation}</title>
{$headerinclude}
</head>
<body>
{$headersplash}
  <center>
<form action="member.php" method="post">
<table border="0" cellspacing="35%" cellpadding="10" width="35%" class="form_splash">
<tr>
<td class="thead" colspan="2"><strong>{$lang->resend_activation}</strong></td>
</tr>
<tr>
<td class="trow1" width="40%"><strong>{$lang->email_address}</strong></td>
<td class="trow1" width="60%"><input type="text" class="textbox" name="email" /></td>
</tr>
</table>
<br />
<div align="center"><input type="submit" class="button" value="{$lang->request_activation}" /></div>
<input type="hidden" name="action" value="do_resendactivation" />
</form>
  </center>
</body>
</html>

And, that should be it! You're done! Happy Themeing! (This is just a simple version. The one in the demo is hardcoded into a different php page, with custom templates as well as changed lines in the following files:

  • member.php
  • global.php

Below is the original Member_login Template, in case something doesn't go right. (Since I only tested it on my one theme.)


<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->login}</title>
{$headerinclude}
</head>
<body>

<br />
{$inline_errors}
{$member_loggedin_notice}
<form action="member.php" method="post">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->username}</strong></td>
<td class="trow1"><input type="text" class="textbox" name="username" size="25" style="width: 200px;" value="{$username}" /></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->password}</strong><br /><span class="smalltext">{$lang->pw_note}</span></td>
<td class="trow2"><input type="password" class="textbox" name="password" size="25" style="width: 200px;" value="{$password}" /> (<a href="member.php?action=lostpw">{$lang->lostpw_note}</a>)</td>
</tr>
<tr>
<td class="trow1" colspan="2" align="center"><label title="{$lang->remember_me_desc}"><input type="checkbox" class="checkbox" name="remember" checked="checked" value="yes" /> {$lang->remember_me}</label></td>
</tr>
{$captcha}
</table>
<br />
<div align="center"><input type="submit" class="button" name="submit" value="{$lang->login}" /></div>
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$redirect_url}" />
</form>

</body>
</html>

meetdilip

2015-02-07, 01:55 AM
Thanks Smile

Icon

2015-02-24, 05:37 PM
I can tell you're probably from lf

UnfedZombie

2015-02-25, 10:18 AM
This was a bad tutorial nothing like this is on my result.

MatthewH

2015-02-26, 08:51 PM
(2015-02-25, 10:18 AM)UnfedZombie Wrote: [ -> ]This was a bad tutorial nothing like this is on my result.

Maybe your just a bad reader. Toungue

Josh H.

2015-03-01, 07:55 PM
(2015-02-25, 10:18 AM)UnfedZombie Wrote: [ -> ]This was a bad tutorial nothing like this is on my result.

Your theme might be non-standard code-wise. To get this result on your own, learn HTML and CSS - then you'll be able to do anything you want without even needing a tutorial.

http://www.htmldog.com/guides/html/beginner/ is an example. Codecademy also has an HTML/CSS/JS section if I remember correctly.

Lyklor

2015-03-03, 03:31 PM
Very sexy! thx bro

ThemeFreaknet

2015-03-03, 08:24 PM
Looks interesting. Too bad demo link isn't working at the time of my post. I get a 522 connection error.

julioms87

2015-03-07, 04:51 PM
didnt work for me.... sad =/

default theme here.

Fireworks

2015-06-25, 06:50 AM
For those of you wanting help on a theme, just let me know. I'm willing to help those who are willing to listen!

(2015-03-01, 07:55 PM)Josh H. Wrote: [ -> ]
(2015-02-25, 10:18 AM)UnfedZombie Wrote: [ -> ]This was a bad tutorial nothing like this is on my result.

Your theme might be non-standard code-wise. To get this result on your own, learn HTML and CSS - then you'll be able to do anything you want without even needing a tutorial.

http://www.htmldog.com/guides/html/beginner/ is an example. Codecademy also has an HTML/CSS/JS section if I remember correctly.

Josh H. is right, this is a non-standard theme, although you can get it from the myBB Mods site. (Located Here: http://community.mybb.com/mods.php?action=view&pid=137) All I've done was modify these theme. The point of this tutorial is to learn some of the basics and even some advanced styling methods, that you can then use towards anything you want to.


I've also got the demo back up and running too!
Pages: 1 2
MyBB Community Forums > Resources > Tutorials > How to make a Sexy Login Page