![]() |
#1
|
||||
|
||||
![]()
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.) Code:
<div class="tborder" style="padding:1px; width:300px;"> </div> Code:
<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> Code:
<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> Code:
<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> Code:
<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> 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. Code:
<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>
__________________
![]() Butterfree's Current Obsession
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.
|
![]() |
Thread Tools | |
|
|