| | |
Creating nice borders the same way they have on vbulletin
Please support our Graphics and Multimedia advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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.
It should look something like this
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.
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.
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.
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.
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)
.maintable_bordercolor { background-color: #003366; }
It should look something like this
Graphics and Multimedia Syntax (Toggle Plain Text)
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="maintable_bordercolor"> <tr> <td> </td> </tr> </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)
.alternative1 { background-color: #00468C; color: #FFFFFF; }
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)
.alternative2 { background-color: #0054A8; color: #FFFFFF; }
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)
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="maintable_bordercolor"> <tr> <td><table width="100%" border="0" cellspacing="1" cellpadding="2"> <tr> <td class="alternative1"> </td> <td class="alternative1"> </td> </tr> <tr> <td class="alternative2"> </td> <td class="alternative2"> </td> </tr> </table></td> </tr> </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.
Last edited by happygeek; Oct 28th, 2006 at 9:37 am. Reason: Formatting
I dont even butter my bread. I consider that cooking
![]() |
Similar Threads
- How to create image maps that look so nice... (Graphics and Multimedia)
- Creating the Forumhome page in vbulletin (Site Layout and Usability)
- fancy borders with images... ? (HTML and CSS)
- vBulletin 3.5.1 Theme Designer (Web Development Job Offers)
- Amazing Website Designs - How do they do this? (Site Layout and Usability)
Other Threads in the Graphics and Multimedia Forum
- Previous Thread: Photoshop: Aqua Button
- Next Thread: vBulletin polls pics
| Thread Tools | Search this Thread |
3d 10 actionscript3 adobe adobeacrobat adobereader air ajax amazon amf apple button cart childprotection cloud dashboard dell design dojofoundation dreamweaver ebay eclipse ecommerce elasticcomputecloud embed endorsement extra family flash flash-develop flashlite flex free harddrive iamthwee ibm illustrator imflash intel interactivemap javafx javascript laptop legal map micron microsoft mobile monitoringsoftware moonlight multimedia myspace nand news novell panorama pdf pedophiles photoshop photosynth php safety sandisk security shopping silverlight solidstatedrive sproutcore ssd streaming swf table ukmap unload unwanted video vulnerability web white.space xml zend zephyr zeroday






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