Our new sidebar

Our new sidebar

Another update to the site - a brand new sidebar & about this site slideout tip

I’ve never really been happy with the sidebar for this site. While the old one served its purpose well, it always just seemed to be in the way and a little hard on the eye. So I decided it was time to give it a makeover - in line with the other site adjustments made just a few days ago.

Taking inspiration from the many, many sites on the internet, I decided to go with separating the individual content of the sidebar into numerous containers - a technique popular among blogs, and one that I have always wanted to replicate in Wikidot. This type of design is not only easy on the eye, but also helps to distinguish the sidebar’s content. The new sidebar also allowed me to add some much needed colour to the site in the form of the headers of the sidebar boxes.
In redesigning the sidebar, I also took the liberty of increasing the site’s width from 900px to 1050px - a more comfortable width in my opinion (maybe just because of my widescreen computer?).

The new sidebar does display some CSS3: the coloured headers have a gradient to give them a hint of 3D, and each of the boxes has a shadow that increases in size when you hover over it (only in webkit browsers).

I’ll bring you a tutorial on separating your sidebar content sometime in the future (when I find time!).

NEW ADDITION - About this site

As the cherry on top of the new sidebar, I've just added an about this site slideout - created using pure CSS. I was planning on using a jQuery slideout tip, but had some problems getting it to work properly. I have tested it in Safari 4, Firefox 3.6 & Opera 9.6 and all appears okay - although the animation only works on webkit browsers. Please let me know how it works for you in the comments below.

Oh, and I'll definitely be writing a tutorial on this.

These adjustments take this site one step further towards its goal of looking really awesome - I hope you like them, and feel free to make any suggestions in the comments section below.

Enjoy the article? Tweet it!

Discussion - No comments yet…3 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
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.