Make vB with rounded corners

[quickening]

Well, with 3.7 coming out, I want a new look for my forums, and with this new update comes all the hassle of reverting everthing so I thought this would be a good time to make something more 'mine'...

Basically, I'm going to take some static html that I use for site content and wrap the header and footer around the forums to create a uniform look through out the site.

This, however, is where I am coming against a brick wall. The design I am going to use for the site uses rounded corners but vB doesn't have them.

Basically I want to turn all the right-angle corners (see image incase I'm not being clear) into something that would match this type of corner.

This will be done on the default vB skin. Any help would be greatly appreciated. Thank you in advance!

 

[Hoxxy]

Add this to top of header template:

<div class="roundedcornr_box_557416">
   <div class="roundedcornr_top_557416">
<div></div></div>
      <div class="roundedcornr_content_557416">

Add this to bottom of footer template:

   </div>
   <div class="roundedcornr_bottom_557416">
<div>
</div>
</div>
</div>

Add this to addtional css secton found in style manager:

.roundedcornr_box_557416 {
   background: #cccccc;
}
.roundedcornr_top_557416 div {
   background: url(roundedcornr_557416_tl.png) no-repeat top left;
}
.roundedcornr_top_557416 {
   background: url(roundedcornr_557416_tr.png) no-repeat top right;
}
.roundedcornr_bottom_557416 div {
   background: url(roundedcornr_557416_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_557416 {
   background: url(roundedcornr_557416_br.png) no-repeat bottom right;
}

.roundedcornr_top_557416 div, .roundedcornr_top_557416, 
.roundedcornr_bottom_557416 div, .roundedcornr_bottom_557416 {
   width: 100%;
   height: 20px;
   font-size: 1px;
}
.roundedcornr_content_557416 { margin: 0 20px; }

download attachments place somewhere in you image folder and edit the css to reflect the image paths....
ie: images/corners/roundedcornr_557416_tl.png

The images are grey (#cccccc) with a white background but you could always change to your preference with photoshop or something, but remember to change background color code in css coding (highlighted in orange).

Hope this helps!

 

[quickening]

That's brilliant, thank you... It does make the forum container as a whole with rounded corners which is one help, however, what I wanted to have rounded corners is the 'inside' container. The pink bits in the image:

Are what I'd like to be rounded. Can this be done?

 

[Hoxxy]

okay yeah, you need to add tables in your:
forumhome_forumbit_level1_nopost template

This is my forumhome_forumbit_level1_nopost template if it helps:

<!-- top -->
         <table width="100%" border="0" cellpadding="0" cellspacing="0" background="Hoxxy/misc/cat_title_bg.gif">
       <tr>
     <td width="77"><img src="Hoxxy/misc/cat_title_left.gif" width="77" height="28"></td>
 <td>
<a class="text" href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]<font class="container">$forum[title]</font></a>
</td>
 <td width="62">
  <a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_1')">
<img id="collapseimg_forumbit_1" src="Hoxxy/misc/cat_title_right.gif" alt="" border="0" /></a>
                    </td>
                      </tr>
                        </table>
<!-- /top -->
<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center">
        <if condition="$childforumbits">
          <tbody id="collapseobj_forumbit_1" style="">
            <tr align="center">
           <td class="thead" width="10%">&nbsp;</td>
         <td class="thead" align="left">Forum</td>
        <td class="thead" width="180">Last Post</td>
       <td class="thead" width="40">Threads</td>
      <td class="thead" width="40">Posts</td>
        </if>
          </tr>
$childforumbits
              </if>
               </tbody>
                 </table>
                   <div style="padding: 5px 5px 5px 5px;"></div>

All you wil have to do really is replace your template with mine and replace the widths heights and url locations of your own images!
Please note: This is for the top ofcatagorys only not the navebar. and.......
Aways make a backup first!