Off an on I have been working on a new Sandbox based LEGO theme for a while. I wanted something I could use for my own LEGO blog as well as the NCLUG and NCLTC sites and possibly the ILTCO site as well. I wanted to make it fairly easy to customize it by selecting a color scheme and allowing custom header images.
Color schemes were pretty straight forward. I wanted to base them on the Fibblesnork Backgrounds which I like a lot. The Fibblesnork backgrounds are very small images designed to tile across a web page. In my case, I wanted to use them to frame the content area. There are 18 different colors and two sizes for a total of 36 different background color choices. At some point I plan to support all 18 colors but initially I am only offering three: Red, Green, and Blue. Setting up a theme options page to select a color scheme was pretty straight forward, I had done that previously with my Soccer Theme.
WordPress has some built in functionality to do custom header images but it didn’t really do what I wanted. I wanted to allow a fair amount of control over the look and layout of the header. I decided to support three header images: Left, center, and right. I didn’t want to manage the header images so I decided to leverage the built in media management capability.
The theme options page will present any image that is in the media library as a potential header image. But how? I wanted to make it fairly simple to use. I decided to implement a drag and drop scheme based on the jQuery UI and discussed it in detail in a prior post. It took a little while to work it all out as I had done very little with jQuery previously.
The last thing I wanted to allow was the ability to tweak the header layout with CSS. For this I added what I referred to as “CSS Overrides” for the blog title, blog tagline, and the three header images. The combination of color schemes, custom header images, and CSS Overrides allows the Sandbox LEGO theme to take on a fairly distinct look.
The theme is currently in use on three blogs, I expect to make it available for download in the next few days. There are a couple issues I know of that need some styling help and I want to get two more color schemes finished before I release it. Color schemes aren’t too bad – I just need to pick the proper values. I have a script that actually generates the CSS files.