Frilly border example - click to view

This is what we are working on today.  There are several ways to do this, some are easier than other.  The easiest way (which we will not be doing) is to make an entire header image with a border that looks like this.  The only problem I have found is that you have to match up the edges of the blog perfectly if you want to make the border work.  Also, you would need a decent graphics program to do anything that is decent looking (paint won’t cut it).  Since a lot of people don’t have the $400 Adobe Photoshop CS4, we have come up with a different hack to get it to display.

First off, we need the image of a single border.  I have gone ahead and created it and uploaded it here: http://www.notan00b.com/border.png

Second, we need to edit some serious HTML:

Copy and paste this above “#outer-wrapper{” :

#topborder{
background-image:url(‘http://www.notan00b.com/border.png’);
background-repeat:repeat-x;
background-position:bottom left;
width: 960px;
height: 20px;
}
#contentALL{
background: #fff;
padding:10px;
padding-top:30px;
}

Change #outer-wrapper to look like this:
#outer-wrapper {
width: 960px;
margin:60px auto;
text-align:left;
font: normal normal 90% Georgia, Times, serif;
}

Go to the bottom, and under “<div id=’outer-wrapper’>”:
<div id=’topborder’/>
<div id=’contentALL’>

At the bottom edit this “</div></div> <!– end outer-wrapper –>”:
</div></div></div> <!– end outer-wrapper –>

That’s it!  Save it and you will have your border.  This is a specific case where the blog content was originally 950px wide.  I changed it to 960px to get the full frill instead of half of one (border.png is 20px wide).  Let me know if it doesn’t work or if you are experiencing problems.