Change Blog's Background

Again, i am assuming you are working with the Minima template and using firefox 3:

First off, we will change the background:

The extremely tough part:

You will need to choose a background for your blog. There are many ways of doing this:

You could go here and choose any image and download it in jpg format (they are already in jpg format on this site). You can search for textured background, or floral background and check out the sites that come up... You could simply scan a pretty paper or crumpled fabric or whatever and save it as a jpg on your computer. It's important to save it as a jpg on your computer. But you should have figured that out by now...

Now go to your account on photobucket. You did create it, didn't you?. If you didn't, create one, store your user name and password somewhere safe, etc etc. Upload the jpg image there. You should have a screen looking something like this one once you upload it:


Now we get to the easy part...

1. Click on Customize on your Navigation Bar (Look at the top right of your blog)
2. Click Layout
3. Click Edit HTML
4. Put a check mark on the Expand Widget Templates box (not needed, but its a good habit)
5. Click Download Full Template (ALWAYS do this before attempting anything please)

If you start to scroll down in the box where the HTML stuff is written, after the first section of comments and things you will come across a lot of "Variable Definitions". Directly after that you will see:

body { background:$bgcolor
etc etc (you will not see the etc :))

Alternatively you can search for body{ and it will highlight on your screen. Press command+f on a mac or ctrl+f on a (ugh) PC, and type whatever you want to search for on a page, if it's there, the cursor will jump to that place and highlight it. Nifty trick huh?!

Now you remember that thing we had copied off earlier from photobucket? Paste it in so that it reads as:

body {
background: url(http://i284.photobucket.com/albums/ll11/xyz/xxx.jpg);

Basically you are going to paste in the url of where your image is...

So, the syntax is

body { background: url(http://your-image-hosting-service.com/image.jpg);

Notice that the ( brackets need to close. and remember to put the ; at the end of the line.

And you are done!

If you preview your template now, you will have the background set as the image of your choice tiled without overlap or anything!! BUT Your text will be superimposed on the image. This can be great if you are using a really big picture of some landscape for example. But usually it just becomes unreadable.



So we go to the next step of changing the background colour of the place where you are posting.

Find #outer-wrapper {

Under it, look for the line starting with the word background, replace it with

background: #CC9966;

If that line is not there, simply add the above line right below #outer-wrapper {

So it will look something like this:

#outer-wrapper {
width: 660px;
background: #CC9966;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

As usual the blue is what was already there, the green is the modification

Note: That #CC9966 is a hexadecimal number (if you don't know what that means, attend a Mathemagic workshop with me) representing a colour. You can use numbers 0-9 and letters A-F to experiment with the different colours it makes, it always has to have 6 characters there though... or you could head here and see what codes are for which colours.

Once you have put in the colour code you want, preview the template and see how it looks. Play around till satisfied...

Save template and voila, a brand new look!!



Please send me screenshots of before and after from your own blog... You can send them to crusher115@gmail.com

Next week, we are going to play with making the post area and the sidebar bigger (or smaller)... Do you like the new Header and the expanded size of the post area? Possibly, we will also learn how to make a better header... If you see the changes happening here, know that the tutorials for the changes are coming soon :)

I am ready to design custom headers for your blogs. I will be charging Rs 2000 or USD $7 for it. You need to tell me exactly what you want, and I will do it. I can be contacted at crusher115@gmail.com


Enjoy!

Crusher

Source