Hi all,

I thought I'd share a bit of fun with everyone. I've been designing a few custom features for one of my projects: http://kwitterz.com The launch of kwitterz will - hopefully - coincide with the re-launch of my book... hint, hint :o)

One of the things I really wanted for this project was a simple sliding login panel with all the logged-in BP-user links available to members. My search turned up several for WP, but none worked well with BP, most not at all. So I took matters into my own hands. The result is my modification of the SuperSlider-Login plugin: http://wordpress.org/extend/plugins/superslider-login/ See the screenshots below for logged-in and logged-out views.

If you'd like get this for your site, click the download link below to get the zip which contains the file: login_panel.php Replace the file of the same name in the plugin with the one from the zip. All I've really done is switch out the WP dashboard links with BP profile links.

There is one custom link that I've left in there to show you how to add your own. If you don't want it - and you probably won't 'cuz it links to my site - just delete it. You'll find the code for that link at line 46 of the modified login_panel.php

The nice thing about the SuprSlider-Login plugin is that it comes with a useful admin panel where some basic customization can be done. To get the exact look as in the screenshots, select the default style in the plugin's admin panel, and add the following css to your active theme/child-theme's stylesheet. This style was designed for WPMUdev's SimpleMarket theme, but go right ahead and play with the colors and stuff to get it to fit the look and feel of your own site. If you want the panel to stay fixed at the top of your screen instead of scrolling with the page, uncomment the first line.

/*body #toppanel {position:fixed;}*/
body #loginpanel {
  background:#F8F8F8;
  }
body #loginpanel .content {
  width:100%;
  margin:0;
  }
body #loginpanel .first {
  border-left:1px solid #ddd;
  }
body #loginpanel .second {
  border-right:1px solid #ddd;
  min-height:255px;
  }
body #loginpanel input[type="text"], body #loginpanel input[type="password"] {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 5px 5px 5px 5px;
  padding: 0.5em;
  }
.bt_login, .bt_register {
  margin:5px 10px;
  }
body .logintab {
  border-top:2px solid #ccc;
  top:-1px;
  }
body .logintab ul.login {
  top:-2px;
  }
body .login li.ss_left {
  border-left:2px solid #ccc;
  }
body .login li.ss_right {
  border-right:2px solid #ccc;
  }
body .login li {
  background:#F8F8F8;/* Old browsers */
  background:-moz-linear-gradient(top,#F8F8F8 0%,#D6D7D6 100%);/* FF3.6+ */
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#F8F8F8),color-stop(100%,#D6D7D6));/* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top,#F8F8F8 0%,#D6D7D6 100%);/* Chrome10+,Safari5.1+ */
  background:-o-linear-gradient(top,#F8F8F8 0%,#D6D7D6 100%);/* Opera11.10+ */
  background:-ms-linear-gradient(top,#F8F8F8 0%,#D6D7D6 100%);/* IE10+ */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8',endColorstr='#D6D7D6',GradientType=0 );/* IE6-9 */
  background:linear-gradient(top,#F8F8F8 0%,#D6D7D6 100%);/* W3C */
  border-bottom:2px solid #ccc;
  }
#loginpanel img.avatar {
  padding:0.6em;
  border:1px solid #ddd;
  }
#loginpanel .message-subject img.avatar, #loginpanel #friend-list img.avatar {
  float:left;
  height:30px;
  width:30px;
  margin-right:5px;
  }
#loginpanel .message-meta {
  width:170px;
  }

If you need help with any aspect of getting this working on your site, respond to this post and I'll see what I can do (please remember to include a link to your site so I can see what's going on).

Have fun! :o)

Here's the download link:
https://www.yousendit.com/download/M3BtWUhwYUlreEF3anNUQw