SevaTeem

To get the background image applied across the whole page, you need to dive into the CSS and remove all the sections that kill it off by specifying the the background image is set so some specific colour. You also need to set the margin and padding to zero for the page as otherwise there’s an annoying offset effect where the central column is a little bit lower than the two columns to the side.

Next is to go to the header.php file and mark the background as “background-attachment: fixed” which has the effect that the text scrolls but the image stays in a fixed position on the screen. Another option would be to create a horizontal image that repeats below the main background image and I’ll be looking into that in due course.

This is the first time that we’ve looked at the use of styling within a PHP file and it’s a good deal more powerful than styling within the normal style.css file since we can use parameters. In fact, we’ll be moving more and more of the style sheet into a PHP file as we go along as I want this stylesheet to be fully configurable. It’s possible to do that by writing a new style.css file via a configuration menu but that’s pretty messy and requires the end user to do a bunch of stuff that they shouldn’t need to get involved with which is why there will eventually be a style.php file for this theme so that the users of it will be able to do things like changing the colour, background image and so on very easily.

The stylesheet is at the core of establishing the look and feel of a Wordpress blog.

Simply by playing around with the stylesheet you can make radical changes to the overall look of the blog very easily. For example, step one of my adventure in creating a new theme here was to start with the basic Kubrick theme that’s the default used by Wordpress and change the background.

I’m ultimately intending to have a background photo that is behind everything in the content screens which meant stripping out a lot of the “background-color” lines within the Kubrick stylesheet and replacing the references to the various Kubrick images to background.jpg. I’d to add “margin:0 and padding:0″ to the body style to remove the annoying little offset effect that you get when the central column isn’t quite lined up with the left and right ones. The Kubrick theme also refers to the background image within header.php so that needed to have two lines changed.

It’s way too much hassle to design a new theme and use it on the main blog so this blog will be serving as the testbed for my new theme. That probably means that it’ll look pretty weird a lot of the time!

Anyway, here goes with the SevaTeem theme…