Spice Up Your Forum Look. Rounded Corners For All Browsers

[admin]

Tạo khung viền xung quanh forum khá đẹp mắt

Demo:
http://img.photo.zing.vn/file_uploads/gallery/1024x768/2010/05/23/05/81611274609649.jpg

This will give your forum the cool rounded corners in all the browsers spiced up with the cool shadow.


At the header template add the following code at the top, above everything:

<div id="allwrapper"><!-- closing tag is in footer template -->
<div class="header">
<div class="headerleft">
<div class="headerright">
</div>
</div>
</div>
<div class="whiteshadow"><!-- closing tag is in footer template -->
<div id="vbwrapper"><!-- closing tag is in footer template -->

Then at the footer template add the following code all the way to the very bottom, after everything.


</div><!-- closing div for vbwrapper -->
</div> <!-- closing div for whiteshadow -->
<div class="footerround">
<div class="footerleft">
<div class="footerright">
</div>
</div>
</div>
</div><!-- closing div for allwrapper -->

And as last but not least, at the additional.css template add the following code:


/* Rounded corners in Vb */

#allwrapper {
width : 100%;
color : #000000;
margin : 0 auto 0 auto;
padding : 0;
text-align : left;
}

.header{
padding : 0;
margin : 0;
background : url(images/misc/header.png) repeat-x;
height : 46px;
}

.headerleft {
padding : 0;
margin : 0;
background : url(images/misc/headerleft.png) no-repeat 0% 0%;
height : 46px;
}
.headerright {
padding : 0;
margin : 0;
background : url(images/misc/headerright.png) no-repeat 100% 0%;
height : 46px;
}


.whiteshadow {
background : #FFFFFF;
padding : 0 12px 0 12px;
}

#vbwrapper {
width : 100%;
margin : 0 auto;
}

.footerround {
padding : 0;
margin : 0;
background : url(images/misc/footer.png) repeat-x;
height : 106px;
}

.footerleft {
padding : 0;
margin : 0;
background : url(images/misc/footerleft.png) no-repeat 0% 0%;
height : 106px;
}
.footerright {
padding : 0;
margin : 0;
background : url(images/misc/footerright.png) no-repeat 100% 0%;
height : 106px;
}

Then upload the images at the misc folder in yout images directory.