WordPress Themes – Diving into CSS

By Andy the stuff doer

I’ve had a couple of days playing around at this and have made reasonable progress.

I downloaded a theme that was close to what I need and dived in to the CSS to make the changes.  The CSS only changes the size and appearance of the various elements. To have full control over what actually ends up on the screen will take changes to the .php files.

I should point out that Ive been working on it “live” with no back-ups or safety measures in place. This means if I cock-up I’ll be stuffed. The only precaution I’m taking is to just modify one line in the CSS at a time.

To explain what I’ve done so far an image will be useful. So here it is (first image post)

screen grab 1

he he – that’s worked

So this what I’ve done, remember all the changes I’ve made are in stylesheet.css.  This is accessed from the dashboard – Appearance – Editor.

  1. Change the Header Background. The Header section of the stylesheet calls up a graphic. The Graphics are located in an image sub directory of the  theme. Using the CPanel file manger I downloaded and then modified it in photoshop. After up-loading the new graphic (just plain white), the revision shows up when the blog is viewed.
  2. The Head text was now white and therefore invisible. To change this I had to find where the colour is specified in the stylesheet and change the Hexidecimal colour reference to black. It took some locating the right “Header H1″ reference but after some trial and error I cracked it.  For more on the hex codes I found the Wikipedia Web Colors article useful.
  3. In in similar why to changing the Header Graphic, I changed the background to the main body. This graphic repeats down the page to give the two coloured columns. You can see on the Graphic above, It doesn’t quite match the text column widths, a later adjustment sorted this out.
  4. In the Sidebar section of the stylesheet I eventually found the right colour reference to change the text to white.
  5. Adjusting the column widths was tricky as the positioning of them relates to each other.  This again took me much trial and error.  I eventually cracked it when I realised the Sidebars are defined initially as the same size but  this is overridden further down the stylesheet with specifications for “sidebar left and side bar right”. It took some tweaking to get the Left side bar a tighter fit for the AdWord size.
  6. Padding and Margins needed looking at to get the text sitting well in the columns. Something it took some research to get my head round. PADDING – is space on the inside, just like traditional margins on a sheet of paper, MARGIN- is space on the outside, like a picture frame around a painting.  E’ it’s a Topsy turvy world.

By this time I was coming to the conclusion that the CSS Stylesheet for the free theme I had downloaded was very messy. I’m sure it could be tidied up and simplified.

My advise on this would be – “Find a well coded theme to start learning on”

However I’ve got it looking close to what I’m after and no doubt I’ll tweak it more some other time. Or I might even start again using my advise from above.

Leave a Reply