Archive for the ‘Image’ Category
Sunday, April 6th, 2008
At first glance, this seems to be amongst the easier things that you can do.
All you need to do is to change the “width: 760″ to “width: 60%” and you’re done although it’s best to change the width of the sidebars to 20% too.
The problem is that we’re using a full page background image and the text now flows all over it. As you can see from the image here, the sidebar text is unreadable.
There are several ways to correct this:
- change the image either by selecting a new one or manipulating the current one;
- change the colour of the sidebar text;
- put a solid background colour behind the sidebar; or
- reduce the width of the main column.
For simplicity, we’re going to go for the last option at the moment and reduce the width from 60% to 40% which restores the look to that of the fixed width version.
Copyright © 2008 by SevaTeem Ltd. All rights reserved.
Posted in Image, Stylesheet | No Comments »
Sunday, April 6th, 2008
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.
Copyright © 2008 by SevaTeem Ltd. All rights reserved.
Posted in Image, Stylesheet | No Comments »