Sunday, July 6, 2008

Blog Page Layout

Pat from NY has asked how to an image to fit in the side coloumn of her blog. There are two solutions.

The first solution is to resize the image using an image editing tool such as photoshop. In Pat's case, she would need to resize the image in question to be no more than 200 pixels wide as this is the default setting of the template she is using.

The second option is to resize the page layout.

A word of caution first.
If you change the width of one column to be greater in width, without reducing the width of other coloumns or increasing the width of the overall page then the page layout will go skewiff.

In Pat's case she needs to increase the size of her left column by 53 pixels to fit the image in as it is. So first we will increase the overall page size by 50 pixels in the "Edit Html" tab in the page layout section of the dashboard. (By default Pat's template is 700 pixels wide.) By changing the page width it allows the main content column to retain the correct proportians.

The next step is to increase the the sidebar to the width of the image. In Pat's case we will increase this by 53 pixels to 253 pixels.

The last step is to change the width of the main coloumn so the page layout remains the same. The sum of the two coulmns should equal the width of the page. So 253 + 497 = 750. So therefore we need to make the main column 497 pixels wide.

You can see the result of all the changes here.

NOTE: Changing the template setting may require that you resetup your custom widgets such as images.

1 comment:

Pat said...

Thanks so much for all of your help. You explained it all so well. I am sure that I will be back for more help.