11 A cheats' guide to customising Blogger templates Wednesday, January 9, 2008 /

I'll be honest with you: designing a complete blog template is not an easy task. It certainly isn't a quick one!

Throughout the whole Blogger Template Design series, I will take you step by step through the entire process I use when designing a Blogger template, from the initial plans and considerations right through to the final tweaks which will make the template your own.

Altogether, I imagine this series will become quite long, so as a taster of what is to come, I'm offering you A Cheats' Guide to Customizing Blogger templates: a few quick tips which can help you transform your blog from this:

to this...

in as little as an hour!

For this example, I'm going to use the default Minima template provided by Blogger. However, the examples used here could easily apply to any blog template.

In total, we are going to make three major changes to the overall appearance of the blog:

1. A new header image


2. A new background pattern


3. A plain colored background to the main content of the blog

I'm sure you'll agree from comparing the before and after screenshots that these changes make the template seem vastly different to the default one!

None of these changes are particularly technical (I'll cover such aspects in later installments of this series). Instead these techniques will be easy to learn and use, even for absolute beginners!

Before you begin!

Be sure to make a complete backup of your existing blog template, just in case you make a mistake or would prefer to revert back to this at a later time.

To do this, go to Template>Edit HTML and click on the "Download Full Template" link near the top of the page. Save the XML file to your computer, and ensure you are able to access this later.

Making a new header for your blog

In my opinion, one of the simplest and best customizations you could make for your blog is to customize your header. In this part, I will offer you a quick and easy way to make your own clickable header image.

Finding the width of the header

Before creating a header image, we need to know the width of the header section in the existing Blogger template. This prevents the header image from being clipped or malformed when it appears in the completed design.

To find the width the header image should be, go to Layout>Edit HTML in your Blogger dashboard, and look for the following line:

#header-wrapper {

Just below this line, you should see the CSS statement for the overall width of the header. In the default Minima template, this appears as follows:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

From this information, I know I need to make my header image 660 pixels wide. This may differ for your own template, so be sure to check the width of the header wrapper in your template code to be sure you have the correct width.

The height of your completed header image does not matter. You can make this as tall or as short as you like, though I would advise that header images taller than 300px prevent any blog content being seen beneath it in some internet browsers.

Making your header image

Those of you who are experienced with image creation and editing may now be racing off to create their very own unique header image using their header dimensions. For those of you who are not so familiar with CorelDraw or Photoshop, an alternative would be to use a free header banner and adapt this to your needs.

In the example above, I downloaded a free vector header from BitBox and resized this to 660px wide using GiMP (a free image program sililar to Photoshop, but without the price tag!). Here is the resulting image (click on the image for a full sized view).

For this "cheats' guide", I would advise you to add your blog's title or logo into your header image. This is because there may be problems when using your image as a background behind the title and description (I will explain this fully in a later post).

Again using GiMP, I added some test to my header image, and here is the finished result, saved in GIF format:

Adding your header image to your blog

This quick method of creating a blog header is the simplest one of all. Just go to Template>Page Elements in your Blogger dashboard, and click on the Header widget near the top of the page:

On the popup screen, you will see options for using your own header image. Select the radio button to upload an image from your computer and locate this using the "browse" button. Then check the radio selection which says "Use instead of title and description. Finally save your settings.

Using this method, your image will be hosted by Blogger, and will appear instead of your regular title and description, like this:

Note: in the Minima Template there is a glitch in the CSS which can make the header appear slightly misaligned. This is easily solved by changing the margin of the #header statement from this:

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

To this

#header {

margin: 0;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

By now, you should have your brand new header image in place of your default textual header. This was probably the trickiest part of "The Cheats' Guide", so now we'll get on with something a little easier to achieve.

Using a background image

For my demonstration template, I decided to use a tiled floral background image which blends well with the colors in the header. There is a wonderful selection of free tileable background images available for download at SquidFingers (in fact, this selection is among the best I've ever seen!), though a Google search for tileable background images will bring you some alternative downloads to try.

Choose your background image

The first step to using a background image for your blog is to find one which you like. I chose this pattern from Squidfingers, though you could choose any image you prefer. You will need to save the background image to your computer as we will be using this very soon.

Upload your image to the web

In order to use a background image for your blog, you will need to upload this somewhere online. One method is to upload this to Photobucket, or a similar free image hosting service. But here is a trick to help you host your images with Blogger for free!

Simply create a new post and upload your image as normal. But don't publish the post, just save this as a draft which you can delete later.

Now preview your draft post. You should see your image displayed in the preview page. Right click this image and view the properties. From here, you should be able to extract the URL of where this image is hosted. Copy this URL to your clipboard or Notepad so you can use this to reference your background image in the template's HTML code.

Now you can safely delete this draft. Choose NOT to delete the image when prompted, otherwise you will be unable to use this URL for referencing your background image.

Alternatively if you choose to upload your background image to Photobucket (or similar hosting service), ensure you have copied the URL of your image.

Adding the background to your template code

We will now need to edit a small part of your template's HTML code to add this image to the background. So go to Template>Edit HTML in your blogger dashboard, and look for the following lines:

body {

background:$bgcolor;

We need to add the URL of your background image to the "background" statement using the following format:

url(the_url_of_your_image)

In my demonstration template, the additional code appears like this:

body {
background:$bgcolor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1SWBmN5ZDFyGamSBzKmnZM6YDrRgjL1a0784uXZypjHJSfSQzMwTCmDpWw3bZAq-C3XV1De1ZQq4XTifyU99Yz1uOXntVfnzhLYyfJxmBsw5mxDg7XpiPq4Kkp_Zou82G-ySsd9w_cmE/s1600-h/pattern_140.gif);

Of course your own URL will be different. Just be sure to follow the same format, and ensure that the semi-colon (;) appears at the end of the statement.

Now preview your blog to see the changes. It may look something like this:

If you are happy with the background, you can then save your template for us to go on to the next step. However, if you prefer not to use this, you can simply click the "clear edits" button and start over again.

Now in my demonstration template, you will notice that the text is barely visible against the patterned background. This leads me to the final customization of this tutorial: changing the background color of the main blog content.

Adding a background color to the main section of the blog

One of the best ways to draw attention to the content of your blog is to place this against a flat, contrasting color. This draws the eyes to the 'meat and potatoes of your blog': your blog posts. So in addition to the background image, we need to place the main content of the blog against a complementary color which will make it easier to read.

We don't need to use any images at all for this, and compared to the previous two customizations this is a minor tweak.

To add this colored backdrop for your blog content, simply locate this line in your template's HTML code:

#outer-wrapper {

In some templates, this may be "#outer-wrap" instead.
Directly below this line, add the following line of code:

background: #ffffff;

This line adds a white background to the main content of your blog (both the blog posts and the sidebar). You can easily use a different color if you prefer by changing the hex value for white (#ffffff) to a different hex value instead. An easy way to find the correct hex value for your chosen color is to use the web color calculator in the Tools section of this site.

In my demonstration template, I opted to use a light blue background (#E3F2FB) to complement the background image. Here is how the whole section of code appears in my template code:

#outer-wrapper {

background: #E3F2FB;

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

To make the foreground stand out even more from the background image, I also added a border to the left and right hand sides of the outer wrapper, which can be achieved by adding the line in red to the outer-wrapper style statement:

#outer-wrapper {

background: #E3F2FB;

border-left: 2px solid #cccccc;

border-right: 2px solid #cccccc;

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

And here is the finished result:

Final adjustments...

Once these main customizations are complete, you may wish to change some of your fonts and colors to better match your new design. I changed the post title colors, the link colors and the fonts to end up with my final design:

These simple customizations can easily make a default template into something unique to you!

These three customizations are the most noticeable and easily achieved customizations you can make.

You may also be interested to read some of my earlier tutorials which can help you add to these basic customizations and begin to edit your template even more:

• Add three columns to your footer section


• Create navigation buttons


• More ways to customize your header


• More ways to use background images

Coming soon...

In the forthcoming posts in the Blogger Template Design series, I will expand on these basic customizations and guide you through the more advanced techniques of template design. Each post will fully explain one particular technique, building up to a complete step-by-step guide.

The next post of this series will explain the preparations and tools required for creating your own complete and unique Blogger template.

To ensure you are updated about the new posts in this series (plus other Blogger news), be sure to subscribe to the blog feed.

As always, I appreciate your comments and opinions about my posts. And if you have used this Cheats' Guide to create a more personal template of your own, please do leave a link to your blog so we can take a look at the final results!