Putting a border or double border around your forum

Cool Tips & Tricks	Help Communities:

<< Prev Topic | Next Topic >>

Cool Tips & Tricks ::: HTML FAQ ::: Putting a border or double border around your forum

Topic: Putting a border or double border around your forum

(?)

atlass

ezboard moderator
ezSupporter
Posts: 361

Posted: 11/12/01 11:05 am

Putting a border or double border around your forum

The way you do this is to simply put your forum in a table.

You'll need to put some code into your Custom HTML area, and it will override the banners that you have set in the images tab for each forum. You can then put the banners into the forum introduction area using html, unless you use the same banner in each forum, in which case you can just put it at the end of the custom header code below using <img src="full url">

If you still want to do this, then put this in the custom header (3rd box):
<div align="center">
<table width="95%">
<tr>
<td align="center" style="border: 2px solid #XXXXXX">

And this into the custom footer (4th box):
</td>
</tr>
</table>
</div>

The width set above is 95%, but you can change that to anything you like. If you make it in pixels rather than percentages, then your forum will also be a fixed size. The maximum width you should go is 780px, which is a good size for 800 x 600 browsers. You can make it smaller, of course.

@

Edited by: Nutrocker at: 12/22/02 2:13:12 pm

atlass

ezboard moderator
ezSupporter
Posts: 518

Posted: 11/27/01 8:21 am
For a double border:

Put this into the third box:
<div align="center">
<table width="95%" style="border: 2px solid #000000">
<tr>
<td align="center" style="border: 4px solid #CC0000">

And this into the fourth box:
</td>
</tr>
</table>
</div>

Example:

forum goes here

Edited by: atlass at: 12/24/01 2:08:30 pm

atlass

ezboard moderator
ezSupporter
Posts: 694

Posted: 12/15/01 11:51 am
another way to do a double border:

With adjustable spacing between them

3rd text box from the top in advanced

<div align="center">
<table cellpadding="2" cellspacing="0" style="border: 8px solid #000000; text-align: center; width: 95%; background-color: #FFFFFF">
<tr>
<td>

<table cellspacing="0" cellpadding="4" style="border: 3px solid #000000; text-align: center; width: 100%; background-color: #FFFFFF">
<tr>
<td>

4th text box from the top in advanced

</td>
</tr>
</table>

</td>
</tr>
</table>
</div>

You may want to edit the underlined areas above:

Change the colours of both the border and background colour to those you select. If you don't want the background of the tables to be a colour, simply delete background-color: #XXXXXX; from both

cellpadding="2" is the space between the borders. Adjust it as you like, and change the border width from 1px to your own desired widths.

@

Example:

table :^)

Or, if you change the first table background to red:

Forum goes here

Edited by: atlass at: 12/24/01 1:57:50 pm

atlass

ezboard moderator
ezSupporter
Posts: 766

Posted: 12/24/01 2:28 pm
A border for a single <td> cell

To add a border to a single <td> cell - for example, your sidebar, just add the following:

style="border: 2px solid #XXXXXX"

into the selected <td> tag.

ie:
<td align="center" style="border: 2px solid #XXXXXX">

Change #XXXXXX to be your border colour, and 2px to whatever size you like.

Example:

sidebar

forum

Edited by: atlass at: 12/24/01 2:02:27 pm

atlass

ezboard Moderator
ezSupporter
Posts: 1425

Posted: 8/29/02 2:18 am

Using different border styles

You can also use other border styles - a good one to try is dotted. It looks best as 1px, but you can experiment. Just substitue solid for dotted.

Older systems won't see the dotted border.

Put this into the third box:
<div align="center">
<table width="95%" style="border: 1px dotted #000000" cellpadding="4">
<tr>
<td align="center" style="border: 4px dotted #CC0000">

And this into the fourth box:
</td>
</tr>
</table>
</div>

Example:

forum goes here

Other styles are dashed, double, groove, ridge, outset, inset.

Some need to use larger sizes to be seen properly

atlass

ezboard Moderator
ezSupporter
Posts: 1673

Posted: 9/27/02 3:16 am

using 'layered' tables to build up borders

You might want to use images or patterns as large borders - in this case you need to nest tables into each other with thick cellpadding.

