The easiest way to modify a template

The templates were born as a way to make good design (and not very good) available, either to users with experience in design, and those that just want a nice place to communicate without worring too much about web development, and this article is for those users.

Almost every template has an element that, if changed, can modify the way it looks: images. We can find as headers, backgrounds, margins, icons, text, and so on. And can be added to the template in two different ways:

1. As a background: at present time, it’s the most common way to add any image to a template, and it’s usually located in a section or file named CSS.
2. Direct: the image is added directly in the code of the template.

So, the easiest way to modify a template is changing these images, and is not difficult at all.

1. The old image.

   First of all, you have to know the name of the image you have to change. To do this, you can save the image, or you can, in firefox, make right-click and go to "See Image", or "See Background Image", where you’ll have the full address, and the name of the image.

   

   Something else, you need to know the size of the image in pixels, so you have to right-click on the image and go to "Element Properties", where you can see the image’s size.

   

2. The new image.

   The only requirement for the new image is that it should be the same size as the original. You can create a new one if you know how to use some image editing program, make changes to the original as a single change of tones or use the cutting of a picture that you already have.

3. Host the new image.

   If you have a hosting account, upload the image. If you use a free service (blogger, wordpress) you can use a free hosting like imageshack.us o photobucket.com. In both cases you will need the direct link to the image.

4. Replace the code.

   For systems where the css is with the rest of the code of the template, like Blogger, look for the image’s addres from the old name and replace with the new direction of the image.

   For systems where the css code is in an external file (like wordpress), go to this file (ends with .css) and make the replacement. If you can’t find the old image’s address, maybe it’s in another css file.

Usually, by changing the background image, and the header is enough to make a big difference, and set the personal touch you wanna give to your blog.

Leer este artículo en español.