Rainy's Blog Layouts: Vintage Elegance Blog Layout

Thursday, July 2, 2009

Vintage Elegance Blog Layout

I had to fix the background so if you downloaded this please come back in a while to get the zip with the right background in it.. Hugs, Rainy

I'm going to try and make a blog layout out of every kit I do.. This is from my vintage elegance kit which you can get

Here

The background first.. I think this will look very pretty on someone's blog.. and the best part is it's free! :)

And the header!

You can snag them from below

Vintage Elegance Blog Layout

You can download the full kit from below

Full Kit Here

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

Thursday, July 2, 2009

Vintage Elegance Blog Layout

0 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