Rainy's Blog Layouts: Spring doodles Blog Layout

Monday, June 1, 2009

Spring doodles Blog Layout

If you are into gardening and like a whimsical blog.. you might be able to use this one.. although you might want to change it once spring leaves.. but it's good for 3 months or so.. hugs Rainy
The Header first!

Dimensions 650px X 478px

and now the background!

Dimensions 1024px X 777px
You can download it below if you like it..

Spring Doodles Blog Layout

You may also access the full scrap kit
Spring Doodles Scrap Kit

1 comments:

CreativeBusyHands-Scrapbook Freebies Search said...: Thank you so much for this Freebie. I want to let you know that I posted a link to your blog in Creative Busy Hands Scrapbook Freebies Search List, under the Blog Resource(s) post on Jun. 09, 2009. Thanks again.; June 9, 2009 4:04 PM

Post a Comment

How to Login

Before you start, you should add a link for blogspot.com and add login just before the closing anchor tag, so you can get to your pages!

Go to layout, add a gadget, and click on the html/ java to add the link. if you notice I have several links on each page so I can navigate without that ugly top bar. :)

To Eliminate the navigation bar at the top

Go to layout, edit html and in your html look for this:
/* Variable definitions

Just above that you should paste this.

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}

The full script should look like this

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}
/* Variable definitions

Whoo hoo! No bar! I hate that bar it's usually in the wrong color for your blog anyway! lol

How to edit your blog html

How to edit your blog html to show a new header and background! First things first..

Be sure to make a complete backup of your existing template! Very Important
To do this.. go to layout/Edit HTML and click on "Download full template"Save it to your computer perhaps in a folder called Blog templates. This way you will be able to restore it at a later date Find the width of your existing header. It will look like this in the html

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Change the 660px to the width of your new header

If the new header seems slightly off center, look for this in the html

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Change the margin from 5px to 0

Using a new background image:

You will have to upload your new background image to a free image storing site like flickr, photobucket.or even your own website, making note of the url where the image is stored..

Look for this in your html
Go to layout, edit html:
#body-wrapper {
background-image:url('http://replace.photobucket.com /albums/replace/Delta01.jpg');
background-repeat:no-repeat;
background-attachment:fixed;

Copy and paste the url making sure you edit only the path between the ' ' and not deleting anything else! You will want to change the background color to go along with your new background! Look for this in your html and change the #ffffff to a color you like! The #ffffff will make the background white!

background:#C7B9D0;

There are other edits you may like to do.. for instance you can change the border width, style and color by changing this: For Instance, change style from solid to dashed or dotted 1 px, it's what I have on my blog!

#outer-wrapper {
background: #C7B9D0;
border-left: 2px solid #D5CCD7;
border-right: 2px solid #D5CCD7;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
And that's it! If you are having specific trouble, please write to me and explain and i will be happy to help you.. hugs Rainy

Monday, June 1, 2009

Spring doodles Blog Layout

1 comments:

Hit Me :)

Indy Time

How to Login

How to edit your blog html

Using a new background image:

A great search engine

Blogs I enjoy

My Awesome Followers, Thank you!!

Contact Me:)

Blog Archive

Label Cloud