<table style="width:100%">
<tr>
<td style="background-image: url(full url); background-color: #660000; padding: 20px">
<table style="width:100%">
<tr>
<td style="background-image: url(full url2); background-color: #ff0000; padding: 20px">
<table style="width:100%">
<tr>
<td style="background-image: url(full ur3); background-color: #cc0000; padding: 10px; text-align:center">
And this is where your forum goes.
</td></tr></table>
</td></tr></table>
</td></tr></table>

And this is where your forum goes.

The reds would be images, obviously.

@

atlass

ezboard Moderator
ezSupporter
Posts: 3202

Posted: 10/15/03 2:27 pm

Re: using 'layered' tables to build up borders

In that last post, the code goes in the third and fourth boxes as follows:

THIRD BOX
<table style="width:100%">
<tr>
<td style="background-image: url(full url); background-color: #660000; padding: 20px">
<table style="width:100%">
<tr>
<td style="background-image: url(full url2); background-color: #ff0000; padding: 20px">
<table style="width:100%">
<tr>
<td style="background-image: url(full ur3); background-color: #cc0000; padding: 10px; text-align:center">

FOURTH BOX
</td></tr></table>
</td></tr></table>
</td></tr></table>

Nutrocker

ezboard Moderator
ezSupporter
Posts: 16592

Posted: 11/27/05 4:12 pm

forum specific table borders or backgrounds

1st you need a copy of the EZURL script.
Note: Only one copy of this script should be installed within the custom html area of your board.

Custom HTML Area
1st Text Box from the top

 <script type="text/javascript">
/* BEGIN EZURL */
ezURL = document.location.href.match("http:\/\/((?:pub|b|p)([0-9]+)|beta|vanchau|inbox)\.ezboard\.com\/(b|f)([a-zA-Z0-9]+(?=frm[0-9]+)|[a-zA-Z0-9]+(?!frm[0-9]+))(frm[0-9]+|)(?:(?:[\.]{1})([a-zA-Z0-9\=\+\&\.]+)|)(?:(?:[\x3F]{1})([a-zA-Z0-9\=\+\&\.]+)|)(?:.*)");
try {
        if (ezURL.length > 0) {
                ezPub = ezURL[2].length > 0 ? ezURL[2] : ezURL[1];
                ezFullPub = ezURL[1];
                ezIsBoard = ezURL[3] == "b" ? true : false;
                ezBoardID = ezURL[4];
                ezForum = ezURL[5];
                ezPage = ezURL[6];
                ezQuery = ezURL[7];
                }
} catch (e) { }
ezURL = null;
/* END EZURL */
</script>

Now, you need two lots of code, the first is some CSS (Cascading Style Sheet) code, the second is Javascript.
The CSS code is basically telling the visitors browser NOT to display any section of html that has the ID of triplebackg (this gets applied to all pages.
Unless...
The Javascript kicks in and the forum number (frm2) matches the forum the visitor is viewing and the script 'writes' more CSS to the browser and this then forces the browser to display the section of html that has the ID of triplebackg

Edit the 'frm2' within the script below to match the relevant forum you wish to use the borders/backgrond in.
If you want to use the code in more than one forum, just add more case statement sections of code.

Custom HTML Area
1st Text Box from the top

<style>
#triplebackg {
display: none;
}

</style>

<script type="text/javascript">
/* FORUM-SPECIFIC HTML */
switch (ezForum) {
case "frm2":

document.write(' <style>');
document.write(' #triplebackg {display: block}');
document.write(' </style>');

}
/* END FORUM-SPECIFIC HTML */
</script>

Now that you have the above code in place, now you can use the HTML required for the borders/backgrounds as explained in the topics above.

Custom HTML Area
Custom Header - 3rd Text Box from the top

<table style="width:100%" id="triplebackg">
<tr>
<td style="background-image: url(full url); background-color: #660000; padding: 20px">
<table style="width:100%" id="triplebackg">
<tr>
<td style="background-image: url(full url2); background-color: #ff0000; padding: 20px">
<table style="width:100%" id="triplebackg">
<tr>
<td style="background-image: url(full ur3); background-color: #cc0000; padding: 10px; text-align:center">

Custom HTML Area
Custom Footer - 4th Text Box from the top

</td></tr></table>
</td></tr></table>
</td></tr></table>

::: Topic Commands

<< Prev Topic | Next Topic >>

Icon Legend

:::Reply to Post Button

:::Edit Post Button

:::Delete Post Button (Moderator Only)

:::Subscribe to Thread Button

:::Email to Friend Button

- Cool Tips & Tricks - HTML FAQ -

ezboard Help Communities:

Help Forums Bug Base