There’s a certain kind of style you can only get from a top-sliding login panel. That smooth transition of a clean login box sliding from the top of the screen just adds some class to a website. It’s also extremely functional as it’s very noticeable, but it doesn’t stick out like a sore thumb. One of the best part’s about it? You can make it in three easy steps.
For a demo of the panel, just go here.
See code on this Pastebin page: http://pastebin.com/Ap4pdBBJ
Step 2 – Add the HTML
Next you’ll need to paste the following code into the header.php file. Paste it in right after the <body> tag.
See code on this Pastebin page: http://pastebin.com/PBuGukKY
Step 3 – Add the CSS
Finally (yeah, it only took 3 steps!), you’ll need to copy the following CSS into your style.css file.
See code on this Pastebin page: http://pastebin.com/dnBMxU7G[pbcode id=”dnBMxU7G”/] This has been tested with multiple themes and plugins including BuddyPress, so you shouldn’t have any problems with it. The final product should look like this when the site is first opened:
Then like this after you click it (A tiny bit is cut out since it’s a long image. Click it to see full image):