Saturday 6 November 2010

BYO Background (use a background image of your choice!)

This is something pretty special!

I have created a pretty generic simple naked template that is waiting for a background image you have or may want to use.

It's pretty simple to do, but in a nutshell: this template is a blank canvas and with a few edits you can fully customise the colour of the header and the background image and it can be easily transformed.

1) Install the template (as per normal):



YES! IT IS COMPLETELY BORING!
(settle down, we'll now jazz it up)

2) Find a background image you'd like to use on your blog. Of course it's your responsibility to make sure it can be used for a personal (or commercial) site.

For this example, I want to use this background by Totally Severe.


{STOP THE PRESS: Just look at some of the freaking amazing backgrounds you can find on Totally Severe here, here and here! I AM IN LOVE!}


3) Download the image, save to your computer. You will need your own image hosting. I like Photobucket. It's free. Whilst Totally Severe seems to already host their images on Photobucket, it's good manners to host images for your own site yourself.

Log into Photobucket (or similar), upload your image and then grab the direct URL address of the image:




4) Put the background image code into your blog.

Go back to blogger and click on the "Design" > "Edit HTML" tabs.

Scroll down the big box of code until you find the /* ---( page defaults )--- *:

*/ /* ---( page defaults )--- */
body {
margin: 0;
padding: 0;
font-size: small;

text-align: center;

color: $textcolor;
background: #CCC url
() repeat fixed;
background-attachment: fixed; }


You will see there are two brackets with nothing in them (in bold red, above)

Paste your direct image link in between the brackets. My code now looks like this:

*/ /* ---( page defaults )--- */
body {
margin: 0;
padding: 0;
font-size: small;

text-align: center;
color: $textcolor;

background: #CCC url
(http://i200.photobucket.com/albums/aa231/free_blogger/redfruit.png) repeat fixed;
background-attachment: fixed; }



Click SAVE.

5) Add your header colour background

In the zip folder you downloaded, you will see a folder called "HeaderImages". Have a look in there and you'll see loads of different coloured header images. They all have curved corners:


(many more colours in the folder)

Pick one you like (or better still, pick on that matches your background image).

Click on the "Design" tab and then "Page Elements".


Follow these instructions (click for a bigger image):




THAT'S IT!

I added the red header image background and this is now how my test blog looks:




(click for a live preview)

Note: you can easily change the header text colour and sidebar bottom border colour by going to LAYOUT > TEMPLATE DESIGNER > ADVANCED. You will be able to change the colours to match your background there.


ALTERNATE HEADER IDEA: Why not take the header image and add your own text in a graphics program to reflect your own header title? It would look fancier this way! ..... then when uploading it select "Instead of title and description". Let me know if you want more info on that but it's pretty simple.


"OK Sharnee, that's amazing now please tell me where to get some awesome backgrounds from!!!!!!!"


SHOW ME WHAT YOU DO! I WANT TO SEE!

Any questions or confusion, let me know!

PS: It's also a good idea to give the artist of your background a link, in the sidebar or footer. Don't forget ;)

PPS: Yeah I know I can't spell cappucino
!

36 comments :

  1. You are just too gorgeous for words..definitely going to give this a go :) Thanks lovely x

    ReplyDelete
  2. hey there's colour lovers for backgrounds and colors too!

    ReplyDelete
  3. Anna: aww thank you :)

    Tharangni: Yeah but I think 90% of colour lovers is kind of crap. Some good stuff in there but mostly crap. Those links above, as far as I'm concerned, are heaps heaps better!

    ReplyDelete
  4. You rock my socks so much it tickles. I love this. How did you know I was planning to change backgrounds with the season?

    ReplyDelete
  5. hey dear,why i can't download this templates :(

    ReplyDelete
  6. hi! How can I make the post body for this template transparent? Thanks!

    ReplyDelete
  7. my email's karissasimon@rocketmail.com
    I'd really like it if you could guide me on how to make the post body transparent. Thank you!

    ReplyDelete
  8. Hi Karissa: you will have to make a transparent PNG background image to replace the white (inner) blog area. It's not impossible but getting the right transparency might be tricky. Sorry I don't have time for custom tutorials :(

    Oh, and don't forget you will have to re-make the header image too.

    ReplyDelete
  9. hi sharnee...
    Thanks for your template and your tutorial. It is easy to follow.
    I have applied it to my blog: http://le-marriage.blogspot.com/

    Can you post another tutorial about how to change the header font, beside from the blogger default (template designer)?

    Thank you,
    andin - Indonesia

    ReplyDelete
  10. Hi Sharnee,

    Thanks for the tutorial, it's easy to understand, especially for me :)
    I've applied it to my blog: le-marriage.blogspot.com and andin-hcm.blogspot.com.

    I have a request, if you don't mind, please write another tutorial about how to change the header font for this template, beside from the default blogger designer?

    Thank you very much,
    andin - Indonesia

    ReplyDelete
  11. OMGG. Sharnee, it's really cool and pretty easy (; And i put some of my own post dividers and sidebars dividers (: check out mine :D

    http://heyitsmehuda.blogspot.com

    ReplyDelete
  12. Hi Sharnee!

    I just wanna say THANK YOU so muchh for all the templates.

    Sharnee, is there a way that I can change this template to 3 column template? I've been searching 3 column templates from other website but I like NONE! :( still, your website is the best! :D

    Btw, this is my blog:
    http://honeysmoochie.blogspot.com/

    ReplyDelete
  13. I LOVE this. I put it on my blog and altered a few things. It is just beautiful. The only problem is that the picture I want to us for my headers is not centered and it is driving me crazy! Is there a way to fix that? I am pretty savy with html code. Thanks so much!!!

    melodyepellegrin[at]gmail[dot]com

    ReplyDelete
  14. Me again. Is there a way to keep the reactions tabs and share tabs with facebook, Blogger, Twitter, etc and the end if each post when using these templates?

    Melodyepellegrin[at]gmail[dot]com
    http://melodysvoice.blogspot.com/

    ReplyDelete
  15. sharnee, how to put a fading tooltip on this one? ASAP

    ReplyDelete
  16. Thanks for this wonderful template!

    ReplyDelete
  17. hye sharnee (^_^)

    what a wonderful template u've made! i am using it since 2008. the first blog for my daughter. but now, i only maintain one blog, that is http://linsharliana.blogspot.com. i really like your font. it makes my blog looks clean and easy to read. thank you very much!

    i have one problem. blogger now provide a (read more) button in their post editor. so we can choose where to put the (read more) links and when we can use the (read more) links so no more (auto read more) link for every post. but your template make it invisible. and i dont know how to edit the coding. can you help me? =)

    thanks. my email: linsharliana@gmail.com

    ReplyDelete
  18. this is all i'm searching for! much thanks! :D

    ReplyDelete
  19. hey you, thanks so much for this BYO. ah. i really like your site but the problem is sometimes your templates are girly looking \o/ but other than that, this is just awesome.

    ReplyDelete
  20. is there a way that I can change the width of the sidebar border? perhaps to make it slimmer?

    ReplyDelete
  21. Thank you, sweetie :) So much!

    ReplyDelete
  22. Elise: YES GOOD QUESTION!!!

    To change the width of the sidebar border, follow these instructions:

    1) Go to DESIGN > EDIT HTML. Scroll down through the big box of code (or search) for the following:


    h2 {
    padding-top:10px;
    padding-bottom:10px;
    font: 21px century gothic;
    letter-spacing:.1em;
    color:$sidebarcolor;
    text-align: center;
    border-bottom: 4px solid $sideb;
    }

    (please note that the "$side" is the colour of the border and this can be changed by going to the "Template Designer" tab under DESIGN.

    2) Here is how to make some common (easy) changes....

    If you want to have NO UNDERLINE BORDER:
    border-bottom: 0px solid $sideb;

    If you want to make the border 1px thick:
    border-bottom: 1px solid $sideb;

    If you want to make the border 2px thick + dotted
    border-bottom: 2px dotted $sideb;

    If you want to make the border 1px thick and dashed:
    border-bottom: 1px dashed $sideb;


    HOPE THAT HELPS!

    ReplyDelete
  23. Hey Sharnee, thank you so much for this. I've been editting my blog all day now and I'm rather happy with it.
    Just one question though.
    Even though I have marked my settings not to show my category labels, they still appear. Is this because of the blog template?
    If so, do you know how I can remove them?
    Thank you!

    ReplyDelete
  24. Oops, sorry! Forgot to leave my email! It's lilfi.loves@gmail.com

    ReplyDelete
  25. I love this site. You are so talented! Here's my newly remodeled blog, with your ideas and some of my own. Thank you so much!

    http://leavingmynets.blogspot.com/

    ReplyDelete
  26. Thank you so much for making all these templates! I used this one for my blog and had a great time customizing it, you should check it out!!!

    whitspeaks.blogspot.com

    :)
    Whit

    ReplyDelete
  27. Hello!

    I´m a huge fan of yours and I´m are here to show you what I did:

    http://ukhood.blogspot.com/

    It´s simple but it reflects my style.
    Thanks and keep the good job!

    Have a nice day!

    ReplyDelete
  28. You are the BEST, I love each and every one of your templates! I don't know a ton about html and installing this was super easy - my next step is to learn how to make a freaking header! Thank you!

    youaremycolor.blogspot.com

    ReplyDelete
  29. www.searleshenanigans.blogspot.com

    Thank you!!! Check it out!!

    ReplyDelete
  30. sexualsoundsin-autotune.blogspot.com

    For some reason, my posts keep repeating..I'm not sure if this has something to do with the template or maybe it's my blog (sometimes it's funny like it) but I was wondering if you could look at my blog and see what the problem might be? Thanks so much! :D

    Your templates are absolutely adorable, btw! <3


    -Rae

    ReplyDelete
  31. Hi Rae,

    Please read this for a fix:
    http://www.yummylolly.com/2010/02/keep-your-widgets-when-changing-your.html

    Cheers

    ReplyDelete
  32. love this! you're so generous to share your abilities with the world. thank you! here's what i'm working on.... http://enie-mittendrin.blogspot.com/ still tweaking things here and there, but it's coming together thanks to you. :)

    ReplyDelete
  33. so how do i change the width of the post windows? i'll go search the webs for info on this.
    i plan on posting a lot of pictures and my grandparents will be reading our family blog a lot. they're not fit enough to follow links to where they can see bigger pictures, so i'll want to post the pics in x-large size, which, if i have them centered, unfortunately cuts off a couple of pixels at the right. :(
    i'm determined to figure it out though. really, i should learn html so i can do ALL of this cool stuff myself.

    ReplyDelete
    Replies
    1. Ah I see what you mean and I am sorry about that.

      Go to the TEMPLATE DESIGNER tab in Blogger and click on Advanced and then in the second column, scroll down and add custom CSS.

      In the window add this:

      #main {
      width:650px;
      }

      #sidebar {
      width: 220px;
      }

      You can adjust as need be, but the total shouldn't go over 870.

      Good luck!

      Delete
  34. Thank you thank you thank you! My pretty blog and I are so happy. http://almondmilkandhoney.blogspot.com/

    ReplyDelete

If you're having issues, PLEASE leave an email address I can contact you on - and also don't forget to leave your blog URL. Please also read my FAQ which are >>> HERE

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

Thanks for reading,
Sharnee