Over my spring break, I decided to spruce up my blog a bit (read: redesign). Unfortunately, I am design-challenged and too cheap to pay someone to create a new design for me. So I started perusing the designs available at OSWD, and found a nice template called Blue Spring.
After finding, downloading, and familiarizing myself with the template's HTML and CSS, I set about hacking it into Blogger XML submission. It was mostly an effort of looking at my existing template, as well as the generated HTML, and revamping the CSS to support the structure produced by the Blogger widgets (mainly the Blog and Header widgets).
After combining HTML and CSS into one XML file and making sure the CSS supported all the widgets one might want in the sidebar, I set about "making it customizable". Not everyone likes to muck about in the CSS code -- some (most?) prefer to use Blogger's "Fonts and Colors" tab to do what they can. Supporting this was a simple matter of pulling out all the major colors and fonts into skin variables. After that, I made sure that all the widget sections had the proper settings.
Now, a "how to" on usage. In the original template, there were designated spots above and below the header for links, namely "navigation" and "other". I have left these as two empty sections, with a limit of one widget each. They are optimized for the "Link List" widget, but, as you can see by the search bar I've placed at the top, you may be able to fit other widgets in them. Beware when putting something other than a LinkList widget in the bottom slot, though -- it can seriously mess up your layout (and can usually be fixed by removing the widget).
The "Page Elements" layout is slightly a mess; as I have no clue how to modify the XML file to fix this -- without melting the layout -- you'll just have to deal with it :) The "edit" link for the top LinkList section is hidden by the logo. To get around this, move the widget to the lower slot (or a slot on the sidebar), edit it, then move it back.
Before uploading the template to your blog, be sure to upload the images to a hosting service, and replace all images used in the template with the appropriate URLs. Searching the XML file for "images/" will show you the images to be replaced. If you have a favicon for your blog, find the following section:
<!-- link href='#favicon-url-here' rel='shortcut icon' type='image/gif'/>
<link href='#favicon-url-here' rel='icon' type='image/gif'/ -->
Uncomment it, and replace "#favicon-url-here" with the URL of your favicon. If you want a small RSS icon to the right of the bottom LinkList section, find this section:
<!-- span id='feedlink'>
<a href='#your-rss-feed-here'>
<img alt='Subscribe' src='images/rss.gif' />
</a>
</span -->
Uncomment it, and replace "#your-rss-feed-here" with the URL of the feed you want visitors to subscribe to.
As the devil is in the details, you will, more likely than not, come across issues if you try to add custom or third-party code to the sidebar (or any other part of the template, for that matter). The CSS has been tweaked to make most of the official Blogger widgets look good; anything unofficial is just that, unofficial. Please keep in mind that I am not your personal HelpDesk, nor will I likely have time to help everyone "fix" their blog. There are Blogger help forums, as well as HTML/CSS help forums, that will be more than happy to help you, if you ask.
For you web standardistas out there, I don't know if the Blogger engine puts out standards-compliant code or not, but almost any Bloger blog you try to validate will turn out hundreds of errors :) as such, I didn't quite worry about making the template standards-compliant. If it is, it's completely on accident :P The theme does NOT render properly on IE6-. Seems to work fine on IE7, IE8 is unknown.
As always, with anything remotely related to technology, BACKUP!!! Go to your blog's layout, select the "Edit HTML" tab, and click the "Download Full Template" link. Save the XML file to your computer, so you have a backup to restore from if you prefer your old template.
The template's footer (and some comments in the CSS) credits the designer, DCarter, and the one who converted it into a template (Templater?), me. If you do use this template, please leave this info intact.
[ 5/11/08 ] Update: Turns out the first version would break when text size was increased, if you had menu items. Fixed by adding overflow:hidden; to the first #main-wrapper declaration. Still doesn't work in IE6. Also added overflow:hidden; to the #sidebar declaration, and the layout now mostly works in IE6 (there are still a few quirks, but it's usable). The sidebar is strangely displaced in IE5.01 and slightly off in IE5.5 and IE4.01 according to browsershots.org, but the template now supports "all major browsers on all major operating systems".
Additional links:
Download the Blogger template
OSWD: Blue Spring template
Blue Spring WordPress template
Open Source Web Design
The header image I use
This template featured at the The Blogger Templates
Save to Delicious (
Del.icio.us
I was perusing eBay today, looking at Photoshop CS3 prices, amongst other things. As I was looking down the list, I came across an auction for a copy of the GIMP Only $5 Buy It Now, $4.50 starting bid! Too bad anyone willing to buy it will download it for free. Those who don't know about the free option probably won't bid on it because they've never heard of it :)
