Demystifying Blogger Template Editing

One of the most common criticisms of Blogger templates is that they’re somewhat plain. This is somewhat true, however, it is also one of the biggest misconceptions. If you know where to look, you will find that Blogger’s templates (yes, even the ones in the Templates screen) are almost infinitely changeable to suit any style you might want to have for your blog.

The easiest way that you can change the look of your blog doesn’t even involve changing templates – you can change the colors and fonts used on your blog by using the aptly-named Fonts and Colors screen in your blog’s dashboard. There, you can change literally anything from the color to the text on your page to the color people see when they put their mouse over a link. Each template will have a different set of items that can be changed; for example, on my template (tictac blue) – I can change the text colors, but the background color is set.

When you first view the Fonts and Colors section, you will see the list of changeable elements on the top, and your blog on the bottom. The really cool thing is that when you change something in the top, it is automatically reflected in the bottom half of the screen. These changes, unless you click Save Changes, are only seen by you – not by people who happen to visit your blog at the time.

If you don’t like the changes you’ve made, you can clear the edits you’ve made, reverting your blog back to how it was when you started, or you can revert it back to the default colors for your template. However, note that this will revert all the colors to the defaults set out in the template code.

You can also use the Shuffle blog colors link to take the colors that you’ve used already and shuffle them up. To be honest, I think you’d be better off manually choosing colors than using shuffle – I’ve done it a couple of times and haven’t liked the resulting look.

Something that deserves some special attention is the section in the middle where you select colors. There are two “special” groups of colors that blogger puts in to give you a bit of an assist – Colors from your blog and Colors that match your blog. To the right of that is a set of 65 colors which are generally good colors for a blog.

To the right of that is the Edit color hex code box – that’s if you have a specific color you’ve chosen – likely from one of the great color-picking sites out there – and have a hex code for it. The range of colors that you can have in hex goes from #000000 – black to #ffffff – white, with all other colors represented in between.

Further down the list of items that you can change, you will begin to see some Font-related items – generally, Text font, Page Header, etc. Here, Blogger gives you a choice of six basic “universal” fonts to choose from – Arial, Courier, Georgia, Times (New Roman), Trebuchet (MS), and Verdana. While these fonts are alright, a couple of them are somewhat plain to me – Arial and Courier. Arial is one of those “I see it everywhere” fonts, and Courier makes things look like a typewriter generated it.

Aside from the actual typeface, Blogger give you the option of setting it to bold and/or italic, and you can change the size of the font to be as small or as big as you want. Of course, though, you don’t want to have your font so small or so large that it’s unreadable by your visitors. 😉

Edit HTML

However, Fonts and Colors is just the tip of the iceberg when it comes to changing up your template. The quickest (and for a lot of folks, most intimidating) way to change your blog’s look is by using the Edit HTML screen.

The reason I say that it can be intimidating is that this is the raw code that is used to build your blog’s page. If you make a mistake, you can throw off the whole appearance of your blog. I know that even though I have experience in fixing blogs, I’ve made things disappear completely from blogs while editing templates!

The first thing that you should do when you’re working on the edit HTML screen – especially if you’re doing a major change to your blog’s design – is Download the Full Template. This will give you a file that contains everything in the Edit Template box, so that if you do make a major mistake, you will be able to reupload your template from your computer and be back working again in almost no time.

In the future, I’ll explore some of the more advanced features of the new “widget” based functions of Blogger code, but I’d like to feature some of the more common requests I get about templates.

Changing your blog’s width

There are a variety of reasons why you would want to change the width of your blog – it might only be taking up a small part of your screen. You may have a header graphic that is too wide for your current template, causing it to “hang” over the rest of your blog.

One important thing to note is that all templates are different, so the exact text that you’ll find in your code will be different to the code that I have. However, there are some key words that should be in all templates.

For this example, I’ll use the code from my blog’s template as it is today.

The section that contains my blog’s width information is called “layout structure” – there are a number of subsections here that outline the styles of various parts of my blog.

The first section – #outer-wrapper – controls the overall width of the blog – on some templates, it may have a different name such as #content-wrapper. In general, the width of this section will be the largest number, as it is for the whole blog.

My template has a special background (to the left), so there is a separate #content-wrapper section to tell your browser that, while the blog is 847 pixels wide, the content can only be 763 pixels wide, otherwise it would cover the background image.

