New BBcode tag for signatures

[64Guitars]

I've created a new tag which will (hopefully) make it easier to layout your signature. The table method which I'd previously described in this message can be a bit complicated. The new [width] tag is much simpler.

The width tag includes an equal sign and is followed by a number and unit. The unit can be 'px' (pixels) or '%'. The latter is especially useful for signatures as it lets you easily divide the signature area into several columns.

I've also created a tag called [widthb]. It's exactly the same as [width] except that it draws a thin black border around the content area. This can be helpful when first designing your signature as it lets you see where the areas are located. Later, you can change all of your [widthb] tags to [width] tags to get rid of the borders.

Here's an example which would divide the signature into three areas with the middle area being the widest:

[widthb=20%]left[/widthb]
[widthb=60%]middle[/widthb]
[widthb=20%]right[/widthb]

left

middle

right

Oops! The right column went to a second line. How can that be if the three specified percentages add up to 100 percent? Well, those percentages only apply to the contents of the box, not to the borders. Each border is 1 pixel wide and we have three columns with two borders each (left and right), so our total width is 6 pixels too big, causing the last column to drop down to the next line. If we change the [widthb] tags to [width], the problem goes away because there are no borders, so we can specify widths totalling 100%. But, for now, I'll just change the middle width to 59% so that the total width is only 99%. That should allow enough space for the borders so we can see what's going on while we develop our signature.

[widthb=20%]left[/widthb]
[widthb=59%]middle[/widthb]
[widthb=20%]right[/widthb]

left

middle

right

The height of each box depends on its contents. For example, if I add three lines of text to the middle box, we get this:

[widthb=20%]left[/widthb]
[widthb=59%]This
is the
middle[/widthb]
[widthb=20%]right[/widthb]

left

This
is the
middle

right

If I want all three boxes to be the same height, I have to put the same number of lines in each box. However, that doesn't matter so much with the [width] tags because it has no borders. But we might want to centre the contents of each box vertically for a more balance layout. Here, I've added a carriage return before and after "left" and "right" to centre those lines vertically within their boxes.

[widthb=20%]
left
[/widthb]
[widthb=59%]This
is the
middle[/widthb]
[widthb=20%]
right
[/widthb]

left

This
is the
middle

right

As you can see, that didn't work as I intended. For some reason which I haven't yet figured out, it seems to ignore the first carriage return so I have to add another.

[widthb=20%]

left

[/widthb]
[widthb=59%]This
is the
middle[/widthb]
[widthb=20%]

right

[/widthb]

left

This
is the
middle

right

You can also apply other BBcode tags to the content of each box. For example, you might want to centre the contents of the middle box and right-align the contents of the right box.

[widthb=20%]

left

[/widthb]
[widthb=59%][center]This
is the
middle[/center][/widthb]
[widthb=20%]

[right]right[/right]

[/widthb]

left

This
is the
middle

right

If you want to specify column widths in pixels instead of percentages, keep in mind that the total width of the signature area is currently 801 pixels. If you define columns whose total exceeds that width, you'll get a horizontal scroll bar in your signature.


Here's a more practical example containing a recorder icon, some music website icons, and a quotation. I've limited the total width to 785 pixels to allow for the borders and the slightly-reduced width of the message area compared to the signature area.

[widthb=86px][rec]Boss Micro BR[/rec][/widthb]
[widthb=399px][center][site=alonetone]http://alonetone.com/64guitars[/site]  [site=weebly]http://64guitars.weebly.com/[/site][/center][/widthb]
[widthb=300px]"Music is everybody's possession. It's only publishers who think that people own it."

  - John Lennon
[/widthb]

Boss Micro BR

 

"Music is everybody's possession. It's only publishers who think that people own it."

  - John Lennon

And here's the same example without borders and with a total width of 791 pixels (the maximum width inside a message is 10 pixels smaller than the width of the signature area).

[width=86px][rec]Boss Micro BR[/rec][/width]
[width=405px][center][site=alonetone]http://alonetone.com/64guitars[/site]  [site=weebly]http://64guitars.weebly.com/[/site][/center][/width]
[width=300px]"Music is everybody's possession. It's only publishers who think that people own it."

  - John Lennon
[/width]

Boss Micro BR

 

"Music is everybody's possession. It's only publishers who think that people own it."

  - John Lennon

Of course, the [width] and [widthb] tags aren't just limited to signatures. You can also use them in a message when you want to define multiple columns. For example, you might want to include a small picture in your message with some text beside it.

[width=180px]

[center]THE AGED-TEAM

Left to right:
Face, Murdock,
Hannibal
and
B.A. Baracus[/center]
[/width]
[width=180px]
[img width=160]https://songcrafters.org/Festivals/Norway2010/images/A-TEAM-460x420.png[/img]
[/width]

THE AGED-TEAM

Left to right:
Face, Murdock,
Hannibal
and
B.A. Baracus

I hope this new tag makes it easier to layout the various elements of your signature. If you have any questions about the [width] tag or other questions about signatures, ask them here.

[Flash Harry]

Rather cool LXIVG.

[Geir]

Thanks 64G!!  I especially like the withb tag, since the table tag dont have a border option (to my knowledge at least)

[BossMicroBRew]

Sorry for being a dud. Haha. I've poked around a bit but haven't found a place. Do we have a bank of bbcodes and associated images already in use on here? Asking for a friend. 

[64Guitars]

The basic ones are here:

https://wiki.simplemachines.org/smf/Alphabetical_list_of_all_bulletin_board_codes


We don't have a list of the custom BBcode tags that I've added but there are buttons for most of them above the message editor.



When you hover the mouse pointer over a button in the message editor, your browser should display a hint that describes the button's purpose and sometimes gives a clue to its usage. Clicking a button inserts the BBcode into the message at the current cursor position.