Community Relations Archive

Want a neat sig? Ok.

First up, all the cool effects are done via CSS, in style attributes. To do boxes, you use a span tag, with a style attribute specifying the various effects you want. That's more or less all there is to it.

For example, let's say I want to have a box, 20 pixels high by 20 pixels wide, that looks like a pressed in button. First, I'll specify my span:

<span style="display: block; width: 20px; height: 20px;">

The "display: block" is critical. Without it, the span should render inline, that is, it won't be its own box. Internet Explorer often gets this wrong, so you don't need it, but it will look wrong in every other browser on the planet.

Now I'll make the background colour of the span a middle sort of shade of gray:

<span style="display: block; width: 20px; height: 20px; background-color: #999999;">

Now I'll give the top and left borders a size, style and colour. I'll make them a dark colour to suggest a shadow.

<span style="...; border-top: 2px solid #777777; border-left: 2px solid #777777;";>

Note that the ellipse means the style we've built up so far.

I will make the bottom and right borders a lighter colour to suggest light striking them.

<span style="...; border-bottom: 2px solid #CCCCCC; border-right: 2px solid #CCCCCC;">

I've now got my box:


The next important rule is that if you're putting anything inside the box, height will be calculated properly for you. If you give a specific height, the box will probably be too small or too large for its contents, so just don't specify it at all.

The width usually doesn't get calculated properly for you. You can specify it in pixels (eg, 200px) or in a percent (eg, 33%), but if you use a percent, the forum pages will be wider than your browser window, so don't do that. Specify a width in pixels that's larger than your contents will need, because generally these things look better if they're stretched out flatter anyway. Don't be rude and specify massive widths, or none of us will be able to use these features.

If your border is the same all the way around, you can just use "border: 1px dotted black;" to specify all four at once.

You can also specify the amount of space between the inside edge of the box and its contents, either for all four edges at once with "padding: 2px" or individually via "padding-left: 2px; padding-top: 1px; padding-right: 2px; padding-bottom: 1px;"

So, let's put it all together and produce us a new signature:

<center>
<span style="display: block; width: 300px; background-color: #336699; border: 1px dotted #ffffff;color:#ffffff;">
<span style="display: block; margin: 5px; background-color: #333333;color:#336699;">
Queeble the Rodian
</span>
Novice Holo Grinder<br>
Visit my shop in Amyrlin, Naboo!
</span>
</center>

Which theoretically should look like:
Queeble the RodianNovice Holo Grinder
Visit my shop in Amyrlin, Naboo!

Pretty ugly, eh? I leave it to you to tune colours to acceptable values. You may also be interested in finding out what the filter setting does in CSS. In recent versions of IE, I'm given to understand this can create a lot of nifty effects for you, but be aware it will be ignored on other browsers.

Oh, one thing I forgot to mention. Just like the forums proper, the sig formatter will automatically convert newlines to <br> tags. So, you need to crowd everything onto one line. If you do have genuine >br< tags, delete them and replace them with newlines.

When you change your sig, it changes every instance of your sig everywhere, so you can view an old message of yours over and over as you modify your sig, rather than posting new messages.

That is an extremely helpful guide!

Thanks Ekhben

Just testing.

Thanks NinjaStyle - you just burnt out my retinas!

try that again but with spaces... error saying s t y l e = " is not allowed.

---

GrimBear wrote:
try that again but with spaces... error saying s t y l e = " is not allowed.

---