Not a member? Register | Lost your password?
Close Panel
 
 

12

Aug

2008

Add a show/hide login panel to your Wordpress theme using Mootools

By jeeremie. Posted in AJAX / Javascript, Wordpress

FAQ: Panel doens’t slide into view. What’s wrong?
Mootools generally conflicts with other AJAX frameworks (jQuery, Prototype…) and the sliding panel will not work! Most probably this is due to one of the plugin you installed that make use of jQuery or another AJAX framework. Disable your plugins one by one to identify which plugin conflicts with this sliding panel.

This is the second part of my tutorial “Show/hide a nice Login Panel using Mootools 1.2″. In this tutorial, we will now see how to add the show/hide login panel into your Wordpress theme, pretty much like what I did on top of this page (click “login” on the upper-right corner to open the login panel). Before reading any further, read my previous post and come back here when you are done.

The end result:

Here’s what we are going to achieve today:
Show/hide login panel in Wordpress using Mootools 1.2

Step 1: The scripts and images

If you haven’t done it yet, download the source code on my previous tutorial:
Download (38.1 KiB, 22,473 hits)

Copy the “js” folder (all of it!) and paste it in your theme folder (for the sake of this tutorial, we will use the “defaut” Wordpress theme). The path to your “js” folder should be something like http://yoursite.com/wp-content/themes/default/js/.

Copy all the images and save them in the wp-content/themes/default/images/.

Step 2: The Javascript

Open header.php and add the code below in the <head> section:

?View Code HTML4STRICT
<head>
...
<!-- Mootools CORE -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-core-yc.js" charset="utf-8"></script>
<!-- Mootools MORE -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-more.js" charset="utf-8"></script>
<?php wp_head(); ?>
</head>
Step 3: The HTML/PHP

Now add this code right after the <body> tag (click on [+] to expand the code):

?View Code HTML4STRICT
<body>
<!-- Login -->
<div id="login">
	<div class="loginContent">
		<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
			<label for="log"><b>Username: </b></label>
			<input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
			<label for="pwd"><b>Password:</b></label>
			<input class="field" type="password" name="pwd" id="pwd" size="23" />
			<input type="submit" name="submit" value="" class="button_login" />
			<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
		</form>
		<div class="left">
        <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
		<div class="right">Not a member? <a href="<?php bloginfo('url') ?>/wp-register.php">Register</a> | <a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Lost your password?</a></div>
	</div>
	<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div> <!-- /login -->
 
<!-- Start top Navigation -->
<div id="top">
<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) {  ?>
<!-- If users logged in, display the dashboard navigation: -->
<!-- Admin navigation -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>
 
	<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write article</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Manage Posts</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Manage Pages</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Plugins</a></li>
	<?php endif // $user_level >= 1 ?>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">My Profile</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
	</ul> <!-- / Admin Navigation -->
 
<?php } elseif (get_option('users_can_register')) { ?>
<!--Toggle effect (show/hide Login form) -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fx.slide.js"></script>
 
	<!-- ... else, display user navigation below: -->
	<!-- login -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li>Hello Guest!</li>
		<li>|</li>
		<li><a id="toggleLogin" href="#">Log In</a></li>
	</ul> <!-- / login -->
<?php } ?>
</div> <!-- / top -->

I should explain a little bit the code before we go on:

  • If you are logged in as admin, you will see the full navigation. (This is done with the code <?php if ( $user_level >= 1 ) : ?> ... <?php endif ?>. Anything you put within this code will only be seen by the admins).
  • If you registered to the site as a subscriber, you will only see the links “Dashboard”, “My Profile” and “log Out”.
  • If you are not logged in (which will definitely happen if you are a first time visitor), you will only see “Hello Guest!” and “Log In”. (Register to this site on top of this page if you want to see how it works).

If you wish to add more links to the top navigation, log in Wordpress and over a link with your mouse (for example: Settings). Look at the url in the status bar (e.g. http://yoursite.com/wp-admin/options-general.php). Copy only /wp-admin/options-general.php and paste it in the code, like this:

?View Code HTML4STRICT
<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
<li>|</li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">Settings</a></li>
...
<?php endif // $user_level >= 1 ?>

You can add as many links as you want. The only limit is the width of your site or your screen resolution.

Step 4: The CSS

Open style.css in a text editor and paste at the bottom the code below (click on [+] to expand the code):

?View Code CSS
/* Login Panel */
#top {
  	background: url(images/login_top.jpg) repeat-x 0 0;
	height: 38px;
	position: relative;
}
 
#top ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 38px;
	width: auto;
  	font-weight: bold;
	line-height: 38px;
	margin: 0;
	right: 150px;
  	color: white;
	text-align: center;
  	background: url(images/login_r.jpg) no-repeat right 0;
	padding-right: 45px;
}
 
#top ul.login li.left {
  	background: url(images/login_l.jpg) no-repeat left 0;
  	height: 38px;
	width: 45px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
#top ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
	color: #33CCCC;
}
 
#top ul.login li a:hover {
	color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#login {
	width: 100%;
	color: white;
	background: #1E1E1E;
	overflow: hidden;
	position: relative;
	z-index: 3;
	height: 0;
	font-style: 1em;
}
 
#login a {
	text-decoration: none;
	color: #33CCCC;
}
 
#login a:hover {
	color: white;
}
 
#login .loginContent {
	width: 550px;
	height: 80px;
	margin: 0 auto;
	padding-top: 25px;
	text-align: left;
}
 
#login .loginContent .left {
	width: 120px;
	float: left;
	padding-left: 65px;
	font-size: 0.95em;
}
 
