Finally growing tired of the default Kubrick theme on my WordPress blog, I decided it was time to go for a face-lift.
Most of the page layouts I’ve done in the past have been done with HTML and CSS, but only enough graphics for the logo and a few small images just to keep it interesting. So, all my designs wound up with borders and colors, but no real interest.
I found a theme I sort of liked, although it was a little too colorful for my tastes – what can I say, I’m pretty boring. But the idea was good. A wavy left border. And I wanted to have the border appear to be coming up from the page, so drop shadows needed to be used. Last, I wanted the border to extend across the top of the page without any breaks.
Here’s a sketch that gives a rough idea of what I’m after. (Ignore the diamond in the middle, it’s from me having the page folded up in my pocket.)
As you can see, the left border has a curved edge that flows in to the top border. Inside the left border will be the navigation menus with the main body content in the white area.
It’s not an overly complex layout, but it does have a few issues that I haven’t dealt with before.
Requirements
Before we get too far into this project, let me first spell out my goals for this theme.
- Make my site mine. I didn’t simply want to download a theme and change a few colors.
- Drop some of the junk out of the HTML. The default Kubrick theme that comes with WordPress inserts a lot of code at the beginning of each page that I didn’t want. Notably there is about 30 lines of inline CSS code that can be moved out to an external CSS file.
- Increase the search engine friendliness of the site. I prefer to have the content as close to the top of the actual HTML code as possible and then come back with absolutely positioned divs for the header.
- And last, to learn how to do a layout in Photoshop and transfer that over to HTML and CSS. I haven’t ever used Photoshop to do a complete layout, and wanted to learn how to use slices and Image Ready to create the graphics needed.
[…] It happens about once a year. I get this urge to redesign one of my sites. And this one with its wavy lines just seemed due. So here is my new design. As you can probably tell I’m on a minimal design kick right now. […]