944,134 Members | Top Members by Rank

Ad:
Dec 4th, 2004
0

Creating nice borders the same way they have on vbulletin

Expand Post »
Intro

Well we have always used border color one time or another. Here is a way using css to make it look like the vbulletin forums. This is very easy to use and its very basic.

Getting started

First off we start by creating a new table cellpadding-0 cellspacing-0 any width you want =)

Now we will create the css for the border color.
I call this maintable_bordercolor, you can call it what you want. And be sure to change the color to your liking.

Graphics and Multimedia Syntax (Toggle Plain Text)
  1. .maintable_bordercolor {
  2. background-color: #003366;
  3. }

It should look something like this

Graphics and Multimedia Syntax (Toggle Plain Text)
  1. <table width="100%" border="0" cellpadding="0" cellspacing="0" class="maintable_bordercolor">
  2. <tr>
  3. <td>&nbsp;</td>
  4. </tr>
  5. </table>

Now apply this css to the table you yust created and you will se the entire table gets a new color.

Within the first table we will now create a second table.
Use these settings to start you off.
Columns-2 rows-2 cellpadding-2 cellspacing-1 .
The cellspacing is a must otherwise you will not be able to se the border =)

Now lets start with the second css for the new table we created.
Lets call the first one alternative1.

Graphics and Multimedia Syntax (Toggle Plain Text)
  1. .alternative1 {
  2. background-color: #00468C;
  3. color: #FFFFFF;
  4. }

Now apply this style to the top row both columns and you will se the border is there =)
Lets do the second css for the new table to.

Graphics and Multimedia Syntax (Toggle Plain Text)
  1. .alternative2 {
  2. background-color: #0054A8;
  3. color: #FFFFFF;
  4. }

Now apply this second css to the second row on the new table we created and you now have 2 rows with different color and a nice border wich will work fine in both explorer and firefox and other clients =)

You are done and it should look something like this.

Graphics and Multimedia Syntax (Toggle Plain Text)
  1. <table width="100%" border="0" cellpadding="0" cellspacing="0" class="maintable_bordercolor">
  2. <tr>
  3. <td><table width="100%" border="0" cellspacing="1" cellpadding="2">
  4. <tr>
  5. <td class="alternative1">&nbsp;</td>
  6. <td class="alternative1">&nbsp;</td>
  7. </tr>
  8. <tr>
  9. <td class="alternative2">&nbsp;</td>
  10. <td class="alternative2">&nbsp;</td>
  11. </tr>
  12. </table></td>
  13. </tr>
  14. </table>

Now wasn’t that easy. Now you can experiment with different colors adding the alternative colors to the columns instead of the rows and even add more alternative colors if you want.
Have fun and I hope this helped a bit =)

I have attached a small screenshot of the finished product.
Attached Thumbnails
Click image for larger version

Name:	border.gif
Views:	661
Size:	612 Bytes
ID:	765  
Last edited by happygeek; Oct 28th, 2006 at 9:37 am. Reason: Formatting
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
croft is offline Offline
35 posts
since Nov 2004
Dec 4th, 2004
0

Re: Creating nice borders the same way they have on vbulletin

well thanks croft. :lol: i have been learning html by myself and it is indded a greatb pleasure to learn more of that wonderful language. :p :o
keep it up
Reputation Points: 11
Solved Threads: 1
Junior Poster
anastacia is offline Offline
142 posts
since Nov 2004
Jan 16th, 2007
0

Re: Creating nice borders the same way they have on vbulletin

Thanks for sharing,
Reputation Points: 10
Solved Threads: 0
Light Poster
coolvision is offline Offline
29 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in Graphics and Multimedia Forum Timeline: Photoshop: Aqua Button
Next Thread in Graphics and Multimedia Forum Timeline: vBulletin polls pics





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC