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.



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



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



Apply to blog and then click back to blogger.



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.



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!



STEP 4: Paste in the copied code and save!



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




STEP 5: Back in your layout page, click edit HTML and search for this line:

<Group description="Backgrounds" selector=".main-inner">

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


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.