Wednesday, January 24, 2007

Linda's How-Do-I Series? How Do I Widen My Blog?

Have you ever wanted to widen the width of your blog columns and wondered how exactly you go about doing that? Perhaps you haven't done it because it involves changing your blog's template.

Well, you can widen the columns of your blog, your entire blog, or a combination of both rather easily, and here's how:

To do so you need to find the code for the overall width of the blog, the main posting column width, and the sidebar width within your blog's template. Each blog's template is unique and therefore the coding might not be quite what I'm showing here. The idea is to try and find the coding that is somewhat like what I'm referring to.

The good news is that you can change the width of your blog and each respective column width and then preview your blog before saving the template. The bad news is that it takes a little trial and error to do so. But, as long as you don't SAVE your template until you're ready you can keep changing and "Previewing" until you get it how you want it to look.

To widen your blog you need to look for the the HTML code for the page structure. And then look for the HTML code for the overall blog section, the main posting section and the sidebar section. Within each section will be HTML coding concerning width that will say something like this: width:740px;

For example, your coding might look like this:

/* Page Structure
----------------------------------------------- */
#outer-wrapper {
width:740px;

margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:480px;

float:left;
background:$mainBgColor
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;

#sidebar-wrap {
width:240px;

float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;

In the above example the overall blog width is 740px. The main posting section is 480px and the sidebar is 240px. If you add the main posting section and the sidebar together it equals 720px. You don't want it to equal the overall width of the blog or 740px as you want to leave room between the main posting column and the sidebar column. In this case you're leaving 20px.

So, let's say you want to change the width of your main posting section by let's say 50px. You would add 50px to the overall blog width to make it 790px and add 50px to the main posting width to make it 530px.

Or, let's say you want to add a little to the main posting width and a little to the sidebar posting width. Let's say you want to add 60px to your blog with 30 being added to the main posting width and 30 being added to the sidebar width. First start by adding 60 to the overall blog width to make it 800px. By adding 30 to the main posting width it would become 510px and by adding 30 to the sidebar width it would become 270px. The two now add up to 780px which is still smaller than the overall blog width of 800px so you're still okay for spacing between the two columns.

If you are going to fool around with the template just make sure that you always have a full back-up copy of your template stored somewhere in case you need it. And, always work in preview mode until you are sure that you like your changes. When you're happy with the column widths and they look okay in the preview then you should save it.



Posted by Linda Walsh Originals- "Doll Patterns for Grown-up Girls!"
Linda Walsh Originals E-Patterns - "Instant Download E-Patterns for Grown-up Girls!"

No comments:

Post a Comment