Align Blog to Left

Align Blog to Left

Why align your blog to the left? It kinda looks a bit odd and old fashioned. Maybe, but one thing we (and I) forget sometimes is that not everyone has wide screen modern computers. A lot of people in the world have old computers and small screens. And Bloggers tend to like bigger and bigger blogs. Sure a center aligned website will compress to the left automatically on a smaller screeen. However, there are a large number of customized templates about. Some of the blogger customing templates don't function that well (they look good though). And it may well be that in an old version of Internet Explorer, for example, the website does not move left automatically, in which case the viewer will have to scroll right and that is a No No. Also, personally, I like the practicality and functionality of a left aligned website. Many important sites are still left aligned.

I think it pays to check what we do on an old computer with an old browser. This will show up faults that Firefox hides. Firefox is smart and tolerant. Old I.E is awful and renders websites relatively poorly but we have to accommodate these computers.

So this is what you do to align your site to the left:

  1. Go into the Edit HTML window
  2. Make sure you have a saved version of your code on hard drive (use "download full template" if you haven't)
  3. Press Ctrl F to bring up the search box bottom left of screen
  4. Cut and paste this piece of code into the search box: #outer-wrapper {
  5. You immediately get to that part of the code (painted green).
  6. Scroll down slightly and place the red code in the position indicated (the code comes from the modern Blogger Minima template):

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
float:left; margin-left:20px;
text-align:$startSide;
font: $bodyfont;
}

The left margin can be reduced or enlarged by changing the number of pixels. So for example a zero left margin would be:

margin-left:0px;

Then preview before saving the template. This website is left aligned because I found that in old IE it did not left align automatically in a small screen on an old computer.

Comments

Popular Posts