Spice up images - create image watermark borders

[ZomgStuff]

With this you can change this regular image
https://vborg.vbsupport.ru/external/2008/01/49.jpg

into something like this without actually editing the image itself
https://vborg.vbsupport.ru/external/2008/01/50.jpg

First of all you will need to download the different images here (http://www.zomgstuff.net/hoff/ForumFiles/Pieces.zip).

Then open up a blank page in notepad, and we're first going set up some style definitions.
Comments are inside each rule.

<style type="text/css">
DIV.image
{
width: 675px;
margin: 0 auto;
margin-bottom: 40px;
clear: both;
/*This creates the bigger-picture frame/location where we will put all of our elements */
}

DIV.image Div.TopBar
{
height: 50px;
background-image: url( 'topbar.png' );
background-repeat: repeat-x;
float: left;
/*This repeats the topbar over and over at the top to create a bar. The image itself is actually a very small vertical line */
}

DIV.image Div.TopBarEnd
{
height: 50px;
width: 50px;
background-image: url( 'topbar_end.png' );
background-repeat: repeat-x;
float: left;
/*This is the curly ending for the top left corner bar*/
}

DIV.BottomBar
{
clear: both;
position: relative;
top: 350px;
height: 50px;
/*This sets up the very bottom bar */
}

DIV.image Div.Title
{
display: inline;
padding-left: 20px;
padding-top: 2px;
background-repeat: no-repeat;
height: 16px;
vertical-align: bottom;
padding-right: 8px;
color: #7a0;
/*This sets up the properties for the text in the top left*/
}


DIV.BottomBarEnd
{
float: right;
width: 50px;
height: 50px;
background-image: url( 'bar_bottom_end.png' );
background-repeat: no-repeat;
/*This is actually the very bottom right corner curly piece */
}

DIV.BottomEndLeftInfo
{
float: left;
width: 50px;
height: 50px;
background-image: url( 'bar_bottom_end_l.png' );
background-repeat: no-repeat;
/* This is the ending curly piece in the bottom left corner */
}
DIV.BottomLeftInfo
{
float: left;
background-image: url( 'bar_x.png' );
background-repeat: repeat-x;
height: 50px;
padding-top: 30px;
padding-left: 8px;
/*This repeats the bottom left bar over and over at the top to create a bar. The image itself is actually a very small vertical line */

}
</style>
Now here is the actual code. What happens is that we make the picture the background, and we place the borders on it.
<div class="image">
<div style="width: 575px; height: 450px; background-image: url('2.jpg'); background-repeat: no-repeat;">
<div class="TopBar">
<div style="padding: 5px; white-space: nowrap;">
<div class="Title">Posted By David hasselhoff</div>
</div>

</div>
<div class="TopBarEnd">&nbsp;</div>
<div style="position: relative; top: -75px;">

</div>

<div class="BottomBar">
<div class="BottomBarEnd"></div>
<div class="BottomLeftInfo">www.ZomgStuff.net</div>
<div class="BottomEndLeftInfo">&nbsp;</div>
</div>



</div>

[hrk]

nice.

was looking for this tutorial. but can you explain in details step by step to get this done? as in which file to edit etc? thank you:)

[mindhunter77]

would love to see you expand on this a little. Where do we post the code etc?

[karlm]

Yep, it would be useful to know what file/template requires editing... the tutorial is kinda useless without at least that information.

[Arsov14]

Dead link. Reupload pls !!!

[mattyphatty]

Would something like this work for VB 4.0?

[as7apcool]

nice hack really