How to Change Your Blog Background

Okay, I think I finally have my blog background directions complete! As an FYI, I spent many, many, MANY hours figuring all this out when I first started and there were lots of tears along the way (only kind of kidding), so it may take you more than just one sitting to get this all worked out. I suggest you first try this on a tester blog, one that you won’t mind if things get all crazy and mixed up. That way, you won’t be screaming mad if anything bad happens to your own blog. Hopefully all these directions make sense!

Step 1
1. First, choose the template you would like to use under the Layout tab and then Pick New Template. For this example, I used “No. 897”.
2. Next, under the Layout tab click on “Edit HTML”
3. You’re going to see a whole bunch of gibberish…scroll down until you see:

*/

body {
background-color: #ccc;

4. You are going to replace background-color: #ccc; WITH background-image: url(http://i202.photobucket.com/albums/aa14/katieleesabin/clove_016.jpg); background-attachment: fixed; (copy the entire thing)
5. It will end up looking like this:

*/

body {
background-image: url(http://i202.photobucket.com/albums/aa14
/katieleesabin/clove_016.jpg); background-attachment: fixed;

6. Click on Preview, does your background look like my homepage? If so—GOOD!
7. Now comes the part where you get to choose your own background and upload it…
8. (Keep this page open while doing the next part so you can quickly come back to it)

Step 2 - Finding/Uploading a Background

1. Find the paper you would like to use…I have found a lot of great FREE papers from these sites:
a. http://www.designerdigitals.com/ddgallery/showgallery.php?cat=531 (you need to create a log in to be able to download the free stuff)
b. http://ggdigitaldesigns.com/free_stuff.htm (I think their free stuff changes every so often…)
c. http://www.shabbyprincess.com/ (lots of great kits here)
d. My current background is a piece of real paper that I scanned into my computer
2. Once you have found your paper, you need to upload it to an online photo site. I use Photobucket.
3. Create an account and upload your paper (try uploading the paper in different sizes too—Photobucket changes the size for you on their site, below the add box)
4. Once your papers are uploaded, click on the Direct Link code below the paper, the link will automatically be copied
5. Go back to your blog…on the Edit HTML page
6. Highlight and replace the web address AFTER the url and in between the beginning and ending parentheses.
7. So, it started out looking like this (with my url address):
a. url(http://i202.photobucket.com/albums/aa14/katieleesabin/clove_016.jpg)
8. One you have replaced it with your own link it will look more like this:
a. url(http://i202.photobucket.com/albums/aa14/katieleesabin/SummerDriggs_Relax_DamaskPaper.jpg) and of course it will be your paper!
9. Click on Preview, is it the background you uploaded?
10. If so—GOOD! Now click Save Template
11. If not—email me! Or call me!
12. On to the next step…

Changing colors and what not…

1. Okay, the majority of this step is pretty darn easy …
2. After clicking on Save Template, go to the Fonts and Colors tab
3. If you want a white background, change the Main Background Color and Sidebar Background Color to white
4. Make any other color changes and font changes you want, then click Save Changes
5. Now, you will notice there are 2 little curved colors on the white background, along with a grey shadow along the right side of the white background. To fix those 3 things, go back to Edit HTML
6. First, scroll down to:

/* Page Structure
----------------------------------------------- */
#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #999;

7. All you need to do here is delete the 999. This gets rid of the grey outline.
8. Second, scroll down until you find:

#main-wrapper {
background: $mainBgColor url("http://www.blogblog.com/no897
/corner_main_$startSide.gif") no-repeat $endSide top;

9. Delete all of the green text so it looks like this:

background: no-repeat $endSide top;

10. Last, go down a little more until you find:

#sidebar-wrapper {
background:$sidebarBgColor url("http://www.blogblog.com/no897
/corner_sidebar_$startSide.gif") no-repeat $startSide top;

11. Delete all of the green text so it looks like this:

background: no-repeat $startSide top;

12. Click on Save Template and view your blog. Does it look right? Hopefully it does!
13. The very, very last step is to make your own beautiful blog header! Robin, I think you just need to come over some day and we can make one together, or have me or Nicole create you one.

My brain power is completely shot now after writing this all out so I hope everything works!

How to Change Your Blog Background