These days I spent many hours designing and creating my template because I want to make it look professional and beautiful. I`m still working on my template but soon it will be ready. During this time I used many effects like changing an image on mouseover (hover). This can be done with three methods ,one using a short javascript code and one using a bit longer CSS code, one using CSS sprites.

1. Using javascript
This code doesn`t need any CSS code , just change the URLs of the images.

<img src='http://first-image.jpg' onmouseover="this.src='http://second-image.jpg'" onmouseout="this.src='first-image.jpg'"/>

2. Using CSS
This method is more advanced, place the first piece of code , the CSS part right before ]]></b:skin> ,the HTML part of the code can be placed anywhere between <body> and </body> or even inside a gadget (sidebar).
The CSS part of the code:

.class-name {
display:block;
background-image:url(http://first-image.jpg);
width:100px;
height:100px;
}
.class-name:hover {
background-image:url(http://second-image.jpg);
}

The HTML part of the code:

<a class='class-name'></a>

NOTE: Use the same class name at both of codes , you can use any name. Change the width and height attributes to the size of you image , if the first and second images have different size place the width and height attribute of the second image after the line with the URL of the second image.

3. Using CSS Sprites
I will write more about this method in another post more detailed.

Related tutorials:

Read more...

Change the background of your blog to any color you want, or even change the color with an image. First you need to understand the structure of your blog template. The header, the sidebar, the posts and the footer are in the outer-wrapper. The rest of the page is the body. Changing the background color of the body will change the background of the outer-wrapper, too, but the background of the outer-wrapper can be changed separately ,so it`s possible to use different backgrounds for the body and the outer-wrapper.

1. First let`s change the background of the body: Go to Layout, Edit HTML Find the following code:

body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }

Look for the line what i have marked with red, the rest of the code may be different.

Replace the background:$bgcolor; tag (this may be different, just look for the first part of the code: background:) whit one of the following codes.

1. Use a color:

background:#000000;

or

background:rgb(0,0,0);

Here is a list of HEX and RGB colors to use.

2. Use an image:

background:url(http://the-url-of-the-image.jpg);

2. Now let`s set the background of the outer-wrapper:

Find the following code:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Search for the first line of the code , the rest of the code may be different.

Now just do the same as at the body.

And don`t forget to save your template.

Related tutorials:

Read more...