phpbb style rounded 2

How to make rounded tables

Submitted by CyberAlien, Feb 2007.
Page: 3

Pages: [1] [2] [3] [4] [5]

Now you’ve completed design, so lets move on to coding.



But before you move to coding you should export images from Photoshop. To do that select option “save for web” in menu “file”, change your slices to gif format, click “save”. Now you have 3 corner images.

2. Coding

I’ve seen many designs that use rounded headers and work well only in one particular browser (usually IE, sometimes IE and Firefox), but look awful in other browsers. Why? Because after slicing image designer uses ImageReady or any WYSIWYG editor to make html code for it and those tools generate html code that is full of bugs.



You should avoid using those tools. Its very easy to make proper html code for rounded header in simple text editor. I recommend EditPlus or TextPad.



There are two ways to code header: tableless html code using divs and table. So which one to choose?



Tableless design is good if you have only one block of text in header, so you’ll have left corner, right corner, content in middle. So it will work well for most phpBB 2.0 styles, hovewer more complex forum systems, such as vBulletin, IPB, SMF and phpBB 3.0 sometimes have content on right side of header, such as popup menus, minimize/maximize button, etc… these will be tricky to code if you don’t know (x)html/css very well, so then you should use table because you can add as many table cells in middle as you want.



1. Divs.



In css add code similar to this:

Code:
  1. .rounded-table { background: url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/z4hs24d5v5sefoni0rgcnd65303/files/images/table_bg.gif) bottom left repeat-x; }
     
  2. .rounded-corner1 { background: url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/z4hs24d5v5sefoni0rgcnd65303/files/images/table_left.gif) bottom left no-repeat; }
     
  3. .rounded-corner2 { background: url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/z4hs24d5v5sefoni0rgcnd65303/files/images/table_right.gif) bottom right no-repeat; padding-left: 30px; padding-right: 20px; height: 28px; font-weight: bold; font-size: 12px; text-align: left; margin: 0; white-space: nowrap; overflow: hidden; }
     
html code for whole header would look like this:
Code:
  1. Table Header

     

It might need to be adjustted a little bit by adding padding-bottom or padding-top to .rounded-corner2, and decreasing height by same amount that you’ll use on padding.



2. Table.



In css add code similar to this:
Code:
  1. .rounded-table { background: url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/z4hs24d5v5sefoni0rgcnd65303/files/images/table_bg.gif) bottom left repeat-x; }
     
  2. .rounded-table td { height: 28px; white-space: nowrap; background: none; } /* background set to none to override background for certain table cells such as vbmenu_control for vBulletin */
     
html code for while header would look like this:
Code:

  1.  

  2.  
  3.  
  4.  

  5.  
  6.  

  7.  
  8.  

  9.  

  10. Table Header

     





Additionally for both methods you might want to add css for links in rounded header to override default links:
Code:
  1. .rounded-table a:link, .rounded-table a:visited { text-decoration: underline; color: #3F749B; }
     
  2. .rounded-table a:hover, .rounded-table a:active { text-decoration: none; color: #E3962D } 

Page: 3

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.