Topic: BTT SIGNATURE FOR DUMMIES - by a guy who learnt from scratch (Read 109 times)

Hello everybody!

Some time ago I found myself in the need to make my signature with BBCode so my Crypto project can look awesome in BTT. I had some troubles finding all the information I needed to get started to design and code it.

It was pretty hard to learn so I decided that I  would like to share what I've learned with all of you.

First, before designing a firm you should know the forum's limitation and rules:

• All signatures have a 42px height limit (About 32pt font size)
• Newbie: No styling. No links. Max 50 characters per post.
• Jr. Member: Max 150 characters per post.
• MemberLinks allowed. Maximum 4000 characters.
• Full Member:Colors allowed. Personal images allowed.
• Sr. Member:Font size allowed.
• Hero Member/Legendary:Background color allowed.

Higher ranks do everything lower ranks can do.

PSD is your friend!! Start designing your signature in PSD then go to BBCode. I did that!!



Now we need to have a look at our tools:

To define what kind of style we want to give to our text we have to use tags.These tags are part of the chararacters limits, so every tag you use, you have less space for your signature!. A tag's syntax is always "[ the type of styling we want to have ] the text we want to show [ close the tag] ". These are easy to understand and easy to use.
Bold: It makes the text stand out, best used when you want to attract attention to certains words in the text.
Italice: It also makes the text stand out but a lot less than bold, usually used for some snippets in long texts so probably if you use it for the signature will be purely cosmetic.

Underline: It serves the exact same purpose that italice does, and you shouldn't use both italice and underline in the same text.
Aligns: There are four types of align: Preformatted, left align, center and right align. In this tutorial I have been using center for the code and examples snippets.
Tables:  Tables are the most useful tool you have when creating the signature. It allows you to choose exactly were the text should go by having both columns and rows.
This tag might look intimidating, but it is really easy to understand. First, "table" makes all the text inside the tag to be shown in a table, "tr" tag means you are separating this tag's content in a row and 'td' you are separating the content in a column.
For every new "tr" tag inside a "table" tag you can create a new row.
For every new "td" tag inside a "tr" tag you can create a new column in that row.
Font Size: Self explanatory, it changes the font size.
Remember, the maximum height can not be more than 32pt!
Font face: Changes the text font, but it can only show fonts that the viewer has!
Change color: This changes the letters color, you can use the hexadecimal code(#RRGGBB, R=red, G=green, B=blue, the values go from 00 to FF; A=10 and F=15)  or simply put the colors name.
The hexadecimal code allows you to get up to 16777216 different colors.
Glow: This is a poor's man background, but it is the only one we have. It allows you to change the letters background color, but not resize it in any way.
Links: This will allow us to make a custom text link to any page we want.
Images: Bitcointalk doesn't allow images in the signatures, so me have to transform it to ASCII. For this there are plenty of webpages that can do it for us, but we can also draw it using characters. There are a lot of diferent characters, but the two most useful are the full character"█"(alt + 249) and the whitespace character" "(alt + 255).
First, me have to choose an image. I will use my logo:

And this is how it will look like:

██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████
██████████████████████████████████████████████

The code is rather simple, but it can get tedious to make. I'll show it the first 3 rows.
Now, for a good signature you will need:

• A logo
• The name
• A really brief description
• Some keywords that could fit your project
• Links

Now we know everything we can and can not do in our signature, I'll give a quick example, and if this post gains traction I could do and explain step by step a signature you want to have, but don't know how to do.
As you can probably see, the signature has a simplistic look to it, The only colors it has is black and white, and the latter is only in the logo, but still, this signature has ~3000 characters. Now I'll separate each part of the signature (I'll skip the logo, as I already explained it)