Rainy's Blog Layouts: Summer Romance Blog Layout

Monday, June 8, 2009

Summer Romance Blog Layout

This blog layout was made from one of my favorite kits. Bright colors with the love theme.. that's well in my comfort zone! :) I hope you like it too..
First the header.

And now the background!

If you can use it, you may download it from below

Summer Romance Blog Layout

The full kit may be downloaded from here:

Summer Romance

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:03 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 8, 2009

Summer Romance 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