A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.

Douglas Adams

Stage 1 – Simple WordPress Theme – Cloud 9

March 12th, 2010

Today I eventually got round to slicing up the photoshop file that I am going to use as the basis of my simple wordpress theme called cloud 9. In order to do this I first made several layer comps with various elements showing, only the background, only the buttons and the background minus the clouds. Secondly I made sure all the names and sizes of my slices were correct, I had to expand some of the slices as the drop shadows extend further than I had originally anticipated.

I exported the slices with the layer comp that shows only the buttons, using XHTML settings and opting for CSS divs instead of tables for layout. Then I exported the whole image with only the background layer comp showing and finally one background without the clouds showing. On opening the files up in Dreamweaver I found that photoshop had used absolute positioning to compensate for the lack of table so I had to do some customising of the CSS to create a centered layout with auto margins to hold the main content of the page. I think this was because I had a 1800 pixel wide image for the background and photoshop assumes I am designing a 1800 pixel wide website, which I am not. It is a 900 pixel wide website that sits centred on top of an 1800 pixel wide background image, just in case anyone has a huge monitor. After these issues were ironed out I had to change the span that contains the news item to use the image as a background rather than contact as this is going to form the basis of a news ‘window’ that scrolls independently of the main page. When finished this will be the place where the post excerpts/titles will be listed.

Web Design|Wordpress