Rainy's Blog Layouts: Diva Blog Layout

Sunday, May 31, 2009

Diva Blog Layout

Hi, well this one is certainly a teen's blog.. and so much fun to create! I think it turned out cute.. I'm sure there is a teenager that would love it somewhere.. :) ok first the header! :)

Dimensions 650px X 424px

And the background:

Dimension 1024px X 777px

If you can use it the link is below.. hugs Rainy

Diva Blog Layout

The scrap kit may be download from below

Diva

3 comments:

christielou62 said...: This is such a cute blog lay out Rainy very nice job! My niece is going to love this =) - huggies Christine; May 31, 2009 12:56 PM
Rainy said...: I would love to see what she does with it.. that's my only pay back for putting my hard work into it.. thanks Christine, I appreciate the time you took to comment.. hugs Rainy; May 31, 2009 4:29 PM
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

Sunday, May 31, 2009

Diva Blog Layout

3 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