Fun with Style Sheets…

21 May

Today I went over to visit my good friend, Ste…

subjecting Ste to “water torture”

…and we spent most of the afternoon pimping this blog.

I’d really fallen in love with the Choco theme, but with no header image available it fell a little short of what I wanted. I had almost resigned myself to either a) a headerless page, or b) a plainer format that incorporated a header image, when Ste came to the rescue with his powers of awesomeness…

I used GIMP to design my image (it’s only an approximation of what I want, but changing that will be easy now that the CSS is written) and then Ste used his clever brain to make my blog title disappear into the background and my header image to sit pretty at the top of the screen.

Praise be to Ste!

At this precise moment, looks like this…

Header by me, coding by Ste 🙂

We had to make the best of certain difficulties, like the navigation bar (at the top where you move between the ‘about’ pages), which insisted on being part of the header rather than sitting above it. At first this meant that there was a huge gap between the header and the body text, and then when we tried to move it, it ended up hovering around the top of the image. With a bit of extra padding in the CSS we could move it to a more acceptable place to hover, change the colour and add a border.

For those who’d like to know, the CSS is below. It changes the background colour, changes the colour of the post header font (and again when you hover your cursor over it), adds a 900×300 pixel image as a header (but we had to set the height at 240px because the original theme code adds 60px on for some reason, so we ended up with a gap between header and body if we set the height as 300px),  hides the visibility of the site title (so it doesn’t appear over the header image, but it does appear on the browser tab…if you just leave this blank – as I intended – then you end up with a nameless site), adds a border to the navigation bar, creates a margin above the nav bar to push it down the page a bit, changes the nav bar background colour and pads it out so the tabs are central to the box and border. *phew*

body {

.entry {

.post-title a {

.post-title a:hover {

div#header {

div#logo {

div#nav {
border:4px solid black;
padding:6px 8px 0;

I’ll probably end up creating new headers and trying new themes, and I’ll save the style sheets to my laptop and alter them as each theme requires, but in the meantime this version of Choco, a la Lou and Ste will be the look I’m going with.

1 Comment

Posted by on May 21, 2012 in Uncategorized


Tags: , , , ,

One response to “Fun with Style Sheets…

  1. pieproductions

    May 21, 2012 at 12:48 pm

    Ah the joys of coding!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: