Tuesday, November 16, 2010

Tutorial: Using free backgrounds in the Watermark Template

Do you use the Watermark or Simple template from the Blogger template designer? Have you tried to install free backgrounds with a disappointing end? Mostly free backgrounds are catered toward the Minima template. Which is fine unless you've fancied up your template using the template designer!

Today I'm going to show you a simple trick for using free backgrounds in the Watermark template. You can click here for an excellent tutorial on how to install free backgrounds to the Simple template.

First things first, back up you current template using Amy's awesome video tutorial, here!!

Now on to business.
Right now your blog will look something like this.
Photobucket


If not, head over to the template designer and click the pink thumbnail on the very right and apply it to your template.
Photobucket


STEP 1: In the template designer click backgrounds and remove image.
Photobucket


Apply to blog and then click back to blogger.
Photobucket


STEP 2: In another window open up the 3 column freebie backgrounds from Designer Blogs.
Notice the new Christmas backgrounds!!! YAY!
Highlight the code below your desired background and copy it using ctrl-c or right click using your mouse.
Photobucket


STEP 3: In your blogger layout page click add a gadget and then add HTML/Javascript
Note: Be sure you add the gadget to your footer or move it there after. You don't want the Designer Blogs button covering any sidebar gadgets you may have!
Photobucket


STEP 4: Paste in the copied code and save!
Photobucket


Ugh... but this is what you see on your blog now.
Let's get rid of that huge pink rectangle, shall we?!
Photobucket



STEP 5: Back in your layout page, click edit HTML and search for this line:
<Group description="Backgrounds" selector=".main-inner">
Photobucket

STEP 5: Change the color codes in red to say transparent. DO NOT delete the quotation marks.
<Group description="Backgrounds" selector=".main-inner">
<Variable name="body.background.color" description="Outer Background" type="color" default="#c0a154" value="#ee1133"/>
<Variable name="footer.background.color" description="Footer Background" type="color" default="transparent" value="#ffcccc"/>
</Group>


Now your code will look like this:
<Group description="Backgrounds" selector=".main-inner">
<Variable name="body.background.color" description="Outer Background" type="color" default="transparent" value="transparent"/>
<Variable name="footer.background.color" description="Footer Background" type="color" default="transparent" value="transparent"/>
</Group>


Save and view your blog!!!
Photobucket

TA-DA! A new fancy background for your Watermark template!
Enjoy and happy blogging!

Please leave a comment or email us at info@designerblogs.com if you have any questions or would like to suggest an idea for a future tutorial.

5 comments:

  1. This was so helpful. Thank you so much for posting this! I just posted three of your Christmas backgrounds on my three blogs!

    ReplyDelete
  2. This is wonderful background of watermark template.

    ReplyDelete
  3. Thank you very helpful...I would like to know how to add a header design. I have one but not sure how to make it to the top of the page? Thanks

    ReplyDelete
  4. said...

    thats cool , also very helpful tq

    ReplyDelete