I’ve been studying WordPress Themes in order to improve my web design skills. WordPress is very popular in the web design community. I have seen many tutorials on designing for WordPress so I decided to master that skill. I’m very fond of WordPress because I’ve been using it for my blog for many years.
I have created a new theme for my blog based on the Sandbox theme from http://www.plaintxt.org/themes/sandbox/. What I like about Sandbox is that it provides a very plain, generic template for themes which you can then customize entirely through CSS. You can make all your changes in the style sheet without editing any PHP files. Actually, this is not quite true. I did have to edit the sidebar.php file to add a calendar and my chicklets.
Although I already know a lot about CSS, I did manage to learn a few new tricks while working on this theme. I was working on the header for my design and found it would not appear at the top of the page in Firefox. There was a gap between the top of the page and my header. I examined the layout in Firebug and saw a 16 pixel offset on the top of the header element:
I could not figure out where that 16 offset was coming from. There was nothing in my CSS to set any height to 16px. Eventually I tried the developer tools in other browsers. Opera told me that there was a top: 16px computed style for my header element. So I had to learn about computed styles and how to deal with them.
The height for a block-level element is calculated in CSS. If such an element has no height defined, it will be set to auto, which is the default height for block-level elements. You have to change the height of the div by either adding a border or a padding to avoid the computed style.
So to eliminate that computed value I had to add a little padding to the top. As you can see I did have its height defined so I don’t know why there was still a problem.
1: #header {
2: background: #FFFFFF url(images/dark-trees-mist.jpg) top right;
3: height: 145px; /* height of image */
4: padding-top: 1px;
5: }
The following CSS property values will result in a computed value; ‘auto’, ‘inherit’, ‘50%’, ‘smaller’, ‘1.5em’ etc.
I learned how to add icons to my theme. This theme uses a calendar, tag, and comment icon. I can move the sidebar to the left or right. The blog title will have a drop shadow in the Safari browser which supports the text-shadow CSS property. There was also quite a lot of positioning and border adjustments to do which are documented in my notes.
I’ll probably create a few more WordPress themes or make improvements to this one. I tried out some theme switcher plug-ins but none of them quite work with the Sandbox template. It would have been nice to have a theme switcher which would make this blog serve as a design portfolio.