#login .loginContent .right {
	width: 290px;
	float: right;
	text-align: right;
	padding-right: 65px;
	font-size: 0.95em;
}
 
#login .loginContent form {
	margin: 0 0 10px 0;
	height: 26px;
}
 
#login .loginContent input.field {
	border: 1px #1A1A1A solid;
	background: #464646;
	margin-right: 5px;
	margin-top: 4px;
	color: white;
	height: 16px;
}
 
#login .loginContent input:focus.field {
	background: #545454;
}
 
#login .loginContent input.rememberme {
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
 
#login .loginContent input.button_login {
	width: 47px;
	height: 20px;
	cursor: pointer;
	border: none;
	background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
#login .loginClose {
	display: block;
	position: absolute;
	right: 15px;
	top: 10px;
	width: 70px;
	font-size: 0.9em;
	text-align: left;
}
 
#login .loginClose a {
	display: block;
	width: 100%;
	height: 20px;
	background: url(images/button_close.jpg) no-repeat right 0;
	padding-right: 10px;
	border: none;
	color: white;
}
 
#login .loginClose a:hover {
	background: url(images/button_close.jpg) no-repeat right -20px;
}
Step 5: Wordpress Settings

You will need to follow one more step before you are done. Log in to Wordpress, select “settings”, then scroll down to “membership” and select “Anyone can register”. Click save and you should be done. Open your site in your browser and you should see the top navigation. Click on “login” to slide the panel into view.

Done!

Troubleshooting

Not working yet? There could be a couple of things that would stop the script from executing. Here’s a few questions that might help you debug it:

  • Have you enabled Javascript in your browser?
  • Do you use another Ajax framework on your site (Jquery for example)?
  • Is Mootools compatible with your plugins?
  • Is the path to the javascript correct? (E.g. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-core-yc.js" charset="utf-8"></script>)
  • Do you use a modern browser such as Firefox 3, Opera or Safari? If not, maybe it is time to upgrade! This script works fine in Firefox 2+, IE6+, Safari, Opera, Netscape. However, I didn’t test it on a Mac or Linux.
Update

In answer to Thomas’ comment, I explain below how to add avatar next to “My Profile” in the navigation after user logged in. Here’s how to do:

Replace the code below in our script…

?View Code HTML4STRICT
<li>|</li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">My Profile</a></li>

… by:

?View Code HTML4STRICT
<li>|</li>
<li><a style="padding-left: 40px;" href="<?php bloginfo('url') ?>/wp-admin/profile.php">
  <?php global $user_email, $userdata;
    get_currentuserinfo();
    if(function_exists('get_avatar')) {
      echo '<span class="NavAvatar">' . get_avatar($user_email, '16').'</span>'; //display user's Avatar
      echo($userdata->user_login); //Display user's name
    }
  ?>
</a></li>

Add this code into style.css:

?View Code CSS
span.NavAvatar {
	position: absolute;
	top: 3px;
	left: 10px;
	padding: 1px;
	border: 1px #000 solid; /*Change border color*/
}

Last, add “position:relative;” to “#top ul.login li”:

?View Code CSS
#top ul.login li {
 	position: relative;
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}

Here’s a screenshot of an avatar display on this site after you logged in:

Thanks Thomas for the Avatar’s idea. That was a good one!

Technorati Tags: , , , , , , , , ,

Popularity: 23% [?]

 
« Previous Post
Next Post »

Related posts

| Subscribe to Feed | Email the author

