I finally got my site out of tables and into WordPress.
I started with Bruce Gardner’s Blue Zinfandel Squared Enhanced theme, because I am learning WordPress and I like his detailed approach to CSS. I’ve found that working with other people’s code is a good way to learn, and both Blue Zinfandel Enhanced and Blue Zinfandel Enhanced have a layout structure I like, plus lots of thoughtful details to play with.
Sometimes, half way into the process, I’ll decide that the original theme author’s sense of organization is hard to work with. That’s when the real restructuring starts. In this case, under the skin, much of what I left is almost exactly like the original author’s. My biggest structural change was to swap out the #wrap div to help me make the header area go full width, while the rest of the page stays at a fixed width. Just for fun, to the center area and the footer I used a border radius that will make rounded corners in FireFox. In case you’re interested, here’s an example of the radius CSS:
#wrap {border-radius: 10px; -moz-border-radius: 10px;}
And that’s all she wrote. Fun stuff, huh? One line of code, no cutting up little circles of the inner and outer color, and presto zappo you get curvies.
These curves won’t show in some browsers, and without curves the design looks a little too plain for my taste. Adding a 1px light gray border helps to add a little definition. I may add a background gradient or an image for shading, but what’s there seems fine to me for now.
Other changes so far have been to add a background color, some image-based bullets, and switch some fonts. In the future I will be experimenting with blockquotes, the date image, and doing more with the comment box styling, and I want to adjust spacing around some of the text elements. In the meantime, what I have already is fine.
Presto zappo and “Hello World,” we got theme.
Hat tip – if you haven’t seen Bruce Gardner’s Revolution Theme, check it out. Smooth!