BTT SIGNATURE FROM SCRATCH - by a guy who learnt to don't bother the devs

[Neo-Design]

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.

Code:

I'm making my first [b]signature[/b]

I'm making my first signature

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.

Code:

This [i]stylish looking[/i] text

This stylish looking text

Underline: It serves the exact same purpose that italice does, and you shouldn't use both italice and underline in the same text.

Code:

This [u]word[/u] could use it

This word could use it

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.

Code:

[right]Right[/right]

Right

Code:

[center]Center[/center]

Center

Code:

[left]Left[/left]

Left

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.

Code:

[table][tr][td]/////\\\\\[/td][td]Column 1[/td][td]Column 2[/td][/tr]
[tr][td]Row 1[/td][td]1/1[/td][td]2/1[/td][/tr]
[tr][td]Row 2[/td][td]1/2[/td][td]2/2[/td][/tr][/table]

/////\\\\\	Column 1	Column 2
Row 1	1/1	2/1
Row 2	1/2	2/2

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.

Code:

[table]
[tr][td]1[/td][/tr]
[tr][td]2[/td][/tr]
[/table]

1

2

For every new "tr" tag inside a "table" tag you can create a new row.

Code:

[table]
[tr][td]1[/td][/tr]
[tr][td]2[/td][/tr]
[tr][td]3[/td][/tr]
[/table]

1

2

3

For every new "td" tag inside a "tr" tag you can create a new column in that row.

Code:

[table]
[tr][td]1[/td][td]A[/td][/tr]
[tr][td]2[/td][td]B[/td][/tr]
[tr][td]3[/td][td]C[/td][/tr]
[/table]

1	A
2	B
3	C

Font Size: Self explanatory, it changes the font size.

Code:

[size=10pt]small[/size][size=20pt]BIG[/size]

smallBIG

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!

Code:

[font=Verdana]Verdana[/font]
[font=Courier New]Courier New[/font]

Verdana
Courier New

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.

Code:

[color=red]I am Red![/color]
[color=#FF0000]I am also Red![/color]

I am Red!
I am also Red!

The hexadecimal code allows you to get up to 16777216 different colors.

Code:

[color=#AA502A]H[/color][color=#1CD200]e[/color][color=#2CE2F0]l[/color][color=#0CD0FF]l[/color][color=#42F211]o[/color]

Hello

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.

Code:

[glow=red,2,300]My background is Red[/glow]

My background is Red

Links: This will allow us to make a custom text link to any page we want.

Code:

[url=bitcointalk.org]I want to go to bitcointalk[/url]

I want to go to bitcointalk

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 + 219) 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.

Code:

[size=2pt]
███████████[color=white]███[/color]████████████████████[/color][color=white]██[/color]██████████
███████████[color=white]████[/color]█████████████████[/color][color=white]████[/color]██████████
███████████[color=white]██████[/color]██████████████[/color][color=white]█████[/color]██████████
...
[/size]

Remember that you only have (up to) 4000 characters to use! this logo uses almost 3k, so you might need to sacrifice something else in your signature to put it

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.

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

CryptoMotors™

PRO-CAR DESIGN - BLOCKCHAIN + GAMES + 3D

The First Digital Automaker

-DISCORD -TWITTER

-INSTAGRAM -MEDIUM

-FACEBOOK -REDDIT

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)

Code:

[table]
...
[td]
[size=20pt] [url=https://bit.ly/2M0NTPm][b]  CryptoMotors™[/url]
[/td][code]
In this part, I used size, url and bold. Size and bold were used because the name is what should be remembered when doing a signature, and so, it has to draw the eyes towards it. the link simply goes to the home page.
[code][td][b]
PRO-CAR DESIGN - BLOCKCHAIN + GAMES + 3D
[/td]

Much more simple, it has to explain briefly(mostly because the logo has too many characters, with a simpler logo it could be a lot longer) the content.

Code:

[td]
[size=21pt][b] The First Digital Automaker[/b][/size]
[/td]

Again, bigger and bold, another thing that should draw attention,

Code:

[td][b]
[url=bit.ly/2PECmHy][color=black]-DISCORD[/url]
[url=bit.ly/2wNUHed][color=black]-TWITTER[/url]
[/td]
[td][b]
[url=bit.ly/2M4ky6q][color=black]-INSTAGRAM[/url]
[color=black]-MEDIUM   
[/td]
[td][b]
[url=bit.ly/2NO1POc][color=black]-FACEBOOK[/url]
[color=black]-REDDIT     
[/td]
[/tr][/table]

And to close the signature, a bunch of links, if you don't have enough characters left, you could use a link shortener.

I hope you find this tutorial useful, and if you have some question I will answer it![/code][/code]

[Neo-Design]

Guys! Let me know if somebody needs support with his own signature. I will try to give you a hand. cheers

[nakamura12]

Nice job you made there. I'm sure you can also earn cryptocurrency by selling signature designs for those who start a project, im that way you won't spam the forum. If only I can share some of time i'd like to learn how to design signatures especially if you made it good and within the limit that a user each rank can input in their profile.

[Neo-Design]

Nice job you made there. I'm sure you can also earn cryptocurrency by selling signature designs for those who start a project, im that way you won't spam the forum. If only I can share some of time i'd like to learn how to design signatures especially if you made it good and within the limit that a user each rank can input in their profile.

Hey, Thanks! I appreciate that you like the post.

Well, I am happy to help users with their signatures. if somebody really needs one and don't want to spend any time designing and coding it with pleasure I would offer the service to do it.
But my main intention with the post is to helping to spread knowledge.

Cheers!

[Obiwankenodium]

Nice work man, im sure this is really helpful for people which need to create s signature.

You should edit the underline part though, its the same as italic now.

[Neo-Design]

Nice work man, im sure this is really helpful for people which need to create s signature.

You should edit the underline part though, its the same as italic now.

Hey ! Thanks !
I corrected already the underline, thanks for that

[joniboini]

There is already a guide on BBCode signature by roslinpi.[1] Have you checked it before posting this guide?
https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187

[Neo-Design]

There is already a guide on BBCode signature by roslinpi.[1] Have you checked it before posting this guide?
https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187

I hope my post brings value to the community... Don't you think so?

[Neo-Design]

There are a lot of diferent characters, but the two most useful are the full character"█"(alt + 249) and the whitespace character" "(alt + 255).

I have tried to do this Full character "█" by doing the short cut key of (alt + 249).

Here is the result.

alt + 249 = ∙∙∙∙∙∙∙∙∙∙∙∙∙ There could be some mistake on this one could you review this part?

alt + 255 =        (This one is correct for white space character)

Thanks!!!

Now it is corrected!