PDA

View Full Version : Curved/rounded table headers


j1mmy
06-20-2009, 05:44 PM
How do you make a table header rounded at the edges?

Lynne
06-20-2009, 06:11 PM
Google has a lot of info on that - So, You Want Round Corners, Huh? (http://www.htmlgoodies.com/tutorials/tables/article.php/3479841)

You can also use css for most browsers except IE.

j1mmy
06-21-2009, 01:57 AM
I've tried a lot of this before. But I don't think vB reads the code in the same way as you put in a HTML.

Mike-D
06-21-2009, 07:24 AM
But I don't think vB reads the code in the same way as you put in a HTML.Lynne is right. That's why we have CSS! Do a search at Google and you'll find tons of good Tutorials. Here's one of them: CSS and Round Corners: Build Boxes with Curves (http://www.sitepoint.com/article/css-round-corners-boxes-curves/) :)

Butcher
06-21-2009, 10:04 AM
or do what most skinners do.
Create 3 images. 2 for the corners and one for the background (middle) then in the template create a new table that has the 3 images in

hope that makes sense

j1mmy
06-21-2009, 04:19 PM
Would i need to get into the actual table header template then? What template is that?

Lynne
06-21-2009, 04:33 PM
Would i need to get into the actual table header template then? What template is that?
Yes, if you use the method with the images, you will have to get into the actual template for whichever table you want to have rounded corners - you will also have to create the rounded corner images. To find the template to modify, do this - vboptions > General Settings > Add Template Name in HTML Comments > set to Yes . Then go back to your page and view the source code and you will see the name of the template called around your part of the code. Sometimes the template is the one mentioned at the very top of the page source.

j1mmy
06-21-2009, 05:48 PM
Right, I've identified the template as forumbit_level1_nopost:

<tbody>
<tr>
<td colspan="<if condition="$vboptions[showmoderatorcolumn]">4<else />3</if>">
<!-- forcing space -->
<img src="$vboptions[cleargifurl]" width="1" height="5" />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">4<else />3</if>">
<if condition="$childforumbits">
<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>
</if>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><span class="smallfont" style="font-weight:normal;">- $forum[description]</span></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
</tbody>
<tbody>
<tr align="center">
<td class="thead" >&nbsp;</td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
$childforumbits
</tbody>
</if>

Now, just to be on the sale side, is this the code I need to edit?

<div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div>

Or is it this one:

<tbody>
<tr align="center">
<td class="thead" >&nbsp;</td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</tbody>

--------------- Added 1245610524 at 1245610524 ---------------

Also, where would I enter the custom CSS? Would I need to put anything in the actual table header field

--------------- Added 1245675013 at 1245675013 ---------------

Everytime I try it, this happens

http://img2.pict.com/c2/6b/ec/aeb4c7cf123f0f5efe0223b3ab/1NKco/67.png