[LEARN] BBCode Lessons & Tutorials [+tutorial videos!]

[roslinpl]

I found this tool that can help those with almost no ability in drawing: https://manytools.org/hacker-tools/convert-image-to-ansi-art/go
Just upload a picture in the ANSI art converter and you will have a semblance of your picture.

Thanks.

However, the problem with those tools is explained here:  https://bitcointalk.org/index.php?topic=2198076.msg22105956#msg22105956


Best wishes.

[1715681574]

1715681574

[1715681574]

1715681574

[1715681574]

1715681574

[Umcka]

Great topic! Roslinpl you have flexible sign with autoresize. Could you please clarify what tag should be used for such behavior? Thank you for further reply.

[roslinpl]

Great topic! Roslinpl you have flexible sign with autoresize. Could you please clarify what tag should be used for such behavior? Thank you for further reply.

Hello,

thanks,
I don't use any special tags for my signature.
I just made the design width compatible for mobile devices.


Best wishes.

[typhucoin2]

Hello everyone,

I decided to start a thread where I can share my knowledge about Forum's BBCode.
Follow my lessons and tutorials and increase your skills, learn how to design and create your own BBCode signature or create one for someone else.

If you think it's a cool idea please reply and let me know.

		........................................Links.to.lessons:........................................	..................Links.to.Tips.&.Tricks:..................
███████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ███████████████████████████████████████	..............	Lesson 1:.Forum's signature styling rules Lesson 2:.BBCode signature max. height Lesson 3:.Senior/Hero/Legendary.Members.signature.table.template.(and.a.bit.about.tables...) Lesson 4:.BBCode Drawing Basics lvl.I Lesson 5:.BBCode Drawing Basics lvl.II Lesson 6:.Colors Lesson 7:.Colors - Gradients Lesson 8:.BBCode Drawing Basics lvl.III (video tutorial included) Lesson 9:."Inside of tables": Image size Lesson 10:."Advanced BBCode Drawing Techniques lvl.I" Lesson 11:."Advanced Character Saving Techniques part I" Lesson 12:.Coming soon	I II III IV V VI

Lesson 1: Forum's signature styling rules

RANK	LINKS	STYLING	BOLD LETTERS	ITALICIZED	UNDERLINED	TABLES	MAX. CHARS.
Newbies	no	no	no	yes	yes	no	50
Jr. Members	no	no	no	yes	yes	no	150
Members	yes	no	no	yes	yes	no	4000
Full Members	yes	font color, font face	yes	yes	yes	no	4000
Sr. Members	yes	yes (without 'glow')	yes	yes	yes	yes	4000
Hero/Legendary.Members	yes	yes	yes	yes	yes	yes	4000

Lesson 2: BBCode signature max. height

Signature max. height is same for all ranks.
Simple way to check what's the maximum possible height: While designing a signature - create a table column with 3 lines of text, in each line write a letter 'p'.

Remember: Profile signature space has 'same' cascading style sheets as a 'quote' -
- That's why anything below 3rd line 'p' will be not visible on your signature space.

p
p
p

Lesson 3: Senior/Hero/Legendary Members signature table template (and a bit about tables...)

Tables are made from columns and rows.
To create a table you need to create a table frame and rows. Rows contains columns.

Simple explanation in an example:
Open a table -> open a row with ie. 4 columns -> close a row -> create another row with 4 columns -> close a row -> close a table

In a code same example looks like:

Code:

[table]
[tr]
[td]
Row_1_column_1
[/td]
[td]
Row_1_column_2
[/td]
[td]
Row_1_column_3
[/td]
[td]
Row_1_column_4
[/td]
[/tr]
[tr]
[td]
Row_2_column_1
[/td]
[td]
Row_2_column_2
[/td]
[td]
Row_2_column_3
[/td]
[td]
Row_2_column_4
[/td]
[/tr]
[/table]

Preview:

Row_1_column_1	Row_1_column_2	Row_1_column_3	Row_1_column_4
Row_2_column_1	Row_2_column_2	Row_2_column_3	Row_2_column_4

When you want to create a new signature design (For Senior/Hero/Legendary Members) you can start with a template which will save your time:

Code:

[quote][table]
[tr]
[td]
p 
p
p - MAX. HEIGHT - 
[/td]
[td]
CONTENT
[/td]
[/tr]
[/table][/quote]

After design is ready remove 'quote' tags and your BBCode signature code is ready




Do you want more lessons?

Hi admin.
Why my account can not join signature campaign? I can not edit text at signature position. Please guiding me
Here is my profile: https://bitcointalk.org/index.php?action=profile;u=2359472

[Avirunes]

