Wikidot Design & Development

Create a slide-up admin panel with CSS3

Put administrative links for your site in easy reach with this slide-up admin panel.

admin panel

Partly inspired by a forum thread on the community site, and partly something I've always wanted to add but never got around to it, I decided to create an administrative panel that can be accessed on any page of the site, only by me, and always just a mouse hover away. And because I'm the only one using it, I got to fill it with all sorts of CSS3 goodies. Read on for more details…

Showcase - CSS3 Image Gallery

Add some jazz to the lightbox image gallery with these CSS3 improvements.

My dashboard tells me it has been 51 days since I last posted a blog - longer than I had hoped between posts, but inevitable while I'm juggling university study with two on-going wikidot projects. And admittedly, this is not quite the in-depth post I would love to deliver you, but I felt it was time to once again whet your appetite with some CSS3 goodness - this time without the detailed explanation of every knook and cranny.

Elegant Image Frame

Add some elegance to you wikidot site with this easy, stylish and formal image border.

rose image

We’ve already shown you how to turn your plain old images into polaroids, and now it’s time for a nice, formal image frame.

First, what to put on your wikidot site. Instead of wrapping the image between some <div> tags, we’re going to use the more efficient method of assigning a class (elegant-border) to the image. This means that if you add the relevant CSS to your custom theme, any time you want to use this image frame, just add class="elegant-border" to the image syntax.

[[image :first class="elegant-border" width="250px"]]
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.