Editing CSS in the Template Designer

Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style sheets (CSS). To add custom CSS snippets to your template, simply open the Template Designer and add your code to the field located in the Advanced | Add CSS tab. Changes you make will reflect instantly in a live preview beneath the editor.

Note: Editing CSS allows you to change the look and feel of your blog. For changes to the actual content of your blog, including the adding of gadgets or changes to the layout, please use the Edit HTML field located in the Layouts tab. Also remember that, like other customizations, your CSS will be removed if you change designs.

While CSS allows for an almost unlimited number of style customizations, here we'll just go over a couple of the most popular CSS tweaks so you can get a sense of how these changes can be made. For a more comprehensive list of various CSS tweaks, please see the 'What can I do with CSS' article in our Help Center.

The first CSS change we'll go over is how to center the header text on your blog. Head over to the CSS field located in the Advanced | Add CSS tab in the Template Designer. Once there, simply drop in the following lines of code:

.Header {

text-align: center;

}

Once you've added the code, you'll notice that your header text image will instantly change to centered alignment. If you like what you see, just click the orange Apply to Blog button and your header image will be saved. If you ever decide to remove or change the header image at a later point, it's as easy as deleting or swapping out the image code from the field.

The second CSS change we'll cover is how to add your own background image to your blog. For the sake of being comprehensive, we'll assume that your image isn't already hosted on the web, and go over instructions for how upload your image to a filehost so you can link to it. Here are all the steps necessary to take your own image from your computer and use it as a background image for your blog:

1. Compress your image.

You'll need to make sure the filesize of your image is under 250K, so the first step is to go into your photo editor of choice and compress the image down to fit within that limit. Alternatively, some image hosts such as Imgur provide an option to compress your image to a certain filesize before uploading.

2. Upload your image to a filehost. In order for you to add a background image via CSS, you'll need a working link to your image. If it isn't already on the web, you'll need to upload it from your computer to a host which will serve the image. Picasa Web Albums, Imgur, and Photobucket are all reliable options for your image hosting. Simply navigate to the host of your choice, and follow their directions for uploading.

3. Add the image background CSS snippet. Now that you have a compressed, uploaded image you will be able to add the CSS for using it as a background for your blog. Here is the code:

.body-fauxcolumn-outer {

background: url(http://www.example.com/image.png); }

.body-fauxcolumn-outer div {

background: none;

}

4. Apply to blog! If you like what you see, go ahead and click the Apply to Blog button, and you're done! Of course, you can always come back and remove or swap out the background image code if you like.

Note: Templates with gradients (such as Simple #1) may slightly conflict in appearance with the use of a background image.