A few days ago, Suhit from Deeshaa.com asked me to help him with a redesign of his weblog. I don’t exactly call myself a designer and its only been about 4-5 months since I first learnt CSS. In any case, I thought I could have some fun doing this so I told him I’d give it a shot.
I didn’t have the time to start from scratch and so went looking for some designs released under the GPL that I could modify. Considering that Suhit’s site is a WordPress site, there was only one destination, Alex King’s Style Competition. Alex King had a new style that he had released under the GPL called Wall Paper. I decided to use that as a starting point.
I’ve always liked centered layouts so the first thing I did was to apply
margin: auto;
to the div #rap. This centered the entire layout.
I then changed the font family to Verdana and changed the colors to what Suhit’s website is all about, green. Squid Fingers helped me with a nice green based background gif. There are some other amazing backgrounds that you will find there.
The design doesn’t yet render perfectly and there are some issues with the shading not propogating in Mozilla and Firefox[3]. If you can find some problems please leave me a comment and let me know. I would also appreciate it if someone can test it on a Mac using Safari and other flavors of IE, Firefox, Opera etc.
I call it GreenPaper. You can see it live on Suhit’s weblog, WorldisGreen.com.
Download GreenPaper (.zip file with stylesheet and related gifs) and feel free to modify it to your liking.
Comments (8)
Firefox gets it right. You have floated both #content and #menu, so the height of #rap is just equal to the header.
One solution is to use the bgimage and width for body instead.
Alternate solution is to end the rap div AFTER the footer (p class”credit”). Since this paragraph is cleared, wrapping the #rap around it will cause computed height of rap to be equal to the entire #content + .credit height.
HTH
Niket
Looks like “Wallpaper” does the former:
body {
background: #fff;
background: url(images/background.gif) repeat-y;
…
Niket,
I didn’t want to change the html file to do this.
Your second comment helped.
I changed body to:
body {
background: url(’wp-images/background.gif’) repeat-y;
background-position: center;
Firefox works and IE-Win 6.0 works. Can someone confirm IE 5.0, Opera and Mac browsers for me?
Thanks for the tip again Niket.
Alex pointed out that the site was screwed up in IE 5.5 and IE 5.0 and suggested that I apply a text-align:center; to the body to fix it.
Along with that I had to apply a text-align:left; to the rap to get it back to left align.
It should now work well in:
In Opera it gives a small problem. The top header shows a small white space about 10 px in height. I can’t figure out what is causing it.
Still don’t know what Mac does.
And in case you are wondering how I checked older IE versions, Skyzyx.com has the files you need.
I see no reason for you to float the two columns (#content and #menu). Just position-absolute the menu. From what I have seen at Suhit’s, contents are always going to be longer than the menu… so footer-at-the-bottom is hardly a reason.
parent {text-align: center} child {text-align: left}
is a hack for IE5 coz it doesn’t understand margin: auto for centring.
What I am suggesting is:
body {width; align center; margin auto; background}
content {margin-right} /* Don’t position/float */
menu {position: absolute; width}
Are there any disadvantages of doing it like it is currently done?
Prashanth:
Thanks a lot for the new design. Its rocks!
Suhit
“Are there any disadvantages of doing it like it is currently done?”
You can look up Eric Meyer’s site for more discussion on floats.
Currently, positioning is better than floats due to myraid problems with IE/Win and IE/Mac. See http://www.positioniseverything.net/ for more info on various IE bugs with float.
I have seen that people find floats a tad difficult to master than positioning. (I used to be regular at webdev forums last year)
Trackback/Pingback (1)
[...] gh to help me out and over the weekend he has designed a new template for wordpress called Green Paper. Thanks a lot Prashanth! I realise how tough it is for non-techies t [...]