Hi admin.
Why my account can not join signature campaign? I can not edit text at signature position. Please guiding me
Here is my profile: https://bitcointalk.org/index.php?action=profile;u=2359472

There is a signature limitation present. Also nowadays signature campaigns don't allow newbie's rank. You should be either Member or higher.

I think you are new to the forum. I suggest you to go through some meta stickies and know how the ranking system works.

[Carrelmae10]

Hi admin.
Why my account can not join signature campaign? I can not edit text at signature position. Please guiding me
Here is my profile: https://bitcointalk.org/index.php?action=profile;u=2359472

..you cannot join signature campaign atleast you have rank jr. member with 1 merit..you'll need to post high quality post inorder to gain merits..most signature campaigns don't allow newbies..you'll need to work hard to gain more merits..just read this forum rule https://bitcointalk.org/index.php?topic=2818350.0

[roslinpl]

Hello,

I received a few similar questions, so I answer collectively.
If someone wants to translate this thread into other languages, please do it, I agree to this.


My requirements:
In translation thread please include the link to the original thread (https://bitcointalk.org/index.php?topic=1727100.0) and attribute the author (roslinpl).
Thank you.

[|Admiral|]

I have tried to learn bbcode everything is working find but cant create image. Still trying to know how to create image on bbcode.

[BlackMambaPH]

I have tried to learn bbcode everything is working find but cant create image. Still trying to know how to create image on bbcode.

This website helps me a lot when I'm creating an ASCII art for my signature design - https://asciiart.club/ . Just upload an image you want to create to and change the size to custom 45x45 or 40x40 size.

[cryptovigi]

Hello,

I received a few similar questions, so I answer collectively.
If someone wants to translate this thread into other languages, please do it, I agree to this.


My requirements:
In translation thread please include the link to the original thread (https://bitcointalk.org/index.php?topic=1727100.0) and attribute the author (roslinpl).
Thank you.

Thanks for your permission to translate the thread  your work will reach more forum users.

I have translated all lessons into Polish.
Link to my thread: [TUTORIAL] LEKCJE BBCode (tworzenie sygnatur)

[roslinpl]

Hello,

I received a few similar questions, so I answer collectively.
If someone wants to translate this thread into other languages, please do it, I agree to this.


My requirements:
In translation thread please include the link to the original thread (https://bitcointalk.org/index.php?topic=1727100.0) and attribute the author (roslinpl).
Thank you.

Thanks for your permission to translate the thread  your work will reach more forum users.

I have translated all lessons into Polish.
Link to my thread: [TUTORIAL] LEKCJE BBCode (tworzenie sygnatur)

Great

This thread has already been translated into at least two languages,
it seems to me that someone once translated it also into Russian, but I can't find it...

Found it
Russian translation: https://bitcointalk.org/index.php?topic=2991003.0
Polish translation: https://bitcointalk.org/index.php?topic=5132662.0

The 3rd one (Hindi Translation) seems deleted.


Best wishes.

[roslinpl]

Hello,

forum user Meowth05 did another translation of this thread in the Local> Pilipinas section.

https://bitcointalk.org/index.php?topic=5136214.0

The moderators removed his topic once, hence my request to forum moderators to set the same rules for local sections,
other translations have not been removed, I request to keep the same rules for the various local sections.

Thank you.

[merchantofzeny]

I'm inching like a worm through this tutorial. So far I've tried making a 4x4 square using block. I tried setting the size to both 2pt and 2px but they still seem to look the same.

Also BTW thanks for posting this. Been wanting to try this for a long time and read this thread before. Finally able to muster enough willpower to get started.

[Avirunes]

I tried setting the size to both 2pt and 2px but they still seem to look the same.

Well it will look same to you since you are just trying basic. The only difference you will see is the size but let me tell you that there is more to it. "pt" is actually cool to go with if you are trying to make something basic figure like take this for example

   
░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░██████████████████████

Basic and easily made using "pt"


"px" basically is smaller in comparison to "pt" and so it helps you to make much more complicated figures accurately but this usually takes time (if you are not using some sort of generators) and in addition to that takes up too much characters. So eventually it leaves you with less characters for making the rest of the signature design.

Below is the Icon of Ecomi.com which was used in their signature campaign. Source

▄▄▄,               ,,««═*█████U         ▄▄µ«*`,≤*Ö╫╨╨▀▀▀╙`╙╝▀Φ▄╥,        ,██▀╓ñ▄▄ª╩▒Ñ╨╨╜╙*ª¥#▄▓███╣▄ºw       A` ▄▀╙╫█▀``           ▀██▀═╣▌╦`██▄     ╓^ æ╩ ▄Å"`                 `ª,"▀Å▒▀╙    á ╔▀  ▓`                       ¥ ╙▒▄ ╙⌐   ╓░╬▌ ╓▀                          ╙U╬╙▌ ╙   ╫Φ▐ ╔▓                            `╬m'▄ ██  ,▄▄▌ ÑH                             ▐▄ ▓⌐ ⌐ ╢████╣:H                             ███╢╫ M `▀███▒ H                             ▐▀ M╫ M   ╫w▐▌ Φ                             Φ▌╓"╫╟   ╢╙,█ `U                           é▐.Ñ ▓H    Φ██▓ `w                        ,╩ ╬╣▄▄▌     N ╙█w %,,                    ≤",▓`███      ¥  ▀▓▓██▌                ,A^ ▄╨ ╦▀▀       ██H"Ñ▀╩▄▒╗          ,«▄███▄▀╓ª╫^          *╗,ºµ ╙▀▀Φ▓▓DD▄▄╓╦╦▀███▀╓ª`             `*╩Φ▄╥,  ╓█▌,«╧╨╓╓═╨`                     ╙╙▀╨""`

Above^^ was designed using "px". Accurate and fits into the signature space as well.

[big_daddy]

Hello!
Thank You for this great thread tutorial, I will try to follow all the lessons and learn how to make a custom signature

Is here anyone from this topic selling custom signature codes? cause I need one

[roslinpl]

Hello!
Thank You for this great thread tutorial, I will try to follow all the lessons and learn how to make a custom signature

Is here anyone from this topic selling custom signature codes? cause I need one

Thank you big_daddy

(I'm selling).

Best wishes.

[sr32703]

Thanks a lot from my heart. I have learned signature designing from you.

[merchantofzeny]

I tried setting the size to both 2pt and 2px but they still seem to look the same.

Well it will look same to you since you are just trying basic. The only difference you will see is the size but let me tell you that there is more to it. "pt" is actually cool to go with if you are trying to make something basic figure like take this for example

   
░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░██████████████████████

Basic and easily made using "pt"


"px" basically is smaller in comparison to "pt" and so it helps you to make much more complicated figures accurately but this usually takes time (if you are not using some sort of generators) and in addition to that takes up too much characters. So eventually it leaves you with less characters for making the rest of the signature design.

Below is the Icon of Ecomi.com which was used in their signature campaign. Source

▄▄▄,               ,,««═*█████U         ▄▄µ«*`,≤*Ö╫╨╨▀▀▀╙`╙╝▀Φ▄╥,        ,██▀╓ñ▄▄ª╩▒Ñ╨╨╜╙*ª¥#▄▓███╣▄ºw       A` ▄▀╙╫█▀``           ▀██▀═╣▌╦`██▄     ╓^ æ╩ ▄Å"`                 `ª,"▀Å▒▀╙    á ╔▀  ▓`                       ¥ ╙▒▄ ╙⌐   ╓░╬▌ ╓▀                          ╙U╬╙▌ ╙   ╫Φ▐ ╔▓                            `╬m'▄ ██  ,▄▄▌ ÑH                             ▐▄ ▓⌐ ⌐ ╢████╣:H                             ███╢╫ M `▀███▒ H                             ▐▀ M╫ M   ╫w▐▌ Φ                             Φ▌╓"╫╟   ╢╙,█ `U                           é▐.Ñ ▓H    Φ██▓ `w                        ,╩ ╬╣▄▄▌     N ╙█w %,,                    ≤",▓`███      ¥  ▀▓▓██▌                ,A^ ▄╨ ╦▀▀       ██H"Ñ▀╩▄▒╗          ,«▄███▄▀╓ª╫^          *╗,ºµ ╙▀▀Φ▓▓DD▄▄╓╦╦▀███▀╓ª`             `*╩Φ▄╥,  ╓█▌,«╧╨╓╓═╨`                     ╙╙▀╨""`

Above^^ was designed using "px". Accurate and fits into the signature space as well.

Thanks for the tips. That last sig looks pretty complicated. Don't know how many hours I'd need to learn to make that.

Seems the spacing also really matters. I installed Note++ and tried to separate stuff to make it easier to find unpaired tags but the results are different than when it's just a jumbled mess, LOL.

Also noticed these dots I have for sigs looked different now that I opened the forum in Edge instead of Chrome.

[merchantofzeny]

Do you guys like use any tools for designing the sigs? I'm just starting with blocks and I'll try them in Notepad or Note++ and when they get to the forum they'd be all jumbled.

[roslinpl]

Why not to try your ASCII blocks in here, by previewing your post? For me it works the best.

Thanks a lot from my heart. I have learned signature designing from you.

You are welcome.