100 Responses to “Add a show/hide login panel to your Wordpress theme using Mootools”

  1. 1
    » Add a show/hide login panel to your Wordpress theme using Mootools Says:
    August 12th, 2008 at 12:18 pm

    [...] can read the rest of this blog post by going to the original source, here [...]

  2. 2
    Wifsimster Says:
    August 12th, 2008 at 2:06 pm

    Merci pour cet article, ça permet d’étoffer la barre de login un peu plus ;)

  3. 3
    Thomas Clausen Says:
    August 12th, 2008 at 7:09 pm

    It works like a charm, and it looks damn cool. The only problem is the user levels. You have to be user level 8 to use plugins and user level 5 to manage pages: http://codex.wordpress.org/User_Levels

    Maybe, to make it even cooler, you could put a gravatar in there, if a user is logged in, and has a gravatar of cause…

  4. 4
    shakaran Says:
    August 13th, 2008 at 6:34 pm

    A plugin for Wordpress about it would be pretty good.

  5. 5
    sandlog Says:
    August 14th, 2008 at 7:51 pm

    great piece of code.
    i wanted to know how i could add a piece that would check if the user is logged in or not and if they are it would display a link, if not it wouldn’t show up.

    let me know if you could show me how.

    this is my code
    <a href=”">rss feed</a> | | <a href=”/wp-admin/options-general.php”>Dashboard</a>

    But i only want to show the dashboard link if the user is logged in.

    thanks!

  6. 6
    Jeeremie Says:
    August 15th, 2008 at 9:05 am

    It is what the code does. Look, the code below will display links when user is not logged in:

    ?View Code HTML4STRICT
    <?php } elseif (get_option('users_can_register')) { ?>
<!--Toggle effect (show/hide Login form) -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fx.slide.js"></script>
 
	<!-- ... else, display user navigation below: -->
	<!-- login -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li>Hello Guest!</li>
		<li>|</li>
		<li><a id="toggleLogin" href="#" rel="nofollow">Log In</a></li>
	</ul> <!-- / login -->
<?php } ?>

    … And the following code will display links when user is logged in:

    ?View Code HTML4STRICT
    <?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) {  ?>
<!-- If users logged in, display the dashboard navigation: -->
<!-- Admin navigation -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/">Dashboard</a></li>
 
	<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
		<li>|</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/post-new.php">Write article</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/edit.php">Manage Posts</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/edit-pages.php">Manage Pages</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/plugins.php">Plugins</a></li>
	<?php endif // $user_level >= 1 ?>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/profile.php">My Profile</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
	</ul> <!-- / Admin Navigation -->

    If you only want to show the links “RSS feed” and “Dashboard”, then replace the code above by this one:

    ?View Code HTML4STRICT
    <?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) {  ?>
<!-- If users logged in, display the dashboard navigation: -->
<!-- Admin navigation -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/">Dashboard</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ? rel="nofollow">/index.php/feed">RSS Feed</a></li>
	</ul> <!-- / Admin Navigation -->

    Do you understand now?

    If you still don’t get it, read this article from Small Potatoe.

  7. 7
    sandlog Says:
    August 15th, 2008 at 6:00 pm

    ok that makes sense.
    i can use that part of the code.

    as much as i like this ajax functionality, i’m using jQuery and not mootools for the rest of the site.

    so it creates a conflict.

    thanks for your help.

  8. 8
    Thomas Clausen Says:
    August 17th, 2008 at 3:18 pm

    I figured out how to solve the user rights in comment 2 with this code (which should replace step 3):

    ?View Code HTML4STRICT
    <body>
<!-- Login -->
<div id="login">
    <div class="loginContent">
        <form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
            <label for="log"><b>Username: </b></label>
            <input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
            <label for="pwd"><b>Password:</b></label>
            <input class="field" type="password" name="pwd" id="pwd" size="23" />
            <input type="submit" name="submit" value="" class="button_login" />
            <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
        </form>
        <div class="left">
        <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
        <div class="right">Not a member? <a href="<?php bloginfo('url') ? rel="nofollow">/wp-register.php">Register</a> | <a href="<?php bloginfo('url') ? rel="nofollow">/wp-login.php?action=lostpassword">Lost your password?</a></div>
    </div>
    <div class="loginClose"><a href="#" id="closeLogin" rel="nofollow">Close Panel</a></div>
</div> <!-- /login -->
 
<!-- Start top Navigation -->
<div id="top">
<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) {  ?>
<!-- If users logged in, display the dashboard navigation: -->
<!-- Admin navigation -->
    <ul class="login">
        <li class="left">&nbsp;</li>
        <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/">Dashboard</a></li>
 
    <?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
        <li>|</li>
        <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/post-new.php">Write article</a></li>
 
        <li>|</li>
        <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/edit.php">Manage Posts</a></li>
    <?php endif // $user_level >= 1 ?>
    <?php if /* if is admin, display menu below */ ( $user_level >= 5 ) : ?>
        <li>|</li>
        <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/edit-pages.php">Manage Pages</a></li>
    <?php endif // $user_level >= 5 ?> 
    <?php if /* if is admin, display menu below */ ( $user_level >= 8 ) : ?>
        <li>|</li>
        <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/plugins.php">Plugins</a></li>
     <?php endif // $user_level >= 8 ?>
        <li>|</li>
        <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/profile.php">My Profile</a></li>
 
        <li>|</li>
        <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
    </ul> <!-- / Admin Navigation -->
 
<?php } elseif (get_option('users_can_register')) { ?>
<!--Toggle effect (show/hide Login form) -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fx.slide.js"></script>
 
    <!-- ... else, display user navigation below: -->
    <!-- login -->
    <ul class="login">
        <li class="left">&nbsp;</li>
        <li>Hello Guest!</li>
        <li>|</li>
        <li><a id="toggleLogin" href="#" rel="nofollow">Log In</a></li>
    </ul> <!-- / login -->
<?php } ?>
</div> <!-- / top -->

    But I would still love to see the Gravatar bit I mentioned in comment 2 ;-)

  9. 9
    Jeeremie Says:
    August 17th, 2008 at 4:44 pm

    I found how to add avatar to this navigation:

    ?View Code HTML4STRICT
    <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/profile.php">
My Profile
<?php global $user_email;
 get_currentuserinfo();
 if(function_exists('get_avatar')) {
   echo get_avatar($user_email, '16');
 }
