MyBB Community Forums

Hi,

In this post i will show you how to make Sliding Login Panel !

DEMO : http://www.wb-dev.co.cc

So lets start ..

Step 1:
Download the file: Click here and download it from the attachment and extract the slidepanel.zip file

Step 2:
Upload the folder "slidepanel" to your images folder so it must be images/slidepanel

Step 3:
Go to Admin CP -> Templates & Style -> Templates -> Header Templates -> header_welcomeblock_guest

Step 4:
Replace all the code in header_welcomeblock_guest with this:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

<link href="images/slidepanel/styles.css" rel="stylesheet" type="text/css" />

<script src="images/slidepanel/js/jquery.js" type="text/javascript"></script>
<script src="images/slidepanel/js/panelslide.js" type="text/javascript"></script>

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<div id="slide-panel"><!--SLIDE PANEL STARTS-->

<form action="member.php" method="post" class="form"><!--FORM STARTS-->
<center>
<p>Please Login</p>
<p><input type="text" class="textbox" name="username" size="25" maxlength="{$mybb->settings['maxnamelength']}" style="width: 200px;" value="{$username}" /></p>
<p><input type="password" class="textbox" name="password" size="25" style="width: 200px;" value="{$password}" /></p>
<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}" />
</p>
<p>Not a member? <a href="{$mybb->settings['bburl']}/member.php?action=register">Register</a> here | <a href="{$mybb->settings['bburl']}/member.php?action=lostpw">Lost Password?</a></p>
</center>
</form><!--FORM ENDS-->

</div><!--SLIDE PANEL ENDS-->

<p class="slide"><a href="#" class="btn-slide">Login / Register</a></p><!--LOGIN BUTTON TEXT-->

Done!

If you have problems please post it here !

This must be in Tutorials section, lol

In the demo the jquery is conflicting with mybb prototypes so some functions like

1) Category Collapse button
2) Editor Buttons

etc won't work, you have to add

jQuery.noConflict();

If you use NoConflict then you have to use "jQuery" instead of "$" to call the jQuery function.

Anyway, the thread is not eXisting

fixed

the site is off where i download the file?

Sorry, the host is down and we don't know when they will back.

Didn't work

No one helps?!