Tutorial: Style-Matching Signatures

[Butterfree]

If you have seen my own signature, you will have noticed that it contains a little 'table' very similar to many of the panels found in the forums. (When posting, for example, you'll notice that the "Posting rules" box at the bottom has a very similar format although the dimensions are different.) What's more, it changes colors depending on which style you're using. It's not magic. It's smart use of HTML.

There are two ways to achieve this effect: the table way, which the forums themselves use, and the div way, which can not be used as flexibly to imitate the real forum look, but takes less markup and is more flexible for the finer details and greater customization.

The first thing you need to do is make sure you are editing your HTML signature. If you do not know HTML, this part might be a bit bothersome considering that then there is a lot of danger you might mess something up if you do anything other than follow the steps in this tutorial. Otherwise it shouldn't be a problem. (BBCodes are parsed in HTML signatures, I might note, so you will not lose your ability to use them when switching to your HTML signature.) To edit your HTML signature, click the little "HTML signature? (Advanced users only)" link below the signature editor in your user CP. You will be taken to another editor. If you are already using an HTML signature, you will of course not have to perform this particular step.

Now that you are definitely editing your HTML signature, let's get to the real stuff.

The Way It's Done

Well, basically, instead of specifying colors, backgrounds, borders, etc. for my boxes, I use the predefined classes found in the stylesheets of all the styles - the very same ones that are used to color the forum tables. Therefore, the boxes will inevitably look exactly like the forum tables do, simply because they derive their colors from the same set of rules. They will fit into all styles that will ever be made for the forums, and adapt if any of the styles get changed, making them particularly convenient for signatures.

The classes that I used were thead for the heading and alt1 for the box; you could substitute tcat for thead and/or alt2 for alt1 if you wanted. (tcat is the large headings - where the thread title is at the top of the page you should be viewing right now, for instance - and alt2 is for example the bar in the postbit where your username, avatar, etc. are.)

So now that you know that, pick your method...

The Div Way

For the div way, you simply make some sort of a container div with the class tborder and padding:1px;. Give it a width too if you don't want it to stretch all the way across your signature. Let's use 300px as an example. (My box is 450px.)

<div class="tborder" style="padding:1px; width:300px;">

</div>

Now, inside this div, you can put a header div with the class thead and a content div with the class alt1:

<div class="tborder" style="padding:1px; width:300px;">
<div class="thead">Header</div>
<div class="alt1">This is some content for my div. Lorem ipsum dolor sit amet, consecateur adipiscing elit.</div>
</div>

Now, if you preview your signature, you'll perhaps think you're done, but you're not. First, to add a border between the header and the content, we need to add margin-bottom:1px; to the header:

<div class="tborder" style="padding:1px; width:300px;">
<div class="thead" style="margin-bottom:1px;">Header</div>
<div class="alt1">This is some content for my div. Lorem ipsum dolor sit amet, consecateur adipiscing elit.</div>
</div>

And we might want to add a little bit of padding to our content div, too - the header has some by default, I believe, but we want some on the content. The default padding of the normal tables is 6px.

<div class="tborder" style="padding:1px; width:300px;">
<div class="thead" style="margin-bottom:1px;">Header</div>
<div class="alt1" style="padding:6px;">This is some content for my div. Lorem ipsum dolor sit amet, consecateur adipiscing elit.</div>
</div>

Now, the box is finished, but if you want it centered, you'll have to add another container div around it with 100% width and text-align:center; and give the previous container div margin:auto;. If you do this, you will have to give your header and content divs text-align:left; if you want the text in them left-aligned.

<div style="width:100%; text-align:center;">
<div class="tborder" style="padding:1px; width:300px; margin:auto;">
<div class="thead" style="margin-bottom:1px; text-align:left;">Header</div>
<div class="alt1" style="padding:6px; text-align:left;">This is some content for my div. Lorem ipsum dolor sit amet, consecateur adipiscing elit.</div>
</div>
</div>

And that should be the full code for our little box. Enjoy.

The Table Way

To make a box like this the table way, we just do it exactly like the forums do it. For the sake of the example, I'm going to make this a two-column table; if you just want a simple one, remove one of the table cells and the colspan of the header, and if you add another column, add to the colspan.

<table class="tborder" align="center" cellspacing="1" cellpadding="6" border="0" width="300">
<tr>
<td class="thead" colspan="2">Header</td>
</tr>
<tr>
<td class="alt2">Table cell</td>
<td class="alt1">Table cell</td>
</tr>
</table>

And then just insert stuff into the table, change the widths of the table cells, etc. Enjoy.