?>
</a></li>
  10. 10
    Thomas Clausen Says:
    August 17th, 2008 at 6:17 pm

    Great stuff Jeeremie

    I kind of got it working, the code you submitted was missing something. I removed the rel="nofollow" and then it worked.

    The only problem is, that the gravatar is using the style from my existing stylesheet. This makes the gravatar float in the next line, kind of in the middle of everything.

  11. 11
    Thomas Clausen Says:
    August 20th, 2008 at 7:47 pm

    Thanks a bunch for the update on making the gravatar look great.

    I’ve implemented it now, and I like :-) had to make some small alterations to the css to fit my theme. But I’m happy with the result. Looking forward to more great how-toos

    Thanks again.
    Thomas

  12. 12
    Jb Says:
    September 3rd, 2008 at 7:19 pm

    I have tested your tutorial but I don’t succeed. I use the great wp_yoghourt theme. Finally i have this result : http://img157.imageshack.us/my.php?image=bderk1.jpg

  13. 13
    Jb Says:
    September 3rd, 2008 at 7:58 pm

    Faudrait que j’apprenne à lire, je n’avais point vu que tu étais Français, au temps pour moi.
    Donc j’ai suivi ton tutoriel avec le thème yoghourt que je suis en train de massacrer en local (tu ne m’en voudras pas), et cela ne marche pas. J’ai du faire une erreur quelque part, mais je ne vois pas où. Si tu pouvais m’aiguiller, cela me serait très utile.
    Merci d’avance ;)

  14. 14
    Jeeremie Says:
    September 3rd, 2008 at 9:39 pm

    JB,

    Difficile de trouver le problème sans voir le code. Essaies de mettre ton site sur un serveur pour que je puisse jeter un coup d’oeil au source code. (PS. J’ai travaille sur beaucoup de projet ces derniers temps. Je ne peux pas te promettre que je pourrais y jeter un coup d’oeil.)

  15. 15
    shubelal Says:
    September 5th, 2008 at 11:50 am

    great work thank you

  16. 16
    shubelal Says:
    September 5th, 2008 at 11:51 am

    realy it is good work.may be it more helpful. but i have little problem in implement. may it will be solved.

    thanks

  17. 17
    Gorenje Says:
    September 7th, 2008 at 3:12 pm

    Awesome show and hide menu very elegant and smooth. But I have a problem. It seems that when you upgrade to Wordpress 2.6.1 the show/hide login panel won’t work anymore. It means that when you’re logged in you can see the panel, but when you are logged out you can’t see the panel and there is no button for login – Is this problem possible to solve?

    Thanks in advance and thanks very much for the tutorial.

  18. 18
    Gorenje Says:
    September 7th, 2008 at 3:31 pm

    Attention: My previous post

    I noticed that I have forgotten to mark “Anyone can register” in my sittings. I am very sorry for making confusion about my question.

    Thanks for understanding and thanks for an awesome work.

  19. 19
    Jeeremie Says:
    September 7th, 2008 at 4:16 pm

    You are welcome. I guessed you forgot to set “Anyone can Register” in your settings.

  20. 20
    Gorenje Says:
    September 8th, 2008 at 3:59 pm

    Yeah I did, my bad sorry about that. And thank you for your help :)

  21. 21
    Nick Says:
    September 9th, 2008 at 11:33 am

    Nice little bit of code!

    Might come in handy for my current side project http://www.flamingdesks.com.

    Many thanks, great post!

    Nick

  22. 22
    Ahmad Says:
    September 12th, 2008 at 2:11 pm

    hallo, thanks fot this Tool.
    but i have not a Blog, how i can add the Tool after login to my site?
    best regards

  23. 23
    Jeeremie Says:
    September 12th, 2008 at 3:22 pm

    @Ahmad: Is your site run by a CMS. Do you have a login form already on your site?

  24. 24
    Ahmad Says:
    September 12th, 2008 at 3:44 pm

    Hallo Jeeremie,
    My site is not run by a Cms, but i have already login panel.
    thanks

  25. 25
    Jeeremie Says:
    September 12th, 2008 at 3:51 pm

    Then, you have to replace my form (<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">...</form>) by yours, style it as you wish and it should work.

  26. 26
    Ahmad Says:
    September 12th, 2008 at 3:54 pm

    ok Thanks

  27. 27
    CMS Critic Says:
    September 14th, 2008 at 3:03 pm

    Nice post. Thank you.

  28. 28
    toshas Says:
    September 25th, 2008 at 9:30 pm

    hi there cumps form portugal! first of all tks for this great script. i’m having some troubles make it work on wordpress… i have follow all steps (checked and re-checked) inclusive i’m applying this on the default theme just for test, and i can see the admin menu when logged in, and the “welcome guest” logged out, but the slide dont work to me! can u help? i use firebug and its giving an error when debbuging on mootools-1.2-more.js something like “this.addEvent is not a function”… i already try downloading a new .js of the mootools site but gives me the same error… i dont know if is of any importance! any idea?
    tks in advance :)

  29. 29
    Dan Says:
    October 4th, 2008 at 2:40 am

    Hello there,

    I was wondering, what should I do if i have another ajax framework on my site? id quite like to stick to it as a lot of my site elements require it. is there any way to modify your code to use a different framework?

    Many thanks

  30. 30
    Jeeremie Says:
    October 4th, 2008 at 9:05 am

    The toggle effect is common to most of the AJAX frameworks but the code is sligthly different for all of them. You will have to rewrite the javascript code entirely.

  31. 31
    Daniel Doyle Says:
    October 4th, 2008 at 11:35 pm

    I’ve got help from a friend and re-written it using the jquery framework:

    $(document).ready(function(){
    $(”#login”).css({ “height”:”auto” }).hide();
    $(”#toggleLogin”).click(function(){
    $(”#login”).slideToggle(”slow”);
    });
    });

    yet it still doesnt work :( does anyone have any ideas?

    thanks

  32. 32
    Web-kreation - Sliding login/Signup panel using MooSlide (Mootools 1.2) Says:
    October 9th, 2008 at 2:06 pm

    [...] my latest articles Show/hide a nice Login Panel using Mootools 1.2 and Add a show/hide login panel to your Wordpress theme using Mootools, I explained how to add a nice sliding login form to your site (using Mootools [...]

  33. 33
    Firefly Says:
    October 17th, 2008 at 4:13 am

    Sorry I got to write second time, but this is simply unreal. I know most WP blogs/plugins/tutorials, and this is first time on web-kreation.com.

    Just wow, thank you so much.

    Firefly :-)

  34. 34
    sumit Says:
    October 21st, 2008 at 7:56 pm

    i am not getting proper result please help ! width is small and password input is shift to down in arranging help me
    i will be thankful to you very much

  35. 35
    jc min Says:
    November 7th, 2008 at 6:51 am

    Is there anyway we can do this with mootools 1.1 not mootools 1.2?

    currently i am using smoothgallery 1.1 and your login script on wordpress (got it working using both mootools 1.1 and mootools 1.2 somehow)..

    the problem is smoothgallery breaks when i log in but works fine when i don’t log in.

    i narrowed it down to mootools 1.1 problem..

    is there anyway to convert this code to use 1.1 mootools?:P

  36. 36
    Jeeremie Says:
    November 7th, 2008 at 9:56 am

    You will need to rewrite the code and get fx.slide.js for mootools 1.1.

  37. 37
    jc min Says:
    November 8th, 2008 at 7:32 am

    well i knew that much hehe, not really good with coding ><

    thx anywayz!

  38. 38
    Eric Says:
    December 2nd, 2008 at 3:12 pm

    First off i would like to start by saying well done. Not only is this a great coding but your tutorial is top notch.

    Im having one lil problem though. I put this code on my site at http://vasthtml.com and when you go to the support page there is a login form also for the support forums. I have noticed in Firefox, Chrome, and Safari when someone tries to use the forum login form it will not work becouse it keeps trying to just up to the top login form on this script. any ideas on how to stop this.

  39. 39
    Jeeremie Says:
    December 2nd, 2008 at 4:03 pm

    My guess is because you use twice the same login form on the same page. Since this form is already on top, maybe you could just add a link to invite your users to login. This link would toggle the login form on top. Have a look at the code below and you will understand what I mean:

    index.html:

    ?View Code HTML4STRICT
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
  	<title>Show/hide Login and Signup Panel using Mootools 1.2</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
	<!-- The main style sheet -->
  	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 
	<!-- START Fx.Slide -->
	<!-- The CSS -->
  	<link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
    <!-- Mootools - the core -->
	<script type="text/javascript" src="js/mootools-1.2-core-yc.js"></script>
    <!--Toggle effect (show/hide login form) -->
	<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
	<script type="text/javascript" src="js/fx.slide.js"></script>
	<!-- END Fx.Slide -->
 
</head>
 
<body>
	<!-- Login -->
	<div id="login">
		<div class="loginContent">
			<form action="#" method="post">
				<label for="log"><b>Username: </b></label>
				<input class="field" type="text" name="log" id="log" value="" size="23" />
				<label for="pwd"><b>Password:</b></label>
				<input class="field" type="password" name="pwd" id="pwd" size="23" />
				<input type="submit" name="submit" value="" class="button_login" />
				<input type="hidden" name="redirect_to" value=""/>
			</form>
			<div class="left">
            	<label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
			<div class="right">Not a member? <a href="#" rel="nofollow">Register</a> | <a href="#" rel="nofollow">Lost your password?</a></div>
		</div>
		<div class="loginClose"><a href="#" id="closeLogin" rel="nofollow">Close Panel</a></div>
	</div> <!-- /login -->
 
    <div id="container">
		<div id="top">
		<!-- login -->
			<ul class="login">
		    	<li class="left">&nbsp;</li>
		        <li>Hello Guest!</li>
				<li>|</li>
				<li><a id="toggleLogin" href="#" rel="nofollow">Log In</a></li>
			</ul> <!-- / login -->
		</div> <!-- / top -->
 
        <div class="clearfix"></div>
 
 
		<div id="content">
            <a id="toggle" href="#login" rel="nofollow">Log In</a> | <a href='http://vasthtml.com/wp-register.php?redirect_to=' rel="nofollow">register</a>
		</div><!-- / content -->
 
 
        <div class="clearfix"></div>
	</div><!-- / container -->
 
</body>
 
</html>

    fx.slide.js:

    ?View Code JAVASCRIPT
    /* FX.Slide */
/* toggle window for the login section */
/* Works with mootools-release-1.2 */
/* more info at http://demos.mootools.net/Fx.Slide */
 
window.addEvent('domready', function(){
 
	$('login').setStyle('display','block');   
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
 
    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
 
    $('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
 
    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut();
		e.stop();
	});
 
});

    I hope that works for you.

  40. 40
    Eric Says:
    December 2nd, 2008 at 6:20 pm

    Ok here is the section for the login on the forum. I got everything replaced ok while ago but still couldnt get it to slide the menu down.

    ?View Code PHP
    function login_form(){
                       global $user_ID;
                       $user = get_userdata($user_ID);
 
                       if(!is_user_logged_in()){
                               return "<form action='".get_bloginfo('url')."/wp-login.php' method='post'>
                                       <p>
                                       <label for='log'><input type='text' name='log' id='log' value='".wp_specialchars(stripslashes($user_login), 1)."' size='12' /> ".__("Username", "wpforum")."</label><br />
                                       <label for='pwd'><input type='password' name='pwd' id='pwd' size='12' /> ".__("Password", "wpforum")."</label><br />
                                       <input type='submit' name='submit' value='Send' class='button' />
                                       <label for='rememberme'><input name='rememberme' id='rememberme' type='checkbox' checked='checked' value='forever' /> ".__("Remember me", "wpforum")."</label><br />
                                       </p>
                                       <input type='hidden' name='redirect_to' value='".$_SERVER['REQUEST_URI']."'/>
                               </form>";
                       }
                       else
                               return "<p>You are logged in as $user->user_login</p>";
               }
  41. 41
    Jeeremie Says:
    December 2nd, 2008 at 6:48 pm

    Have you tried this:

    ?View Code PHP
    function login_form(){
 global $user_ID;
 $user = get_userdata($user_ID);
 
 if(!is_user_logged_in()){
  return '<a id="toggle" href="#login" rel="nofollow">Log In</a> | <a href="http://vasthtml.com/wp-register.php?redirect_to=" rel="nofollow">register</a>';
  } else return "<p>You are logged in as $user->user_login</p>";
}

    and add the code below in fx.slide.js as shown in my previous comment:

    ?View Code JAVASCRIPT
    $('toggle').addEvent('click', function(e){
 e = new Event(e);
 mySlide.toggle();
 e.stop();
});
  42. 42
    Eric Says:
    December 2nd, 2008 at 10:27 pm

    Yea i just put everything up like you said and its still not working, i left everything installed if you want to go look at it.

  43. 43
    Jeeremie Says:
    December 2nd, 2008 at 11:11 pm

    Why did you write “#login” ?

    ?View Code HTML4STRICT
    <a id="toggle" href="#login" rel="nofollow">Log In</a>

    “#” is enough. However, it should not be a problem.

    The problem is actually located in fx.slide.js. Here’s how it should be:

    ?View Code JAVASCRIPT
    /* FX.Slide */
/* toggle window for the login section */
/* Works with mootools-release-1.2 */
/* more info at http://demos.mootools.net/Fx.Slide */
 
window.addEvent('domready', function(){
 
	$('login').setStyle('display','block');   
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
 
    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
 
    $('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
 
    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut();
		e.stop();
	});
 
});

    … and you wrote:

    ?View Code JAVASCRIPT
    /* FX.Slide */
