Even more pink for andreas08 theme

The changes you see in the screenshot are actually very minor, and you may be able to adjust the sidebar blocks of any blog theme using this tutorial. This applies equally to other blogging platforms such as Wordpress, Nucleus, b2evolution etc because we are only editing the sidebar title and content from our stylesheet.

So lets start by opening style.css from the andreas08-pink folder in your favourite text editor. Scroll down until you find the sidebar entries. You'll notice we currently have #sidebar, .serendipitySideBarItem{} and #sidebar h2, .serendipitySideBarTitle, but we're going to add a new class .serendipitySideBarContent{}. The first configures the entire sidebar, while the second and third configure the title and content. I know that seems obvious but I hope you'll forgive me for stating it. The code looks like this;

#sidebar, .serendipitySideBarItem {
float:right;
width:180px;
padding:10px 5px 0 0;
line-height:1.4em;
font-size:0.9em; }

#sidebar h2, .serendipitySideBarTitle {
color:#FFFFFF;
background-color:#d65c81;
display:block;
margin:0;
font-size:0.95em;
text-transform:uppercase;
font-weight:bold;
padding: 3px 3px 3px 5px; }

.serendipitySideBarContent {
background-color:#fdeaf0;
border-left: 1px solid #d65c81;
border-right: 1px solid #d65c81;
border-bottom: 1px solid #d65c81;
margin-bottom:10px;
padding:3px 3px 3px 5px; }

If you look at the screenshot I've actually adjusted the positioning and spacing of the sidebar items which is why this code will look different from the original.

The sidebar needs to be floated to the right of the content column, and I want it to be 180px wide so it doesn't look too squashed up against the side of the page. Because of this modification I've also adjusted the positioning and spacing of the quicksearch box in the header. It now looks like this;

.quicksearch {
padding:0 4px 0 0;
background-color:inherit;
border-right:none;
text-align:right; }

.quicksearch input { margin:3px 4px 0 5px;
padding-left:5px;
width:175px;
color:#999;}

The sidebar title is displayed as a block so that the dark pink background color takes up the entire width of the sidebar. If we displayed the title inline then the background color would only cover the actual text. I've also converted it to uppercase and added some padding.

Finally, the actual content is placed on a light pink background, and this is actually the color from the very top of the gradient in the page background so it fits into the desgn quite nicely. The border color is the same as the sidebar title, which is the same as navbar color.

If you would like to use this sidebar in your theme, or if you have any other modifications you'd like to share with other bloggers please feel free to comment below. The completed stylesheet to change your version of andreas08-pink so that it looks like my screenshot is available to download. Simply unzip style.css to your andreas08-pink folder and you're away.

Edit 5 April 2006: Mark and Heather from NY emailed me asking for the complete zipfile. I hadn't planned to release 'even more pink' as a theme, but I bow to pressure, please note that if you download andreas08-evenmorepink.zip you do not need to download the original pink theme or the stylesheet.