Sunday 13 December 2009

W i d e s c r e e N

As befits this Hi-Def, Widescreen world of entertainment, I've altered my blog layout to become the full-on widescreen experience in glorious 1000-pixel width. Ok, to be honest I was fed up of those huge black areas of nothing at the sides of the blog when viewing it.

If anyone experiences any problems viewing the blog in this new format, drop me a line and I'll sort it out.


Thanks.

5 comments:

  1. Now this is posh. Wish I could do mine the same but I'm scared. lol.

    ReplyDelete
  2. Glad you like it. I like experimenting and I've been meaning to do something about those black areas at the side for ages.

    It was only editing a few lines of the HTML code for the page. You could set up a new empty blog to try it out on. I'm not sure if other blogger templates use the same phrases though, so things might vary, but from what I've seen on other blogger pages, the overall width is set to 660px, the main width set to 410px and the sidebar to 220px as defaults on most templates, so shouldn't be hard to find.

    The overall width is set to 1000px, so any entries in the code below refer to the width of the whole blog area. The #main-wrapper entry controls the width of this bit, where the main body of text lies and #sidebar-wrapper controls the bit over to the right that contains the pic of my ugly mug, followers and favourites, etc. #header entries refer to the title box at the top of the page and #footer refers to the footer. My blog doesn't have one, but I set it the same width as everything else just in case I ever want to use it.

    If you scroll down the HTML and look for each of these sections, then edit the lines which contain the number of px for the width of each section:

    #header-wrapper {
    width:1000px;

    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    max-width:1000px;

    #outer-wrapper {
    width: 1000px;

    #main-wrapper {
    width: 650px;

    #sidebar-wrapper {
    width: 300px;

    #footer {
    width:1000px;

    ReplyDelete
  3. Forgot to say, all you have to do is change the amount of px for the width. Nothing else needs changing to widen things.

    Also blogger allows you to click on the preview button and you can see a version of the changes without actually saving them. But for the faint hearted messing about with a completely different blog is probably best.

    ReplyDelete
  4. I forgot to mention, since google analytics says that only 2 percent of my readers have accessed the page with a screen resolution less than 1024 pixels, I should be safe from criticism....

    I bet a large proportion of that 2 percent is me trying to access my page using my old Sony Ericcsson 750i mobile phone with opera mini. Not a gloriously successful combination.

    ReplyDelete
  5. Obviously its so simple I didn't find it. Actually theres a whole raft of ideas for making tweaks to blogger templates out there at the whim of a google search. I spent an hour browsing them this afternoon. Some easy, some not so easy, especially the ones involving adding HTML into the template. I'll stick with easy for now.

    ReplyDelete