Tweaking My Blog

It's Monday and time for Metamorphosis Monday, hosted by Susan at Between Naps on the Porch. Since I spent most of the day last Wednesday playing with my blog settings, I thought I'd show you what I did and tell you how I did it. I must confess that I was inspired to make these changes when I read THIS POST from Susan. I loved the wider look with the larger type and big pictures. When you've finished here, be sure to head over to Susan's place to see what others have transformed.

If you've visited my blog before, you may remember that it used to look like this. When I started playing around with it, I knew that I wanted to keep the same basic look, but I was interested in wider columns, larger pictures and a larger font.

I had seen that other bloggers had gone to the minima stretch template to get the wider columns, so I decided to create a test blog to play with that idea. If you are going to try making some changes to your blog, I would definitely create a test blog to try them on (thank you, Susan). I knew from Susan's experience that I would no longer be able to use my old background. With the minima stretch template, the posting area and the sidebar fill the entire screen, so that lace border just wouldn't work any more.

My first thought was to play around with a new background that contained some of the same elements as the old background. So here's what I came up with. It was okay, but I still didn't like it as well as the backgrounds that have a center section for the text and sidebar with a coordinating background and some kind of decorative edge.

So my next thought was to go back to the two-column template and see if I couldn't figure out how to change the column widths. I don't know much about HTML, but I had no problems playing around with a test blog to see what I could figure out, and what you see now is what I came up with. I did have to create a new background to make a wider center section, but I just started with the old background and made the appropriate changes. If you want to change the width of your blog, here are the steps that I followed.

1. Open your blog, sign in, and click on "customize" in the upper right hand corner. Then click on the layout tab and click on "Edit HTML." Scroll down until you see this in the HTML code.

2. Notice that the width of the outer wrapper is 660 pixels, the width of the main wrapper is 410 pixels, and the width of the sidebar wrapper is 220 pixels. If you add together the widths of the main wrapper and the sidebar wrapper, the total is 30 pixels less that the width of the outer wrapper. I have no idea if this is important. I assumed that the total of the main wrapper and sidebar wrapper widths should not exceed the total width of the outer wrapper, but I didn't really know if that 30 pixel difference was important. However, I decided to assume that it was.

3. With those things in mind, I started making changes. I first changed the outer wrapper width to 800 pixels and the main wrapper width to 550 pixels, leaving the sidebar wrapper width at 220 pixels. I decided that the sidebar looked too skinny and out of proportion, so I changed the outer wrapper to 900 pixels and made the main wrapper 600 pixels wide and the sidebar 270 pixels wide. So here's what the HTML code looked like after I made those changes.

You can click the "preview" button to see what those changes look like. The preview opens in a new window, so you will need to close that and go back to this window to save your template. Once you are satisfied with the changes you've made, click "save template."

4. The next step was to create a new background that would work with my new wider columns. The Cutest Blog on the Block has a pretty good tutorial on how to create your own background. One thing to keep in mind, however, is that you have to make the center section wider than the dimensions they give, since you have made the posting area and sidebar wider. You can find their tutorial HERE.

I have also discovered that some of the three-column backgrounds offered by TCBOTB work with the changes I made. I would imagine that there are other sites out there that offer free backgrounds that would have some three-column backgrounds that would work also.

5. Now that I had wider columns, I decided that I needed a larger font. Once again, you need to sign into your blog, if you're not already there, click on "customize" and on the layout tab, click on "fonts and colors." Scroll down in the little window on the left until you see "text font" and click on that. Once you are there, this is what you will see.

Just below where it says "font size" keep clicking on "larger" until you get the look you want. You will be able to see the font size getting larger in the preview window. When you are satisfied, click on "save changes."

If you've been working with a test blog, you will need to make these same changes to your real blog. My first thought was that I could simply save the test blog template to my computer and then upload it to my real blog. However, when I tried to do that I got a warning that to do so would delete all of the neat widgets on my sidebar. It was easier to just edit the HTML of my real blog instead of having to reinstall all of my sidebar stuff.

Now that you've made these changes, you are all done unless you are using Windows Live Writer. I highly recommend Live Writer, especially if you want to do large pictures. It's so easy to just insert the picture, select the positioning (inline, right, left or center), and drag it to the size you want. However, Windows Live Writer won't recognize the changes you've made to your blog unless you reconfigure it. So here's how.

Open Live Writer. On the toolbar, click on "blogs" then "edit blog settings." In the window that opens, you will see a button that says "update account configuration." Click on that, let Live Writer do its thing, and you are set to go.

One more thing. In the process of playing around with the minima stretch template, I figured out how to make the border around my header picture fit the size of my picture. However, this post is long enough already, and I feel as if I've just lived yesterday all over again. So I'll save that for another post.