The Flirty Blog is Bigger and Better!

Like most people, I don't enjoy changing things I'm comfortable with so I've been using the same blog template for the past 4 years.

5 years ago when I began blogging I first created a blog on my website using HTML pages and an RSS feed. After a few months I realized this was not an efficient use of my time so I opened accounts on Typepad, Wordpress and Blogger (aka Blogspot). I began blogging on all three and stuck with the one I liked best. That turned out to be Blogger.

When you open a blog account on just about any blogging platform there's always a bunch of pre-designed templates you can use if you don't want to pay for one or don't have the needed HTML skills to customize the template to look like your website, which it should complement if you have one.

Though I've changed the header and background a few times and added new features to The Flirty Blog, I've kept the same blog template all these years.

Until yesterday.

The default template I chose in 2007 before and after customizing it.

Yesterday I updated the template for The Flirty Blog. Why? Well, for a number of reasons:

1. To create a wider post area so that I can use larger/wider photos to show more details.
2. Because I may be changing to a new comment system that required I leave behind my old "classic" template.
3. I wanted an easier to read, wider sidebar.
4. The new template allows "Reactions" you can click on at the end of each post.
5. Because it was time. Blogger and other companies have been coming out with more new widgits (features) and the old classic template I was using wouldn't be compatible with many of the new widgits going forward.

The template I used until yesterday.

And the new template. See how it's wider?

This is what the template looked like when I first switched it out. It took a lot of customizing to recreate the look of my existing template.

Hate commenting but want to let me know what you thought of a post? Reactions, located at the foot of each post, allow you to click on a box to leave feedback about the post you just read. It's very Facebook'esque for anyone who's ever used their ubiquitous "Like" button or similar buttons around the web.

It was pretty smooth sailing except for one particular issue which I'll describe below. Yes, there was a lot of tweeking to change the dimensions, font and link colors, spacing between elements and to add a new, larger custom header but all in all this was a pretty non-traumatic upgrade.

TROUBLESHOOTING Post Title was Changing Sizes - Getting Smaller The only significant problem I ran into with this update was that the post title size looked fine until I clicked on it (or used a direct url to a specific post). Then the post title font shrunk down in size to almost the same size as the text. It didn't look good. Here is how I fixed it. First I went to Settings → Edit HTML → and poked around until I figured out it was the h3 post-title I was trying to fix but I wasn't able to figure it out. When that didn't work I went to Google and looked for an answer there. I found several posts on the Google.com/support/blogger users' forum but the remedies were confusing and none seemed to be anything I could execute. I went back to Settings → Edit HTML → and poked around until I figured out the solution which only took a few more attempts. As you can see my font size was set at 20 pixels:          default="normal bold 20px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 20px 'Trebuchet MS',Trebuchet,sans-serif"/> All I did was add the 150% code in red beneath the h3.post title information below: /* Posts ----------------------------------------------- */ h3.post-title {   margin-top: 20px; font-size: 150%; } And just like that, it was fixed!

TROUBLESHOOTING Second Issue: End of Post is too close to the content below it. See how the end of the post was placed too close to the footer content beneath it with no line break at all? I went into the HTML view and tried messing with the "footer" code. Finally I realized that the solution was to add margin-bottom: 2em; to the existing post-body code. It worked like a charm. .post-body { line-height: 1.4; position: relative; margin-bottom: 2em; }

BACK UP YOUR TEMPLATE

A word to the wise: Whenever you customize your template be sure to create a back up before you begin.

There was that one time in 2008 when I tried to create the pink and green menu back to The Flirty Guide (you'll see just below the header) and didn't back up my template before I began.

This resulted in what I could only describe as a Blogtastrophe.

Well, I hope you like the new layout. I'm still getting used to it myself :)