style.css
I’ve just finished fiddling with the css file and put in my header, which was actually only a bit smaller than the kubrick one. The kubrick one was 760px and mine was 729px. Which means that I’m not going to have to do much pixel pushing. So here I am tweaking the look of the blog when the site is not even ready. You have to get your priorities right, right?
The stylesheet is very nicely commented and you don’t need to keep opening up the .php files so see where the selectors have been used. The selector names are well chosen so that you can pretty much guess what they are styling. Chunks of the styling code is broken into chunks, so it’s easy to see where you are. If I had code collapse it would be really handy, but it’s no big deal dragging the scrollbar.
Ok, so details. My header was 729px by 150px. Golden ratio don’t you know. So I put in the folder themes>default>images and renamed it “kubrickheader.jpg”. But then my title was showing up on top of that, so I added h1 {display:none;}. The only problem is that I didn’t check to see if that element is used anywhere else. It also was the link that took you back to the index page, so now that doesn’t work. I also changed the #headerimg selector height and width to the size of my header. I also edited #header and #page to the dimensions I needed – 729px.
I changed the background tile by placing my tiling image in the same images folder as I did above and changed the url to point to the new tile image – backtile.gif.
Next came the footer. I got rid of the footer image by deleting that rule from the #footer selector and then replaced with a colour {color:#C5CFDB;}. And if I’m not in a focused mood, then I forget to spell it in English US and wonder why my colo(u)r isn’t showing up.
So header, footer and background done. I wanted a link back to my site. So I added an anchor tag in footer.php
I’m a bit of a novice when it comes to php, but just by looking at other fragments of code, you can figure out the correct syntax. One thing to bear in mind and I learned this the hard way, is not to edit php files using a WYSIWYG editor such as dreamweaver. You have to configure it first. Better to use something like BBedit or just a basic text editor. But then BBedit has nice syntax colouring.
Next came styling the form elements, namely the comments input and the search field. Just a border:
{border:1px solid #9999FF;}
which is inkeeping with my colour scheme.
And that’s about it really. I thought it would be much more difficult, but because as I mentioned earlier the stylesheet is written so well, it was plain sailing.