Tuesday 19 April 2011

BYO Background with Changeable Google Fonts

 

Remember BYO Background

Well, I have re-made it to be friendly to Google Fonts!  So now the blog title, sidebar headers and blog post headings aren't locked into Century Gothic like the original template is!

WOOHOO!
All fonts can be now changed within the Template Designer area (under Design > Template Designer).

If you know what you are doing, download the updated version here.

Using one of Totally Severe's backgrounds this is what I have come up with:

If you have no idea what the deal is - 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.

HOW TO USE THIS:

1) Install the template (as per normal)
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.

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://www.image_url_here.jpg) 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).


DONT SEE ONE YOU LIKE?  Just make it yourself!

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


Follow these instructions (click for a bigger image):



THAT'S IT!


OK SHARNEE SHUT UP AND JUST GIVE ME THE TEMPLATE!

11 comments :

  1. Oh I like this.
    I've only just started looking at new templates, I'm still a little warry of trying new ones as it takes me ages to figure out where to put my nuffnang ads back in.
    I might play around with this on the weekend.

    Thanks

    ReplyDelete
  2. Estoy muy satisfecho de encontrar este site.I quería darle las gracias por este gran plantillas


    Best cv template

    ReplyDelete
  3. Hi Nicole: your ads will still be there when you install a new template! Everything in the sidebar will remain (the order may be jumbled, but they will still be there!)

    ReplyDelete
  4. Thanks Sharnee, I finally got a chance to play around with my template.
    I did lose one of my ads (it was at the top) but I'm sure I'll work out how to put it back.

    I was wondering if it's possible to change the font colour from grey to black, I find the grey a little hard to read.

    Also one of my widgets has been cut off, I'm not how to go about fixing this.

    Thanks again

    Nicole

    ReplyDelete
  5. Never mind about changing the colour, I'm a smart cookie and realised when I re-read your post it actually tells me how to do that.

    *blush*

    ReplyDelete
  6. Actually while I'm searching some other blog,I've seen this post. This is very nice blog. I like this one.I'll use this idea in my projects. thanks for this.

    ReplyDelete
  7. hmm how to add the SHARE BUTTONS and those RESPONDS CLICKY

    ReplyDelete
  8. Hi Aine: I have no idea what you are talking about when you say "responds clicky".

    You can add share buttons by going to addthis.com or adding the (boring/generic) blogger ones by editing the "post" area in the blog layout area.

    ReplyDelete
  9. Is there a way to change the positioning of the date on this template? I would like the date to appear BELOW the post title. I have been trying to figure out where the element is in the code, but can't find it. Thanks!

    ReplyDelete
  10. Also, the "Reactions" links and the "Share" buttons don't show up on my blog posts even when I have them activated. Is there something in the code that's blocking them? Sorry, if I'm bothersome. >.< But, I really love your themes!

    ReplyDelete
  11. can you teach how to change text color? thanks

    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