Friday, August 20, 2010

How to use free backgrounds in Blogger's new template editor.

Posted by Dawn Farias

Have you tried using a fabulous free blog background on the new Blogger templates only to be disappointed with the final outcome?  I am going to help you with that today!

In the past, Blogger users have mostly chosen the Minima template when applying a free blog background.  It was nice and plain - everything you need to get the final look that you want.  The new Blogger templates have a bit too much.... character for that.  However, there is a shining star that promises the blank canvas that we were used to while allowing us to choose whichever column layout we'd like.  Three columns, one column, multiple footer options - this is what the new template designer has to offer so let the embracing begin!

Let's get started.

Step 0:  Download your current template first!!  Dashboard > Design > Edit HTML > Download full template. (This is an update to the original tutorial.)

Step 1:  Switch to the Simple template.
The path you want to follow is Dashboard > Design > Template Designer > Simple Template > Apply to blog.


You will see the change to your template happen live as you click around.

Step 2:  Find a 3 column free blog background  that you like.
A wide background will allow plenty of room for you to experiment with the different column layouts available.  Today I am suggesting the site Designer Blogs.  They have several 3 column backgrounds to choose from.  I am going with Green with Envy.

Step 3:  Copy the background code.

By clicking inside the code box a few times everything gets highlighted.  Then choose CTRL-C or COMMAND-C, depending on whether you are using a PC or a Mac.

Step 4:  Paste the code into an HTML widget from your Blogger Page Elements screen.
4a:  Design > Page Elements > Add a gadget > HTML/Javascript

4b:  Paste the code (CTRL-V or COMMAND-V) and save.

Step 5:  View.

Not quite what we want is it?  We need to get rid of the default blue color at top, a shading effect on the lower half, drop shadow effect on the post body and move the Designer Blogs logo to a better place.

Step 6:  Add the Fix It! code.
Design > Template Designer > Advanced > scroll down to Add CSS


Copy and paste the following Fix it! code and then click Apply To Blog.

.body-fauxcolumn-outer .cap-top, .body-fauxcolumn-outer .cap-top .cap-left, .body-fauxcolumn-outer .fauxcolumn-inner, .body-fauxcolumn-outer div {
  background: transparent;
}
.content-outer {
  -moz-box-shadow: 0 0 ;
}

Again, you see the change happen live before you actually save anything.  Also, see that green circle?  Those are all your options for changing link colors and other fun stuff like that.  Explore!

Step 6:  View.

I've moved the Designer Blogs logo to a better place and adjusted my template colors to match the background. Beautiful!!

Note:  I've purposefully chosen a background with a posting area that's very close to white.  In another post I will explore the column layout options with you and give tips for using backgrounds with a patterned or colored posting area.

----------------------------------------------------------------------------

You can find more from Dawn Farias at her site A Bit Bloggish - a place with digital scrapbooking kits, tutorials and tidbits on daily life.  Feel free to follow her on Twitter, too!

11 comments:

Irene said...

I did it! I did it! and it works, wow!
the only thing is, one should stick those lines together,one by one, otherwise whenever I copied and pasted the whole thing it didn't work! thank you so much!

Twitter Backgrounds said...

Awesome tutorial and a great list of free backgrounds you guys have here. Thanks!

Lorrie said...

Thank you so much! My old background disappeared and I have been struggling all day trying to figure out how to put in a new one with the new blogger templates. I was starting to think I may have to hire someone to do it.

Lorrie said...

Ok, I have tried everything in the tutorial many times and I still can not get things to look right. I am very irritated because I lost all the work I had previously done on my blog layout (tabs...) when I added the new blogger template. I don't know what I was thinking by not saving a copy of my html somewhere. Any ideas you have for fixing things would be great.

Dawn by Design said...

Hi, Lorrie - I'm sorry you are having problems with the tutorial! I have updated it to remind others to back up their templates.

I looked at your site and see that you are stuck with the Fix it! code part. I can't be sure where the problem is without seeing you actually do everything, but here are a couple troubleshooting tips that I can think of right now:

1) Are you pasting the code into the Advanced CSS screen and NOT into an HTML gadget?

2) Are you copying and pasting the code directly from the tutorial and NOT typing it in by hand?

Please keep us updated on how things are going.

Dawn by Design said...

Hi, Irene - I haven't experienced that issue. Thank you for sharing in case anyone else runs into the same problem.

Lorrie said...

Dawn,

I have done exactly what you said and I am still having trouble. I will work on it later when I have more time and let you know. Thanks for the help.

Corporate Logo Design said...

good post share i learn many things from this informational post share >keep it up.I love this blog.

Heather (Butterflygirlms) said...

I was having the same issue as Lorrie but once I saw Irene suggestion to the fix..it worked for me!!

If you are having trouble, scroll up and do what Irene said. She is the first comment.

Christine said...

I figured out what Lorrie is getting wrong. I had the same problem, but I clicked on the picture that has the css code. You need to add | above .content-outer.

.body-fauxcolumn-outer .cap-top, .body-fauxcolumn-outer .cap-top .cap-left, .body-fauxcolumn-outer .fauxcolumn-inner, .body-fauxcolumn-outer div {
background: transparent;
}
|
.content-outer {
-moz-box-shadow: 0 0 ;
}

Carrie and Mike Groff said...

Hello! I'm a new follower..found your blog on another blog :-) I'm looking for creative ideas for a new header for our blog. Our blog is: http://livingahealthybeachlife.blogspot.com My husband and I are in a network marketing business and our main goal is to retire before we turn 30 and live in our dream beach house. Any suggestions for a cute header would be great! Look forward to learning more here on your blog!

Post a Comment

I appreciate you taking time to comment.