The next sections are based on the width set out in your outer or content wapper sections. #main (or #main-wrapper, #main_wrap) is the area covered by your blog’s posts, and #sidebar (#sidebar-wrapper, #sidebar_wrap) is for the sidebar. If your template is a 3-column template, you will have two sidebar sections – called either left/right_wrap, or sidebar1/sidebar2_wrap.

Generally, the widths, along with the padding and margin numbers across the main and sidebar sections will add up to the width in the outer or content sections. In my example, there is actually a space of 4 pixels in the page somewhere.

To change the width of your blog, you need to make sure of a couple of things first – that you don’t have a template like TicTac which has a background image that sets the width of the page to a specific dimension, and that you have an image of what you want your blog to look like.

For example, when I was editing a template from fixed widths to variable widths (you can check out what it looks like here; it is on a dark background), I sat down with a piece of paper and drew out the page as I wanted to see it. I then calculated the various percentages I’d have to use in order to make the page look good.

Another tip is to check your blog’s stats to see what resolution your visitors are using – the vast majority of users now are on either 1024×768 or 1280×1024 pixel monitors, at least for my blog. You might have a situation where a majority of visitors are using 800×600. If that is the case, then you should design your blog to be around 785 pixels wide, so that people don’t see the horizontal scrollbar.

Now that you’ve determined the width you want to set your blog, it’s time to save your blog’s template to your computer if you have not done so already. After saving, you can then begin your changes.

When I adjust a blog’s template, I always start by changing the outer-wrapper or content-wrapper (the largest width in your template). That lays the foundation for the rest of your changes. For the purposes of this demonstration, I’ll change the width in my blog to 1000 pixels.

This is what the blog looks like in preview, after just changing the outer-wrapper to 1000 pixels. You’ll notice that the whole page has shifted to the left, but none of the content has moved.

The next change will be to make the content-wrapper 916 pixels wide (the reason is that the left and right sides are equally off-set by 42 pixels to accommodate the background graphic.

Here’s what it looks like after that change. The main blog has not moved, but the sidebar has gone all the way to the right – that is caused by the bit of text in the sidebar code “float: right;” which tells the browser to put the sidebar as far right as is possible.

Next, I’ll change the main section to be 635 pixels wide. (1000 – 84 – 259 (sidebar) – 20 (sidebar padding) == 637, then I rounded down to have a more “round” number).

This is what it now looks like – the main blog now runs into the area that used to be the sidebar, while the sidebar still has the end of the background image going straight down the middle of the graphic. All in all, it’s not a good look. And even at 1024×768, there’s a horizontal scrollbar – that can be attributed to the fact that the window isn’t maximized, so there are a few extra pixels being taken up by the window border.

For comparison, this is what the page looks like at 800×600.

The important thing to note here is that if you were to have come to my blog while I was doing this experiment, you would not have noticed any changes. This is because I always, always preview any changes I make to my blog before saving the template. Since this was just an example of how to change your template, I can now go and click the Clear Edits button, and confirm that I want to discard all the unsaved changes.

Further Reading

These are a couple of guides for colors, you can put the hex figures into the colors and fonts screen under color hex code:

  • Hex Hub HTML Color Codes – they’ve got the colors split into different groups, such as warms, greens, blues and purples. There’s also a color mixer, but it doesn’t work in Firefox.
  • VisiBone Webmaster’s Color Lab – here, you have what is known as the 216-color Webmaster’s palette, or 216 colors that are “web-safe” – they allow you to see how a combination of colors works as each color you choose is set as the background and the foreground for any other colors you choose

For some more insight on how to put together your template, check out Snoskred’s article Blog Design – Open Your Eyes.

7 thoughts on “Demystifying Blogger Template Editing

  1. Hi!

    In the template I use, images are used as a mode of giving rounded edges to the content box, etc. When I change the width, etc. I need to change the images too (just make them wider).

    The question is, how do I go about making the images wider?

    I downloaded them and rescaled them to the necessary size, but where do I store the images? What link should I put in the “edit hml” section?

    Thanks
    Zzypty

  2. This is somewhat true, however, it is also one of the biggest misconceptions. If you know where to look, you will find that Blogger�s templates (yes, even the ones in the Templates screen) are almost infinitely changeable to suit any style you might want to have for your blog.

Comments are closed.