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:
- To create a wider post area so that I can use larger/wider photos to show more details.
- Because I may be changing to a new comment system that required I leave behind my old "classic" template.
- I wanted an easier to read, wider sidebar.
- The new template allows "Reactions" you can click on at the end of each post.
- 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? |
 |
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.
TROUBLESHOOTINGPost 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.
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! |
TROUBLESHOOTINGSecond 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.
0 Click Here to Comment:
Post a Comment