phpbb style rounded 4

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.  

  2.  
  3.  
  4.  

  5.  
  6.  

  7.  
  8.  

  9.  

  10. Table Header

     

Split it in two parts: before middle table cell and after that table cell. Make two replacements: :
Code: ()

  1.  

  2.  
  3.  
  4.  

    and :
    Code: ()
    1.  

     

  5.  

  6.  

Now header code is much simplier and it looks like this:
Code:

  1.  
  2. Table Header

     


  3.  

Open template “forumhome”, find who’s online table:

Code:

  1.  

  2.  
  3.  
  4.    
  5.  
  6.        
  7.  

  8.    
  9.  

  10.  


  11.  

  12.  

  13.  
  14.    
  15.  
  16.        
  17.  

  18.    
  19.  

  20.  

  21. … 
  22. 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

    $vbphrase[whats_going_on]
     
  23.            
     
  24.            $vbphrase[currently_active_users]: $totalonline ($vbphrase[x_members_and_y_guests])
     
  25.        
  26. , remove

    ,

    ,

    and

    from it:

    Code:

    1.  

     


  27. $vbphrase[whats_going_on]
     

  28.  

  29.  

  30.  
  31.    
  32.  
  33.        
  34.  

  35.    
  36.  

  37.  

    Add our replacements and before and after table cell that we moved outside of table:
    Code:

    1.  

    2.  

     


  38.  

  39.  
  40.            
     
  41.            $vbphrase[currently_active_users]: $totalonline ($vbphrase[x_members_and_y_guests])
     
  42.        
  43. $vbphrase[whats_going_on]
     

  44.  

  45.  

  46.  
  47.    
  48.  
  49.        
  50.  

  51.    
  52.  

  53.  

    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:
    How to make rounded tables” class=”text” onclick=”this.focus(); this.select();”/>
    Forum BBCode:

    Content of this tutorial may not be published anywhere else without author’s permission. Please link to this page instead.

     
     
  54.            
     
  55.            $vbphrase[currently_active_users]: $totalonline ($vbphrase[x_members_and_y_guests])
     
  56.