Photoshop Tutorials
Photoshop Basics
Forum Designs
PHP Tutorials
phpBB Tutorials
phpBB 2 Styles/Mods
phpBB 3 Styles/Mods

How to make rounded tables

Submitted by CyberAlien, Feb 2007.
Page: 5
Pages: [1] [2] [3] [4] [5]
phpBB 3.0 BETA/RC subSilver2 is similar to phpBB 2.0, so there is no point in making separate tutorial for it. phpBB 3.0 final will have different default style with completely different code, and I'll add tutorial for it when phpBB 3.0 final will be released.

vBulletin

Next is vBulletin. For this example I'll modify same table as I modified in phpBB example: who's online section of forum index.

vBulletin has a very nifty feature: replacements. You can use it to minimize code used for header.

Currently our header code is this:
Code:
  1. <table border="0" cellspacing="0" cellpadding="0" border="0" width="100%">  
  2. <tr>  
  3.  <td width="26" align="left"><img src="images/corner_left.gif" width="26" height="28" border="0" alt="" /></td>  
  4.  <td width="100%" align="left">Table Header</td>  
  5.  <td width="6" align="right"><img src="images/corner_right.gif" width="6" height="28" border="0" alt="" /></td>  
  6. </tr>  
  7. </table>  
Split it in two parts: before middle table cell and after that table cell. Make two replacements: <hdr>:
Code: (<hdr>)
  1. <table border="0" cellspacing="0" cellpadding="0" border="0" width="100%">  
  2. <tr>  
  3.  <td width="26" align="left"><img src="images/corner_left.gif" width="26" height="28" border="0" alt="" /></td> 
and </hdr>:
Code: (</hdr>)
  1.  <td width="6" align="right"><img src="images/corner_right.gif" width="6" height="28" border="0" alt="" /></td>  
  2. </tr>  
  3. </table>  
Now header code is much simplier and it looks like this:
Code:
  1. <hdr>  
  2. <td width="100%" align="left">Table Header</td>  
  3. </hdr>  
Open template "forumhome", find who's online table:
Code:
  1. <!-- what's going on box -->  
  2. <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">  
  3. <thead>  
  4.    <tr>  
  5.        <td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>  
  6.    </tr>  
  7. </thead>  
  8. <if condition="$show['loggedinusers']">  
  9. <!-- logged-in users -->  
  10. <tbody>  
  11.    <tr>  
  12.        <td class="thead" colspan="2">  
  13.            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>  
  14.            <a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)  
  15.        </td>  
  16.    </tr>  
  17. </tbody>  
  18. ... 
This is just a beginning of that table, real code is much longer. We'll change first table row to header, as it contains text that is suitable for rounded header. In code above I've highlighted lines that will be changed. Move those lines before <table>, remove <thead>, <tr>, </tr> and </thead> from it:
Code:
  1. <!-- what's going on box -->  
  2. <td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>  
  3. <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">  
  4. <if condition="$show['loggedinusers']">  
  5. <!-- logged-in users -->  
  6. <tbody>  
  7.    <tr>  
  8.        <td class="thead" colspan="2">  
  9.            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>  
  10.            <a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)  
  11.        </td>  
  12.    </tr>  
  13. </tbody>  
Add our replacements <hdr> and </hdr> before and after table cell that we moved outside of table:
Code:
  1. <!-- what's going on box -->  
  2. <hdr>  
  3. <td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>  
  4. </hdr>  
  5. <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">  
  6. <if condition="$show['loggedinusers']">  
  7. <!-- logged-in users -->  
  8. <tbody>  
  9.    <tr>  
  10.        <td class="thead" colspan="2">  
  11.            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>  
  12.            <a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)  
  13.        </td>  
  14.    </tr>  
  15. </tbody>  
That's all.

If you repeat last steps for all other tables you'll create a good looking hi-tech template.
Page: 5
Pages: [1] [2] [3] [4] [5]

Share this tutorial

If you want to show this tutorial to someone else please use following code to link to this tutorial:
HTML Link:
Forum BBCode:
Content of this tutorial may not be published anywhere else without author's permission. Please link to this page instead.