Rainy's Blog Layouts: Art Nouveau Blog Layout

Tuesday, July 14, 2009

Art Nouveau Blog Layout

I think these are my favorite all time scraps and don't they make an awesome blog layout! The colors suit to a tea! I hope someone besides me loves it.. lol Here's the background first! Hugs Rainy

The header is below

You may download the
Art Nouveau Zip
at 4shared

The full kit can be previewed below

Art Nouveau

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

Tuesday, July 14, 2009

Art Nouveau 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