MyBB Community Forums

Demo: [link], Just click Log-in and watch the magic.

For this edit you will need to set a height to the #pannel for the use of this tutorial we will be using a height of "50px". You will also need to include jQuery which can be found here, Paste that in header include otherwize it will not work

So lets begin, Go to:
ACP» Themes » Your Theme » Global.css
Now find "#pannel" and add:

height:50px;
overflow:hidden;

Now click: Edit Stylesheet: Advanced Mode
Go to the very bottom and add:

.logintext {
height:50px;
width:100;
}
.loginform {
height:50px;
width:100;
}

That's all css done now for the html/java script.

Now go to:
ACP» Themes » Your Theme » Templates » Header Templates » header_welcomeblock_guest

Replace everything with:

<div class="logintext">
Please <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="return false;" id="slide-in-loginform">Log-in</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register">Register</a> to get full access to the forums.
</div>

<form action="member.php" class="loginform" method="post">
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$url}" />
<label>Username: </label>
<input type="text" name="username" value="" />
<label>Password:  </label>
<input type="password" style="left:-3px;" name="password" value="" />
</span>
<br/>
<input type="submit" class="loginsub" value="Login" tabindex="3" />
</form>

Finally for the jQuery!

Go to:
ACP» Themes » Your Theme » Templates » Ungrouped Templates » headerinclude

And at the very bottom paist the following code.

<script type="text/javascript">
    jQuery(function() {    
        jQuery("#slide-in-loginform").click(function () {    
            jQuery('.logintext').animate({
                marginTop: '-50px'
            }, "slow").css('margin-top', '-50px');
        });
    });
</script>

All done! Now to test it out.

Thank you for reading.

Amazing tut bro, thanks for sharing it with us less talented users :_

(2010-08-06, 02:06 AM)Mark.M Wrote: [ -> ]Amazing tut bro, thanks for sharing it with us less talented users :_

Haha, Thank you.

Sweet tutorial man. This is what I have been needing for my login .

(2010-08-06, 02:45 AM)NBKTwitch Wrote: [ -> ]Sweet tutorial man. This is what I have been needing for my login .

Thank you, I needed it too as my login box was too big so i had no register button, So i built this little script and all is good

I'm interesting with Remember Me function.

(2010-08-06, 04:49 AM)atomjani Wrote: [ -> ]I'm interesting with Remember Me function.

Im not too sure how to add that.

Very cool! Thanks for sharing...

Ive tried this , did everything the tutorial to me to do , but it didnt seem to work

(2010-08-06, 11:51 PM)Janota Wrote: [ -> ]Ive tried this , did everything the tutorial to me to do , but it didnt seem to work

Do you have a link?