Template Upgrade

Since Google announced the Blogger Template Designer I've been meaning to rework my site. There was a fair amount of hackish stuff in my template HTML, including a bunch of monkeying around to make my main post column wider yet still use the rounded corners on the old table based layout.

The new template I picked out is much simpler and cleaner looking. Amazingly, pretty much everything came over with no effort on my part. I did end up spending some time reworking the color schemes of my Tumblr and Flickr widgets. And I cleaned up some minor CSS and Icon annoyances.

I also took a look out at Flickr to see if they've upgraded their Badge Widget generator anytime recently. They have not, so my Flickr badge generator is still valuable. Looking at it again after all these years, it basically just hides the default Flickr table, draws my 2x5 table, then uses some script to pull the InnerHTML of the the Flickr cells containing 10 random images, and poke them into my cells. Like so:


<td class="robCell"><div id="rob1"></div></td>

. . .

document.getElementById("rob1").innerHTML
= document.getElementById("flickr_badge_image1").innerHTML;


I'm sure there are much more elegant ways to do this (one of these days I'll get off my ass and finish learning JQuery and/or Prototype), but for now, this is still working. No need to fiddle with it now that I've updated the colors and fixed the margin/padding/border issues that were bugging me.

The Tumblr Badge was even easier, that was just a few color tweaks, though again I messed with the margin/padding/border settings to bring things in a bit tighter.


/* Rob Styles*/
.tumblr_photo
{
width: 125px;
height: auto;
float: right;
margin: 3px;
padding: 0px;
border: 3px #444444 solid;
}

.tumblr_posts
{
float: left;
margin: 0px;
padding: 0px;
margin-left: -10px;
}

.tumblr_post
{
font-size: x-small;
list-style-type: none;
width: 215px;
margin: 0px;
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
max-height:210px;
overflow: hidden;
border: thin black outset;
background-color: #222222;
old-background-color:#78a;
}
.tumblr_caption
{
padding: 2px;
margin: 2px;
}