I did not like any of WordPress themes I could find, so I began modifying default one. I liked the looks but „centered with margins” structure does not feel right for me. Site now runs on my modified theme, it’s still a little buggy and does not show well on IE, but it goes in the direction I like…
My general thoughts where:
- Make it fill the screen – I know there are people using low res monitors, but generally programmers does not belong to that group. Since I want to place code here, i need every inch I can get.
- Get the sidebar floating to the right and leave it there.
- Get sidebar a fixed width – and all else leave liquid.
- Preserve nice looking rims and header image – until I will have time to prepare an original theme artwork.
- Get sidebar in rounded corners rectangle.
In my professional work I do some ASP.NET web applications but most of them have simple design, I just make them look nice (but still ascetic). Areas I work in does not need cool and nifty GUIs, and customers I work for – pay for business functionality not the looks, so I do mostly simple CSS stuff.
While making research and experimenting with CSS I found that I do not have the expertise knowledge of a Web Designer, needed to get when I was going, so my road to enlightenment was long and bumpy one. Respects to all Web Designers!
Here are some links to pages I read to get things done.
Rounded corners where easy – Fluid Solution gave me pointers. Later on I have stumbled upon Transparent custom corners and borders – leaves cleaner markup although I would tweak it just a bit.
Rims are just background images positioned on the edge of a container and repeated vertically. The tricky part is placing the background on right elements. To get left/right rims displayed correctly I have added an innerbody div as container for all else, this way body has left rim background and innerbody has right rim background. For header and footer I used similar technique as with rounded corners.
Now, getting the sidebar in the place I wanted was a the hardest part. I thought „so… I float it to the right, get it some space and voila”… I was SO mistaken! I did a lot of searching, reading and trying. When I did get something to look OK in FireFox then IE look was crappy. When it seemed to look OK in both, then resizing did not work OK… then bugs in IE… frustration. Again respects to all Web Designers! I will not describe here how I get it working, instead look at Float layouts article, prepare to read it a few times thou ;).