2 Lines of Code

You guys remember how Blog Sutras used to look like right?

Here is a picture of it just to remind you :)


Ok, so to go from that look to this one involves just changing 2 lines of code!! Yup, it's true! :)

It's really easy... and you will love the brand new look your blog will sport!

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:


For Blog Sutras, I have used Wood2 texture. I simply click on the Direct Link box. It will get highlighted and say "copied" next to it. Now you can paste that code wherever you want.

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/ll26/bawandinesh/wood2.jpg);

Basically you are going to paste in the url of where your image is... The above is to get the same image as Blog Sutras is sporting right now :)

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.

Here is what it looked like with Blog Sutras: Pretty and ugly huh? :)


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; (this is the current Blog Sutras post background colour)

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!!

The final look for Blog Sutras:



Please send me screenshots of before and after from your own blog... You can send them to blogsutras@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 :)

Rupal is ready to design custom headers for your blogs. She will be charging Rs 2000 or USD $7 for it. You need to tell her exactly what you want, and she will do it. She can be contacted at rupal.x@gmail.com

She is the person designing stuff for this blog...

Have a great week!!

Jai Gurudeva!
love
bawa