Making Rounded Sides in Category Strips

Making rounded caegories is very simple just follow this steps.

Template Edits:
froumbit_level1_nopost
(Style Manager>"Style">Edit Templates>ForumHome>froumbit_level1_nopost)
:::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::

Find:
<if condition="$forum[forumid] == 1">
<else />
</table>
Add Below:

<!-- bottom table setup -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="70" align="left" valign="top"><img src="$stylevar[imgdir_misc]/footer_left.gif" alt="" height="17"/></td>
<td width="100%" style="background-image:url($stylevar[imgdir_misc]/botcenter.gif)"><img src="$stylevar[imgdir_misc]/footer_bg.gif" alt="" width="100%" height="17" border="0"/></td>
<td width="70" align="right" valign="top"><img src="$stylevar[imgdir_misc]/footer_right.gif" alt="" height="17"/></td>
</tr>
</table>
<!-- End bottom table setup -->

<br />



</if>
<!-- top category table setup -->

<table width="100%" style="background-image:url($stylevar[imgdir_misc]/header_bg.gif)" border="0" cellpadding="0" cellspacing="0">

<tr>
<td align="left" valign="top"><img src="$stylevar[imgdir_misc]/header_left.gif" alt=""/></td>
<td width="100%" class="tcat" style="background-image:url($stylevar[imgdir_misc]/header_bg.gif)" valign="middle">


<div align="left"><a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><b>$forum[title]</b></a></div>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>


</td>
<td align="right" valign="top"><img src="$stylevar[imgdir_misc]/header_right.gif" alt=""/></td>
</tr>
</table>
<!-- End top category table setup -->
:::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::

If you want these to appear in the thread do this:

Template Edits:
postbit_legacy
(Style Manager>"Style">Edit Templates>Postbit Templates>postbit_legacy)

:::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::

Find:

<div id="edit$post[postid]" style="padding:0px 0px $stylevar[cellpadding]px 0px">
<if condition="!$post['islastshown']"><!-- this is not the last post shown on the page --></if>
</if>

Add Below:

<!-- top category table setup -->

<table width="100%" style="background-image:url($stylevar[imgdir_misc]/header_bg.gif)" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><img src="$stylevar[imgdir_misc]/header_left.gif" alt=""/></td>
<td width="100%" class="tcat" style="background-image:url($stylevar[imgdir_misc]/header_bg.gif)" valign="middle">
$post[title]</td>
<td align="right" valign="top"><img src="$stylevar[imgdir_misc]/header_right.gif" alt=""/></td>
</tr>
</table>
<!-- End top category table setup -->

You should have the following images in the misc folder of the style.
footer_bg.gif
footer_left.gif
footer_right.gif
header_bg.gif
header_left.gif
header_right.gifFinal Result:

http://i104.photobucket.com/albums/m177/semann/th_exround.gif (http://s104.photobucket.com/albums/m177/semann/?action=view&current=exround.gif)

uhmmm....nice! but I have another tip .You can use css to make it

In Css:
.header_l{ background: url(header_left.gif) no-repeat top left; height: #px; }
.header_r{ background: url(header_right.gif) no-repeat top right; height: #px; }
.header_bg{ background: url(header_bg.gif) repeat-x top left; height: #px; }

*Notice: # = your img height

In template:
<div class="header_bg"><div class="header_l"><div class="header_r">
<div align="center">Your Title</div>
</div></div></div>

;)

yes... (im not very good at css)

http://www.newsgator.com/NGOLProduct.aspx?ProdID=TopStyle
Try it :D Very easy ....

Thanks alot for this I been looking for this for ages it seems !

uhmmm....nice! but I have another tip .You can use css to make it

In Css:
.header_l{ background: url(header_left.gif) no-repeat top left; height: #px; }
.header_r{ background: url(header_right.gif) no-repeat top right; height: #px; }
.header_bg{ background: url(header_bg.gif) repeat-x top left; height: #px; }

*Notice: # = your img height

In template:
<div class="header_bg"><div class="header_l"><div class="header_r">
<div align="center">Your Title</div>
</div></div></div>

;)

Where in css do you put htis and also how do I find what the image height should be? What template does that go in? Thanks!

I believe it goes in the Additional CSS box at the bottom of your Main CSS page.

I believe it goes in the Additional CSS box at the bottom of your Main CSS page.

Cool, thanks Peggy, I will give that a whirl!

uhmmm....nice! but I have another tip .You can use css to make it

In Css:
.header_l{ background: url(header_left.gif) no-repeat top left; height: #px; }
.header_r{ background: url(header_right.gif) no-repeat top right; height: #px; }
.header_bg{ background: url(header_bg.gif) repeat-x top left; height: #px; }


I would agree, its far easier to use CSS to make rounded category corners espcially as there are quite alot of template edits if you want to round every category in your forum.

uhmmm....nice! but I have another tip .You can use css to make it

In Css:
.header_l{ background: url(header_left.gif) no-repeat top left; height: #px; }
.header_r{ background: url(header_right.gif) no-repeat top right; height: #px; }
.header_bg{ background: url(header_bg.gif) repeat-x top left; height: #px; }

*Notice: # = your img height

In template:
<div class="header_bg"><div class="header_l"><div class="header_r">
<div align="center">Your Title</div>
</div></div></div>

;)


Thanks alot!

But one question, what do I put as the title and what template does it go in?