My old background is still showing

What to do when your old background is showing through instead of the new one.

There are one of two ways that your old background is being displayed on your blog.  In either case they need to be removed from your blog in order for your new background to show through.

1. It's been posted in your layout as an HTML gadget.  (This is the way you post my backgrounds)
    If this is the case simply remove the HTML gadget. 

•  This can be done by first going to your layout.
• Finding which HTML gadget it is
• Open the gadget
• Click the remove button

2. It's been posted as a direct link in the HTML of your blog layout. 

If it's a direct link in your HTML code it looks a little something like this: 

body {
background:$bgcolor;background-image:url(http://i753.photobucket.com/albums/xx178/BabblingBrookedesigns/Backgrounds/blackdotsredborderstraightwhite.jpg);background-position: center; background-repeat:no-repeat; background-attachment: fixed; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }

To remove the old background simply delete the url address of the image- its the text in between the parenthesis and in blue text).  This will delete the link to the image which will delete the image from your blog.  Now the HTML code should look something like this:

body {

background:$bgcolor;background-image:url();background-position: center; background-repeat:no-repeat; background-attachment: fixed; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }

Notice how the paranthesis are empty.  It's easiest just to keep the code in case you ever want to use another background that still needs the HTML code in your blog layout. 

I hope that answers any questions and fixes any problems.

My Background is the wrong size!

Can't see all of your blog background  because it's ginormous? Do you see a solid color around the edge of your background?
Here are the fixes:

If it is too big you can change the zoom on the window.  In Internet Explorer click on the Internet Toolbar where it says,"Page".  Click on where it says, "zoom". Click on 100% or 75%.  This will shrink the page and show more of the blog background for you.  It won't chage how anyone else sees your blog.  But you can always tell them what to do!

If you see a solid color around the edges then you can use the same "zoom" option and zoom in.  A few of my earlier backgrounds are smaller than the others.  Depending on if I still have the original work files, I'm changing some of them to a bigger size.  But some of them are just going to be small.

Common Blogger Words and Terms

So I'm bringing out my inner-English-teacher. No really, I have an inner-English-teacher. If I had an outer-English-teacher, then I would be gainfully employed by at some high school teaching English and literature classes to teenagers who could care less.

I would also like to mention that having an inner English teacher in no way ensures that the grammar and punctuation of this website is going to be perfect. I minored in English people, that is 5 whole classes less than an English major.  And yet, somehow I'm licensed to teach?

Anyways...

I've found that there are a few of you out there that have no idea what the meaning of this sentences is: "You can place a navigation bar below your header using an HTML Widget."

This is where that teaching thing comes in to play. In an effort to educate those of you who are blissfully unaware of what the above sentence means, here are a few common blogger words and terms you'll run into.

Header- Words and/or an image displayed at the top of your blog. It usually lists the title and a description of your blog and any images you wish to have displayed there.

Widget/Gadget- Found in the layout of your blog.  Often contains personalized content or applications selected by the blog author(s).  They are then embedded into your blog webpage.

HTML- Computer language used to create pages and content on the Web.  It's short for HyperText Markup Language.

Navigation Bar- An image or words that act as a menu for a webpage.  Usually it contains HTML links that take you to different posts or areas of a blog.  It is usually displayed below the header or in the sidebar of your blog.  The menu can either be made up of text links or it can be made with images.

Here is an example of a text horizontal navigation bar.

Here is an example of an image navigation bar.

The Navigation on Babbling Brooke Designs site is a dropdown menu.

Background- The picture or image that is displayed behind your blog.

Sidebar- Where your widgets/gadgets are displayed to the side of the main wrapper

Main wrapper- Where your posts are displayed.

Link Button- An image that is encoded with a link to a website. so Others can take your button and put it on their blogs giving them an automatic link to your blog.

Blinky- The same as a button, but has an animation is displayed instead of an image.

Signature-an image of your name that is displayed at the bottom of every post.  An example of this is at the bottom of this post where it says, "Brooke".

Layout- The number or width of columns on your blog ie: 3 column, 2 column, 2 column skinny

Favicon- The little image next to the web address of your blog at the top of your internet browser.  Your blog's default favicon is the orange blogger "b".  

Post title Image- a small image that is encoded to be placed next to the title of each of your posts.

Sidebar title image- Same thing as the post title image just next to the titles on the sidebar.

If you have any other questions or specific words or terms you jsut don't get, feel free to leave a comment or write an e-mail.  I'm sure I'll add more to this as I go along.

How to Install my free backgrounds

1. Log in to your blogger account

2. Go to Layout (using the old Minima template or the Simple template works best)

3. In page Elements click on "add a gadget"

4. Choose an HTML/JavaScript gadget

5. On the BabblingBrookeDesigns website, Copy the enitre HTML code found in the text box next to the background of your choice.

6. Paste the HTML code into the HTML/Javascrip Gadget window

7. Save

Voila you now have a new Blog Background!


If the Babbling Brooke Designs Link is in a strange spot on your blog. Try moving the HTML widget you installed onto your blog to a different spot on your page layout. It's best to put your HTML widget closer to the bottom of the page on your blog layout.

How to install your own custom title font

If you want to have a cute font for your post titles and sidebar titles HERE is the place to go for a great and
detailed explanation of this.
Good luck it's somewhat labor intensive. 

If you need help feel free to ask!  I'd be happy to take a look at your coding!

How to center your header

1. In the Layout tab click on HTML Code

2. Type cntrl F and a little search box will pop up in the browser just above the blogger window. 

3. Type #header img into the search box.  It should pull up this bit of code. 

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

4.  Change that bit of code to this bit of code (copy and paste)

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
position: relative;
left: -15px;
}

You can adjust the centering by changing the -15px.  If you make the number smaller (-50) it will move to the left.  If you make the number larger (-5) it will move to the right.

UPDATE:  When trying to center your header this coding only works if you've selected "place instead of Title and Description".  Otherwise it fights other code that exists in your template and won't center the image.