Spice Up Your Forum Look. Rounded Corners For All Browsers

Spice Up Your Forum Look. Rounded Corners For All Browsers

Mod Version: 1.00, by borbole

vB Version: 4.0.3	Rating: (7 votes - 5.00 average)	Installs: 43
Released: 20 May 2010	Last Update: Never	Downloads: 298
Not Supported Template Edits Additional Files Translations

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:

HTML Code:

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

At the navbar template, find the following code and either remove it or comment it out:

HTML Code:

<div class="body_wrapper">

Att the footer template find the following code and either remove it or comment it out:

Code:

</div> <!-- closing div for body_wrapper -->

Then, at the very end add the following code:

HTML Code:

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

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

Code:

/* Rounded corners in Vb */
.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;
}
#allwrapper  {
background : #FFFFFF;
padding : 0 14px 0 14px;
} 
.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 your images directory.

A screenshot with the end result and the images are atatched below.

Download

rounded_corners.zip (11.0 KB, 334 downloads)

Screenshots

vBulletin LTS