/* toggle window for the login section */
/* Works with mootools-release-1.2 */
/* more info at http://demos.mootools.net/Fx.Slide */
 
window.addEvent('domready', function(){
 
	$('login').setStyle('height','auto');
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state  
 
    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
 
    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut();
		e.stop();
	});
 
});
 
$('toggle').addEvent('click', function(e){
 e = new Event(e);
 mySlide.toggle();
 e.stop();
});

    Do you see your mistake now?

    Update fx.slide.js and it should work now.

  44. 44
    Eric Says:
    December 2nd, 2008 at 11:44 pm

    Yes that did get it to work. However i did have to change the ‘display’,'block’ tags back to ‘height’,'auto’ to get it to work. Im not sure if this will cause a problem or not by changing it but it is working now. Also getting script errors by doing this but i dont think there much concern. Thanks a ton for the help.

  45. 45
    Jeeremie Says:
    December 3rd, 2008 at 9:13 am

    :)

  46. 46
    charlie Says:
    December 4th, 2008 at 10:38 am

    Hi there… wow, nice stuff man. I want to do something like this but not in wordpress or any cms, only on a web site, and, if posible, encrypted, but not necessary.
    Could you help me? I’m not very good with all this stuff for now, I mean, PHP and Ajax.
    Anyway, GREAT man!

  47. 47
    Jeeremie Says:
    December 8th, 2008 at 12:20 pm

    Without a CMS there will be no login form so I don’t really see how you are going to use this toggle panel. If you need to implement a login system into your site, maybe you should read PHP components: login system to get started.

  48. 48
    MGTGamer Says:
    December 12th, 2008 at 2:54 am

    hey thanks for the code jeeremie!
    i got it working before but the text was too big, so I was looking through the CSS file, but didn’t edit anything – but now when I refresh the page the whole thing is missing :(

    if you could please help me out, i’ve “re-done” the tutorial 3 times now, but the bar at top doesn’t appear anymore.

    I put all the images, I put the JS folder (there’s only 3 files in this folder, is that right? because theres a “fx.slide.css” outside the JS folder – but I didn’t touch that) but still no luck

  49. 49
    Chronix Says:
    December 12th, 2008 at 9:24 am

    thanks jeeremie! congrats on a great ‘hack’
    just wondering if we can we make this overlap the website (blog) header?

    thanks much appreciate

  50. 50
    Jeeremie Says:
    December 12th, 2008 at 1:21 pm

    You can’t use jQuery and Mootools on the same page (view source code). I have said it a few times already on this site. You can only use one AJAX library at a time.

  51. 51
    MGTGamer Says:
    December 12th, 2008 at 1:24 pm

    Hey
    I didn’t use any jQuery, haven’t even heard about it, till you mentioned :(

    I followed your tut as above this page now I got the images to show up playing around with but now when I press “log-in” the slide doesn’t occur :S

    any help?
    thansk

  52. 52
    Jeeremie Says:
    December 12th, 2008 at 1:37 pm

    If you check your source code in your browser you will see there’s jQuery (in the HEAD section) which is another AJAX library. Maybe you didn’t install it directly but it can be a plugin you installed which needs jQuery to run. Uninstall all your plugins and try my code. If it is still not working then it might be another problem.

  53. 53
    Jeeremie Says:
    December 12th, 2008 at 2:02 pm

    @Chonix: Yes, read this »

  54. 54
    MGTGamer Says:
    December 12th, 2008 at 10:49 pm

    Ohhh I see, looking through the source code and researching a bit <- it’s included in the WP-Include, and I doubt that’s a plugin but more a feature of the new WordpPress 2.7 :)

    I’ve read the comments, could I “convert” this wonderful, godsent script to Jquery instead?

    Thank Jeeremie,

  55. 55
    MGTGamer Says:
    December 13th, 2008 at 12:10 am

    Jeeremie, I’ve disabled all my plugins, but still won’t work.
    any updates on this?

  56. 56
    Jeeremie Says:
    December 13th, 2008 at 1:57 pm

    @MGTGamer: you should have a look at this video »

    Your server seems to be down. I can’t have a look at your site.

  57. 57
    Richard Says:
    December 17th, 2008 at 10:27 pm

    mooTools and jQuery can be used together easily. jQuery can run in noconflict mode. In noconflict mode, all insances of ‘$’ are replace with ‘jQuery’. It only takes one line to turn on noconflict.

    jQuery.noConflict();

    Then make jQuery calls knowing that mooTools won’t get in the way.

    jQuery.(this).attr(“src”);

  58. 58
    Jeeremie Says:
    December 17th, 2008 at 11:32 pm

    Thanks Richard. That is something I read a while ago but actually never tried it. Here’s the jQuery documentation page: Using jQuery with Other Libraries.

  59. 59
    JSB Web Design Says:
    January 1st, 2009 at 2:19 pm

    Wow, really cool. Now if this could be in jQuery, especially considering the tie in with Wordpress, that would be very cool.

  60. 60
    mike Says:
    January 4th, 2009 at 3:31 am

    Hello,

    First let me say thanks for sharing such a cool wordpress hack. This is the perfect solution to community and multiple user sites. I cant wait to start to customize this around my website.

    Before I can do that I have to get this working. I followed the tutorial to a tee so I think all of the code is correct. There are two known issues right now.

    1. When logged into the admin and I click logout it says “You are attempting to log out of Aquaculture Talk” with a link below that. The issue is it wont let you log out

    2. When not logged in and when you click on log in the dropdown doesnt happen.

    I removed all plugins so that is probably not the issue. Any help here would be greatly appreciated.

    Thanks.

  61. 61
    mike Says:
    January 4th, 2009 at 3:36 am

    I noticed it also destyled my page. The orange should be rounded corners.

  62. 62
    mike Says:
    January 4th, 2009 at 3:42 am

    One more thing. The destyling appears to only be with mozilla.

    Hope you can help me to get this running.

  63. 63
    mike Says:
    January 4th, 2009 at 6:51 am

    I thought that running the multi level navigation on the site was causing the problems. I deactivated the plugin and even removed all of the java files from my server.

    Somehow the navigations still works but the dropdown login is still not good.

    This is a link to the navigation plugin http://pixopoint.com/multi-level-navigation/

    is this causing my issues?

  64. 64
    Mandeep Says:
    January 19th, 2009 at 5:11 am

    Ok have a problem here…

    Did everything as you said… all the steps I know I am doing right… when I open the site.. .everything seems to load fine… but then… the thing wont slide down…

    I have the any user can register turned on as well… but still it wont slide down… double checked all the links and all of them are right… I am copy/pasting the code.. so I have low risk of running in any errors in code perspective… since u already have a working one here… any ideas what is going on?

    All help will be appreciated thanx.

  65. 65
    vrs Says:
    January 20th, 2009 at 2:31 pm

    hi thr..
    i m using mimbo pro theme for my wordpress site..
    i already hv a js folder under theme…
    also i tried to do as u said bt no success ..pls help me out..

  66. 66
    Nerdious! Says:
    January 25th, 2009 at 5:09 am

    In step three in order to make the logout feature work with Wordpress 2.7 you need to replace the following code in step 3:

    ?View Code PHP
     (((<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li></ul> <!-- / Admin Navigation -->)))

    by

    ?View Code PHP
    (((((<?php echo wp_logout_url(); ?><?php echo '&redirect_to='.$_SERVER['REQUEST_URI']; ?>)))))

    Press Ctrl + F in your browser to bring up the search feature. Enter the previous code to highlight what needs to be replaced, and replace the previous code with the following:

  67. 67
    betty Says:
    January 25th, 2009 at 7:17 pm

    great work thank you!

  68. 68
    YoU Says:
    February 21st, 2009 at 10:15 am

    Cool tutorial but I found the user level doesn’t really work for 2.7. I log in as Admin but am only able to see the dashboard and profile link. What should I do with the user level of “>=1″?

  69. 69
    YoU Says:
    February 21st, 2009 at 10:24 am

    Here’s another problem with 2.7. You won’t be able to find the “Log In” on the top-right corner if you are not log in. And if you log in (via the wp-login.php) you will only be able to see dashboard and profile link (user level problem?).

  70. 70
    Jeeremie Says:
    February 21st, 2009 at 12:45 pm

    PHP tags are a bit different for Wordpress 2.7. I will have to check it.

  71. 71
    Jimmy Says:
    March 2nd, 2009 at 10:56 pm

    Mind if you update this tut. so it will be compatible with wordpress 2.7.1.

  72. 72
    Jimmy Says:
    March 4th, 2009 at 12:04 am

    Btw, I use other jquery. My image slider and my sidebar chat. I was wondering is their a way to fix the problem it has with this.

  73. 73
    Jeeremie Says:
    March 4th, 2009 at 10:40 am

    Please, read the comments above. We already talked about that topic before. Actually, it seems everyone ask me this question over and over. I think I have said it something like 10 times already :(

  74. 74
    zdeno Says:
    March 7th, 2009 at 8:24 am

    Thanks for nice tutorial..Everything working nice and smooth ..
    How can i change size of avatar for that menu?
    Thanks in advance

  75. 75
    Jeeremie Says:
    March 9th, 2009 at 5:37 am

    See this code: “get_avatar($user_email, ‘16′)” ?
    ‘16′ is the size of your avatar in pixels. Change it for ‘32′, ‘48′ or any size you want.

  76. 76
    Jonny Says:
    March 17th, 2009 at 1:29 am

    Hi Jeeremie,

    Great script, but after upgrading to 2.7.1 I’m having the same problem as YoU, with regards to the login link not showing up when the user is not logged in. Any idea how to fix this?

  77. 77
    alex Says:
    March 20th, 2009 at 5:32 am

    or….can i take only the above? on? cuz i allready have the one from ‘up’ sign in thing.
    so can u take the one where are the dashboard,log out,manage…..etc? and ad it to adobe cs 4? dreamwaver? plz sorry for the bad righting language….:))

  78. 78
    alex Says:
    March 22nd, 2009 at 8:19 pm

    Any chance for  someone to make this work with jquery?

  79. 79
    dewey Says:
    March 25th, 2009 at 8:10 am

    Very nice Wordpress login solution! The only thing I don’t like is that the ‘Register’ and ‘Forgot Password’ links take you to the default Wordpress pages, whereas it would be great to have those functions also on the panel. Any plans to add this?

  80. 80
    Jeeremie Says:
    March 25th, 2009 at 10:18 am

    I am currently working on this. In the new version, there will be two forms in this panel: the login and register form. When, user is logged in panel will show the admin navigation with most the links (New Post, New Page, Settings, Appearance, Plugins and so on).

    Other improvement: tab images will be transparent so you can set a different background color and not exclusively white.

  81. 81
    dewey Says:
    March 25th, 2009 at 4:34 pm

    Great news! Can hardly wait! (You should put up a Paypal donate button ;) )

  82. 82
    Jon Says:
    March 26th, 2009 at 9:00 am

    I followed all the steps and i get the bar only with links. The problem is that the links dont work and neither does the drop down. i cant get it to work. help pls i have added my site.

    Thanks in advanced.

  83. 83
    Jeeremie Says:
    March 26th, 2009 at 10:06 am

    jQuery and Mootools conflict together. That’s why it doesn’t work. As I said in the comments above, I am building a new version but with jQuery and it will have many improvements both for design and functionnalities. I still need to test it in IE6+ and write a tutorial to how to implement it into Wordpress. Come back to visit soon or subscribe to my RSS.

  84. 84
    Jon Says:
    March 26th, 2009 at 10:52 am

    Thanks for the help. Ill be here checking back.
    sorry about the jQuery i didnt see that the theme had them implemented. Forgot about it.

  85. 85
    RaiulBaztepo Says:
    March 29th, 2009 at 8:00 am

    Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language ;)
    See you!
    Your, Raiul Baztepo

  86. 86
    Eric Says:
    March 30th, 2009 at 3:18 pm

    Started a new site last night. Using this on a few of my sites and wouldn’t have a site without it. However after getting the site up and going i notice that when im logged in has admin it wont show the page links i have set for the admin to see. I thought this may be a WP 2.7 issue but it seems to work on my test site and my other sites fine. Is there any other reason this would not be working?

  87. 87
    Jeeremie Says:
    April 2nd, 2009 at 4:59 am

    You can try this code to display links to admins only:

    ?View Code PHP
    <?php if ( current_user_can('level_10') ) : ?>your links here<?php endif ?>

    If you write level_0 instead of level_10, it will show the links to all levels (from subscriber to admins). Check user roles in the codex.

  88. 88
    Eric Says:
    April 2nd, 2009 at 6:00 am

    i was using [code]= 10) : ?>[/code]
    must have been the pre-2.7 way to do this.

  89. 89
    Bamboo Says:
    May 3rd, 2009 at 7:52 am

    HI!
    Waiting for a tutorial non word press……..
    is it possible?
    thank you.

  90. 90
    charles law Says:
    May 5th, 2009 at 2:38 pm

    hi i implemented this hack and tinkered around with it a bit, now when everytime the page loads you can see the top bar for a second before it hides itself again

    http://www.lateralprocess.com/blog/

    any help would be appreciated on how to fix this.

    thanks

  91. 91
    Sean Says:
    May 6th, 2009 at 11:50 am

    PLEASE help! I created the login successfully however there seems to be something wrong with the CSS. Go to my site, please tell me what I have to edit to get rid of the long black line at the bottom of the login panel and the white box around “Hello Guest”. Does anyone else have this problem after installing??

    Thanks

  92. 92
    Jeeremie Says:
    May 6th, 2009 at 2:10 pm

    @Sean, images are not transparent. That’s why there’s a white background around the images. Please, check my latest jquery script: Nice & Clean Sliding Login Panel built with jQuery.

    You have twice <div id=”top”> on your page. Rename the second one containing your logo.

  93. 93
    Sean Says:
    May 6th, 2009 at 2:34 pm

    Thanks for the reply Jeeremie. I had the J Query version at first. Apparently I needed to use the Mootools one in order to run other plugins <div id=”top” twice. Any idea which file its in?

  94. 94
    Sean Says:
    May 6th, 2009 at 2:39 pm

    Nevermind I found it, thanks. What would I need to edit in the CSS to get the panel to go all the way to the top of the screen? There is a small gap showing.

  95. 95
    Jeeremie Says:
    May 6th, 2009 at 2:49 pm

    That’s because you have 3 dots (‘…’) right after the BODY tag. Delete them.

  96. 96
    Natalie Says:
    May 24th, 2009 at 8:32 pm

    hi. i’m from Russia. i have one problem: don’t display russian language in login panel.

  97. 97
    V.C Says:
    June 11th, 2009 at 4:20 pm

    I was wondering If you could create a plugin :)

  98. 98
    Liliana Says:
    July 27th, 2009 at 11:53 am

    Hey thx can you tell me how to implement this with mysql for makin a connection

  99. 99
    sapis Says:
    July 27th, 2009 at 11:54 am

    i want to know 2 how to make a mysql connection with this login

  100. 100
    Tamsin Says:
    October 27th, 2009 at 4:15 pm

    Hi, I’ll post the link to my site when i go live. Just wanted to say THANK YOU. What an awesome piece of scripting/coding/inventing. My site looks slicker because of same. Tam

 

Leave a Reply

Wrap all code in <pre lang="LANGUAGE" colla="-">...</pre> and replace 'LANGUAGE' by 'html4strict' for HTML, 'php', 'javascript', 'css'...