Bitcointalk Mobile Browser presented by IRLBTC™

>> (p.1)

Author

Topic: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] (Read 42887 times)

roslinpl (OP)

Legendary

Offline

Activity: 2212
Merit: 1199

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

December 24, 2016, 04:53:17 AM
Last edit: March 18, 2018, 04:54:03 PM by roslinpl

Merited by Cyrus (10), suchmoon (10), zazarb (10), bones261 (10), LoyceV (6), malevolent (6), Welsh (5), julerz12 (5), darklus123 (5), Be_Happy (5), CHRISBIN702 (4), mprep (3), Betwrong (3), irfan_pak10 (3), pawel7777 (3), th3nolo (3), sir.humus (3), yxt (2), Halab (2), Joel_Jantsen (2), redsn0w (2), vlom (2), RickDeckard (2), apoorvlathey (2), BitFinnese (2), OgNasty (1), Daniel91 (1), o48o (1), Potato Chips (1), sabotag3x (1), yefi (1), Coin-1 (1), madnessteat (1), u9y42 (1), sujonali1819 (1), Little Mouse (1), Bthd (1), TMAN (1), jhenfelipe (1), Jannn (1), HabBear (1), millgates (1), cryptovigi (1), Kang Bahar (1), butka (1), coinliker (1), mobilazy (1), temarazin (1), manji (1), zoose (1), Wunderkind (1)

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.

Quote

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?

izanagi narukami

Legendary

Offline

Activity: 2058
Merit: 1028

Re: [LEARN] BBCode Lessons & Tutorials

December 24, 2016, 04:22:58 PM

Quote from: roslinpl on December 24, 2016, 04:53:17 AM

....

Do you want more lessons?

Ofcourse

How do you do this ?

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

Is there any software or you just made it pixel by pixel ?
If that's so , for how long you made that image ?

Even if I found online BB image creator , the result can't be good as yours

TastyChillySauce00

Legendary

Offline

Activity: 3444
Merit: 1042

Leading Crypto Sports Betting & Casino Platform

Re: [LEARN] BBCode Lessons & Tutorials

December 25, 2016, 05:52:35 AM
Last edit: December 26, 2016, 11:23:02 AM by aubert

I just figured out when making a signature that the real character limit is not 4000 but 3899. Whenever I make a signature and if it surpasses 3899 characters it will cut off and left 101 characters remaining.
Maybe there's an explanation about it?

..^Stake.com..

▄████████████████████████████████████▄ ██ ▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄ ██ ▄████▄ ██ ▀▀▀▀▀▀▀▀▀▀ ██████████ ▀▀▀▀▀▀▀▀▀▀ ██ ██████ ██ ██████████ ██ ██ ██████████ ██ ▀██▀ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██████ ██ █████ ███ ██████ ██ ████▄ ██ ██ █████ ███ ████ ████ █████ ███ ████████ ██ ████ ████ ██████████ ████ ████ ████▀ ██ ██████████ ▄▄▄▄▄▄▄▄▄▄ ██████████ ██ ██ ▀▀▀▀▀▀▀▀▀▀ ██ ▀█████████▀ ▄████████████▄ ▀█████████▀ ▄▄▄▄▄▄▄▄▄▄▄▄███ ██ ██ ███▄▄▄▄▄▄▄▄▄▄▄▄ ██████████████████████████████████████████

Play
Smarter

▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ █ ▄▀▄ █▀▀█▀▄▄ █ █▀█ █ ▐ ▐▌ █ ▄██▄ █ ▌ █ █ ▄██████▄ █ ▌ ▐▌ █ ██████████ █ ▐ █ █ ▐██████████▌ █ ▐ ▐▌ █ ▀▀██████▀▀ █ ▌ █ █ ▄▄▄██▄▄▄ █ ▌▐▌ █ █▐ █ █ █▐▐▌ █ █▐█ ▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀█

Leading Crypto Sports Betting
&&&&& Casino Platform

▄▄█████████▄▄ ▄██▀▀▀▀█████▀▀▀▀██▄ ▄█▀ ▐█▌ ▀█▄ ██ ▐█▌ ██ ████▄ ▄█████▄ ▄████ ████████▄███████████▄████████ ███▀ █████████████ ▀███ ██ ███████████ ██ ▀█▄ █████████ ▄█▀ ▀█▄ ▄██▀▀▀▀▀▀▀██▄ ▄▄▄█▀ ▀███████ ███████▀ ▀█████▄ ▄█████▀ ▀▀▀███▄▄▄███▀▀▀

..^{PLAY NOW}..

azguard

Legendary

Offline

Activity: 1484
Merit: 1001

Crypto-News.net: News from Crypto World

Re: [LEARN] BBCode Lessons & Tutorials

December 26, 2016, 10:35:52 AM

This is very interesting i made several contest here but no luck much better design then mine still i started to learn this 6 month ago and still have some thing that i dont know but i will watch some of your tutorials in future. Maybe i will won once in future 10x to your tutorials.

▄▄▄██████▄▄▄
▄██████████████████▄
   ▄████████████████████████▄
▄▄ ▄████████████████████████████▄
███████████████████████████████████▄
▀▀█████████████████████████████████▄
   ██████████████████████████████████
   ██████████████████████████████████
   ██████████████████████████████████
   ██████████████████████████████████
   ▀████████████████████████████████▀
▀██████████████████████████████▀
   ▀▀██████████████████████████▀
▀██████████████████████▀
   ▀▀▀████████████▀▀▀

.CryptoNews

.....█
.....█
.....█
.....█
.....█
.....█

.....NEWS FROM THE WORLD OF CRYPTOCURRENCIES.....
.BITCOIN ▩ ETHEREUM ▩ ALT COINS ▩ EVENTS ▩ GAMBLING ▩ TRADING.

█
█
█
█
█
█

veleten

Legendary

Offline

Activity: 2030
Merit: 1107

Re: [LEARN] BBCode Lessons & Tutorials

December 26, 2016, 11:17:36 AM

a very interesting thread,please continue
it is always a pleasure to read some info that can be used to improve your skills
some people can even make money with contests or creating paid signatures for campaigns as a result
so yes,we are waiting for more lessons, BBCODE sensei Grin

▄▄████▄▄ ▄▄███▀ ▀███▄▄ ▄████████▄▄▄▄████████▄ ▀██████████████████████▀ ▐█▄▄ ▀▀████▀ ▀████▀▀ ▄▄██ ▐█████▄▄ ▀██▄▄▄▄██▀ ▄▄██▀ █ ▐██ ▀████▄▄ ▀██▀ ▄▄████ ▄██ ▐██ ███████▄ ▄████████████ ▐██ █▌▐█ ▀██ ██████▀ ████ ▐██ █▌▐█ ██ █████ ▄█████ ███▄ ▌▐█ ██ ████████████▀ ▀▀████▄ ▄██ ██▀ ████▀▀ ▀▀█████ █ ▄██▀▀ ▀▀██ ██▀▀

.WINDICE.

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

▄████████▀ ▄████████ ▄███████▀ ▄███████▀ ▄█████████████ ▄████████████▀ ▄███████████▀ █████▀ ████▀ ████ ███▀ ██▀ █▀

Instant
Payouts

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

▄▄█████▄ ▄▄▄▄ ██████████▄███████▄ ▄████████████████████▌ ████████████████████████ ▐████████████████████████▌ ▀██████████████████████▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▄█ ▄█ ▄█ ▄██▌ ▄██▌ ▄██▌ ▀▀▀ ▀▀▀ ▀▀▀ ▄█ ▄█ ▄██▌ ▄██▌ ▀▀▀ ▀▀▀

Chat
Rain

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

▄█▄ ▄█████▄ █████████▄ ▄ ██ ████████▌ ▄███▄ ▐█▌▐█████████ ▄███████▄ ██ ▀███████▀ ▄███████████▄ ▀██▄▄████▀ ▐█ ▄███████████ ▀▀▀▀ █ █████████████▌ ▄ █▄▀████████████▌ ▄███▄ ▐█▄▀███████████ ▐█▐███▌ ▀██▄▄▀▀█████▀ ▀█▄█▀ ▀▀▀███▀▀▀

Progressive
Faucet Game

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

▄▄████████▄▄ ▄████████████████▄ ▄████████████████████▄ ██████████████▀▀▀███████ █████ ▀██████▀ ▄█████ ▐█████▄ ▀▀▀ ██████▌ ▐█████▄ ▄██████▌ ▐██████▄ ▄███████▌ █████▀▀▀ ▄█████████ █████▄▄ ▄▄██████████ ▀████████████████████▀ ▀████████████████▀ ▀▀████████▀▀

▄▄████████▄▄ ▄████████████████▄ ▄████████████████████▄ ███████████████▀▀ █████ ████████████▀▀ ██████ ▐████████▀▀ ▄▄ ██████▌ ▐████▀▀ ▄█▀▀ ███████▌ ▐████████ █▀ ███████▌ ████████ █ ▄███▄ ███████ ████████████████▄▄██████ ▀████████████████████▀ ▀████████████████▀ ▀▀████████▀▀

ie^{Play Now}ei

I
I
I
I

[/t

jamalaezaz

Copper Member
Hero Member

Offline

Activity: 1890
Merit: 533

Re: [LEARN] BBCode Lessons & Tutorials

December 26, 2016, 03:24:47 PM

Yes. I want more lessons. please continue that..

can't you make video tutorials for this?

Available For CM/SMM, Content Writing and Digital Marketing
TG: @jamalaezaz

jaceefrost

Hero Member

Offline

Activity: 826
Merit: 1001

Re: [LEARN] BBCode Lessons & Tutorials

December 27, 2016, 06:10:50 AM

I wish there is some kind of a tutorial on how to convert an image to bbcode or maybe which service or an app to use to make it possible. It will be helpful for some people who wants to experiments with signature designings.

Jemzx00

Hero Member

Offline

Activity: 1596
Merit: 549

Be nice!

Re: [LEARN] BBCode Lessons & Tutorials

December 27, 2016, 04:29:23 PM

Wow, I will be gladly to learn how to make a customized signature design on my own. I'll be watching this thread to learn more. Please continue. It'll be better if there's a video but words are good too.

█████████████████████████
████████▀▀████▀▀█▀▀██████
█████▀████▄▄▄▄██████▀████
███▀███▄████████▄████▀███
██▀███████████████████▀██
█████████████████████████
█████████████████████████
█████████████████████████
██▄███████████████▀▀▄▄███
███▄███▀████████▀███▄████
█████▄████▀▀▀▀████▄██████
████████▄▄████▄▄█████████
█████████████████████████

BitList

█▀▀▀▀
█
█
█
█
█
█
█
█
█
█
█
█▄▄▄▄

▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
.
REAL-TIME DATA TRACKING
CURATED BY THE COMMUNITY
.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄

▀▀▀▀█
█
█
█
█
█
█
█
█
█
█
█
▄▄▄▄█

List #kycfree Websites

ibuddy122505

Sr. Member

Offline

Activity: 1102
Merit: 261

Vave.com - Crypto Casino

Re: [LEARN] BBCode Lessons & Tutorials

December 28, 2016, 03:13:58 PM
Last edit: January 04, 2017, 05:25:27 PM by ibuddy122505

What a wonderful tutorial!Much appreciated your harvesting job among the forum users.Specially I'm so much attract this tutorial coz I've pretty much interest to make my own a nice BBCode.I must sure i can do this after seeing this full BBCode Lessons & Tutorials. Grin

Waiting next lessons though.

.V A V E . C O M.

CRYPTO CASINO & BETTING PLATFORM

❰❰

EXCLUSIVE  OFFERS.
..FULL  ANONYMITY.
.LEGENDARY  BONUSES

🎁

PROMO CODE:..VAVE20FS.
20 EXTRA FS + ACCESS.
TO THE NEXT CONTESTS

❱❱

..P L A Y N O W..

NO KYC REQUIRED INSTANT SIGN-UP

roslinpl (OP)

Legendary

Offline

Activity: 2212
Merit: 1199

Re: [LEARN] BBCode Lessons & Tutorials

December 28, 2016, 05:49:39 PM
Last edit: December 30, 2016, 05:55:00 AM by roslinpl

#10

Hello everyone,

I had no time during X-mas to write another lesson, but today it's time to share some more knowledge with you.

Quote from: izanagi narukami on December 24, 2016, 04:22:58 PM

Ofcourse

How do you do this ?
(...)

Is there any software or you just made it pixel by pixel ?
If that's so , for how long you made that image ?

Even if I found online BB image creator , the result can't be good as yours

Thanks for a question. I don't use any image converters etc. I always draw such things pixel by pixel. Controller image was pretty simple. It took perhaps 15-20min because it's one color and pretty straight lines. I'm going to explain in details and teach you how to do it during next lessons

Quote from: aubert on December 25, 2016, 05:52:35 AM

Tips & Tricks (1): The Forum's signature characters limit is 4000 chars but Forum's software counts white spaces and line breaks.

If we write 4000 characters in a single line this forum software will allow us to use exactly 4000 characters.
A code box below contains 4000 chars, you can test signature char limit with it:

Code:

1234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891230

Quote from: jamalaezaz on December 26, 2016, 03:24:47 PM

(...) can't you make video tutorials for this?

Quote from: Jemzx00 on December 27, 2016, 04:29:23 PM

(...) It'll be better if there's a video but words are good too.

In the future it's possible, but unfortunately the creation of videos takes much more time. In the future for sure I will try to make such videos, but for the moment I will focus on the text version.

Best regards.

darklus123

Hero Member

Offline

Activity: 1246
Merit: 588

Re: [LEARN] BBCode Lessons & Tutorials

December 28, 2016, 07:52:22 PM

#11

II really wanted to learn BBcodes to have a side line in this forum, Thank you so much i hope that you could update the tutorials above and if you can create some video tutorials that would be great. Just want to ask something were can we possibly test those codes? Especially if we do not have hero/sr ranks accounts for testing

cheers,

roslinpl (OP)

Legendary

Offline

Activity: 2212
Merit: 1199

Re: [LEARN] BBCode Lessons & Tutorials

December 29, 2016, 02:39:16 AM
Last edit: January 06, 2017, 02:12:50 AM by roslinpl

Merited by darklus123 (2)

#12

Quote from: darklus123 on December 28, 2016, 07:52:22 PM

Hey,

in my opinion the best environment for testing is Google Chrome web browser and a 'post preview' and if we do everything right the signature should work just fine.

1) When you're working on a signature put your signature code inside 'quote' tags. 'Quoted text box' has similar style as 'signature space'.
2) Remember about signatures styling rules.
3) If everything looks good you can remove 'quote' tags and copy your signature code into your profile settings.

roslinpl (OP)

Legendary

Offline

Activity: 2212
Merit: 1199

Re: [LEARN] BBCode Lessons & Tutorials

December 29, 2016, 03:54:44 AM
Last edit: March 18, 2018, 10:04:22 PM by roslinpl

#13

Lesson 4: BBCode Drawing Basics lvl.I

When we want to reproduce the image in the BBCode we have to remember a few very important Forum's BBCode principles:

Personally I've tested many different methods and I'm sure that the best method is to manually draw an image pixel by pixel. BBCode image converters/generators doesn't meet my expectations, I don't recommend any and I don't use any of them.

After almost 3 years of experience with BBCode signatures designs, I'm sure that if we want our signature to be highly compatible with different operating systems and web browsers we should use a characters in size 2pt while creating a BBCode image for a signature.

The best ASCII characters which I recommend to use for your BBCode images are: " ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ "
But mostly I use " █ " and always in a size 2pt. Which is most compatible for different web browsers and different operating systems.

Why I don't use 2px or 1pt or 1px?
If everyone will use Google Chrome, then it's pretty cool to use 2px, 1px or something smaller than 2pt. You can possibly get more details in your BBCode images.

Unfortunately the characters smaller than 2pt used in the BBCode signatures will looks stretchy or will shrink too much on different web browsers and operating systems which means that in reality the signature looks good for a smaller part of the visitors.

Signature BBCode design isn't as flexible as HTML + CSS designs, which also might looks different on different web browsers.

Quote from: IMPORTANT UPDATE

With the current versions of Chrome/Mozilla/Safari browsers I suggest using 2px Monospace font when drawing with BBCode.
As mentioned in lesson 10.

Experiment: Draw a square in BBCode. Use same ASCII character " █ " in different sizes: 2pt, 2px, 1pt, 1px.

Preview that BBCode square under different browsers like Chrome/Mozilla/Opera/Edge/Safari/etc.

Quote

2pt→

2px→

1pt→

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

1px→

Please note that square drawn with a character in a size 2pt on most browsers look the same. It's most compatible. Other squares drawn with the same ASCII character in different character sizes looks stretchy shrunken on other web browsers. 2pt ASCII characters are not 100% compatible but after years of experiments I'm sure that it's highly compatible.

Quote from: IMPORTANT UPDATE

With the current versions of Chrome/Mozilla/Safari browsers I suggest using 2px Monospace font when drawing with BBCode.
As mentioned in lesson 10.

roslinpl (OP)

Legendary

Offline

Activity: 2212
Merit: 1199

Re: [LEARN] BBCode Lessons & Tutorials

December 29, 2016, 04:13:10 AM
Last edit: March 18, 2018, 10:05:40 PM by roslinpl

#14

Lesson 5: BBCode Drawing Basics lvl.II

O.K. So, no we know that it's a good choice to use 2pt █ ASCII character for our BBCode images. But how to draw a nice one with it?

The patience and a bit of artistic sense will lead us to our goal

You need to practice and experiment with it to feel it.

Quote from: IMPORTANT UPDATE

With the current versions of Chrome/Mozilla/Safari browsers I suggest using 2px Monospace font when drawing with BBCode.
As mentioned in lesson 10.

Exercise: Selected ASCII characters for our BBCode image: ░ and █

Step 1) Draw a rectangle with █ ASCII chars. Remember about max. height. (Lesson 2).

Quote

Step 2) Draw Pad arrows with ░ ASCII chars.

Quote

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

Step 3) Draw Pad buttons with ░ ASCII char.

Quote

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

Step 4) Round the Pad border with ░ ASCII char.

Quote

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

Exercise code:

Code:

[b]Step 1)[/b] Draw a rectangle with █ ASCII chars. Remember about max. height. ([url=https://bt.irlbtc.com/view/1727100.msg17283187#msg17283187]Lesson 2[/url]).
[quote][size=2pt]█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 2) [/b]Draw Pad arrows with ░ ASCII chars.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 3) [/b]Draw Pad buttons with ░ ASCII char.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 4)[/b] Round the Pad border with ░ ASCII char.
[quote][size=2pt]░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░[/size][/quote]

azguard

Legendary

Offline

Activity: 1484
Merit: 1001

Crypto-News.net: News from Crypto World

Re: [LEARN] BBCode Lessons & Tutorials

December 29, 2016, 09:21:31 AM

#15

Quote from: roslinpl on December 29, 2016, 03:54:44 AM

Lesson 4: BBCode Drawing Basics lvl.I:

After almost 3 years of experience with BBCode signatures designs, I'm sure that if we want our signature to be highly compatible with different operating systems and web browsers we should use a characters in size 2pt while creating a BBCode image for a signature.

The best ASCII characters which I recommend to use for your BBCode images are: " ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ "
But mostly I use " █ " and always in a size 2pt. Which is most compatible for different web browsers and different operating systems.

Why I don't use 2px or 1pt or 1px?
If everyone will use Google Chrome, then it's pretty cool to use 2px, 1px or something smaller than 2pt. You can possibly get more details in your BBCode images.

Unfortunately the characters smaller than 2pt used in the BBCode signatures will looks stretchy or will shrink too much on different web browsers and operating systems which means that in reality the signature looks good for a smaller part of the visitors.

This is what was problem with my workout i was trying to create with 3, 4, or even with 5px, i have one question instead on px size you mostly use pt size, maybe this was error in my end i try many different sizes and always ended with not lining up and that was problem from this lesson.

I will implement this into my test signatures for future development and this was very good help.

.CryptoNews

.....█
.....█
.....█
.....█
.....█
.....█

.....NEWS FROM THE WORLD OF CRYPTOCURRENCIES.....
.BITCOIN ▩ ETHEREUM ▩ ALT COINS ▩ EVENTS ▩ GAMBLING ▩ TRADING.

█
█
█
█
█
█

roslinpl (OP)

Legendary

Offline

Activity: 2212
Merit: 1199

Re: [LEARN] BBCode Lessons & Tutorials

December 29, 2016, 01:51:39 PM
Last edit: July 07, 2017, 03:53:15 PM by roslinpl

Merited by vapourminer (3), LoyceV (1)

#16

Lesson 6: Colors

To change the color of BBCode signature design elements simply add a color attribute.

Code:

[color=#value][/color]

Color attribute value accept verbal color names like "Black, White, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, Lime Green"
but also accept colors hexadecimal forms and shorthand hexadecimal forms which will save few characters. (signature char. limits are not so big, save as much characters as you can

)

Shorthand hexadecimal form examples:

Hexadecimal.form	........Shorthand.hexadecimal.form........
#000000	#000
#ffffff	#fff
#77CC33	#7C3
#33CC99	#3C9

There is also a 'transparent' BBCode color attribute value which is very useful for BBCode images.

Quote

This text is visible BUT THIS ONE ISN'T This text is visible

Code:

This text is visible [color=transparent]BUT THIS ONE ISN'T[/color] This text is visible

Tips & Tricks (2): How to avoid table bug/glitch

Quote from: table_glitch

THIS TEXT SHOULD BE IN THE SAME LINE

Table bug/glitch occurs only in posts it doesn't occur after copy&pasting the code into profile's signature.

But sometimes we need to make a nice table in a post. How to avoid table glitch/bug?
Remove white spaces and replace them with a 'dot' character and make that 'dot' transparent (or in background 'glow' color if present).

Quote from: fixed_table_glitch

THIS.TEXT.SHOULD.BE.IN.THE.SAME.LINE

Code:

[table]
[tr]
[td]
THIS[color=transparent].[/color]TEXT[color=transparent].[/color]SHOULD[color=transparent].[/color]BE[color=transparent].[/color]IN[color=transparent].[/color]THE[color=transparent].[/color]SAME[color=transparent].[/color]LINE
[/td]
[td]
THIS[color=transparent].[/color]TEXT[color=transparent].[/color]SHOULD[color=transparent].[/color]BE[color=transparent].[/color]IN[color=transparent].[/color]THE[color=transparent].[/color]SAME[color=transparent].[/color]LINE
[/td]
[/tr]
[/table]

[table]
[tr]
[td]
[glow=#000,1][color=#fff]THIS[color=#000].[/color]TEXT[color=#000].[/color]SHOULD[color=#000].[/color]BE[color=#000].[/color]IN[color=#000].[/color]THE[color=#000].[/color]SAME[color=#000].[/color]LINE
[/td]
[td]
[glow=#000,1][color=#fff]THIS[color=#000].[/color]TEXT[color=#000].[/color]SHOULD[color=#000].[/color]BE[color=#000].[/color]IN[color=#000].[/color]THE[color=#000].[/color]SAME[color=#000].[/color]LINE
[/td]
[/tr]
[/table]

blockman

Hero Member

Offline

Activity: 3360
Merit: 650

The largest #BITCOINPOKER site to this day

Re: [LEARN] BBCode Lessons & Tutorials

December 30, 2016, 11:23:28 AM

#17

I will not just read and follow for now this thread but I will comment and wanted to say thanks for this roslinpl what a very helpful tutorial, gonna follow this thread until you will teach us what you know (I hope so.)
Very generous person, since I was a failed programmer in C,C#,C++ and java. I will now focus more with BB coding and I already have a hope for now with BBCode. Kudos roslinpl! I will stay tune for more tutorials, happy holidays!

BITCOIN
POKER

♠ ♦ ♥ ♣

ANONYMOUS. LOW RAKE. FAST CASHOUTS
DAILY TOURNAMENTS | CASH GAMES | 24/7 FREEROLLS

♠ ♦ ♥ ♣

EST.
2015

^PLAY NOW

veleten

Legendary

Offline

Activity: 2030
Merit: 1107

Re: [LEARN] BBCode Lessons & Tutorials

December 30, 2016, 11:32:20 AM

#18

@OP
but if I have no option to draw the code pixel by pixel,or have no talent in drawing things (everything I draw looks like a piece of sh...)
I know that you do not use online image to BBCODE convertors
still is there any that you could recommend? any decent at all?

.WINDICE.

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

Instant
Payouts

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

Chat
Rain

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

Progressive
Faucet Game

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

ie^{Play Now}ei

I
I
I
I

[/t

roslinpl (OP)

Legendary

Offline

Activity: 2212
Merit: 1199

Re: [LEARN] BBCode Lessons & Tutorials

January 06, 2017, 02:04:52 AM
Last edit: January 06, 2017, 04:35:42 AM by roslinpl

#19

Lesson 7: Colors - Gradients

To create a gradient for your texts or BBCode images it's possible to save a lot of time with the 'Text Color Fader' - gradient generator

When I was less experienced with BBCodes I was doing gradients manually. With graphic editors I was drawing squares with gradient backgrounds and then manually and after placing guide lines all in same distance from each other I was able to pick up needed colors with a color picker. But then I found a very good gradient generator

http://patorjk.com/text-color-fader/

This is my favorite tool to make good gradients and you can set the "Output Code" to "Standard Forum Code".

http://patorjk.com/text-color-fader user interface is very simple. Write a message, choose number of colors and set the output code to 'Standard Forum Code'. Press 'generate color faded text' and it's done

(almost).

Example:

Quote

Lesson 7: something about gradients xD

Code:

[color=#9600ff]L[/color][color=#9c07f2]e[/color][color=#a10de4]s[/color][color=#a714d7]s[/color][color=#ac1bc9]o[/color][color=#b221bc]n[/color] [color=#bd2fa1]7[/color][color=#c23594]:[/color] [color=#cd4379]s[/color][color=#d34a6b]o[/color][color=#d8505e]m[/color][color=#de5751]e[/color][color=#e35e43]t[/color][color=#e96436]h[/color][color=#ee6b28]i[/color][color=#f4721b]n[/color][color=#f9780d]g[/color] [color=#f9780e]a[/color][color=#f3711c]b[/color][color=#ed6a2b]o[/color][color=#e86339]u[/color][color=#e25c47]t[/color] [color=#d64e63]g[/color][color=#d04771]r[/color][color=#ca3f80]a[/color][color=#c5388e]d[/color][color=#bf319c]i[/color][color=#b92aaa]e[/color][color=#b323b8]n[/color][color=#ad1cc6]t[/color][color=#a715d4]s[/color] [color=#9c07f1]x[/color][color=#9600ff]D[/color]

Alright, now we know how to quickly generate a text with a gradient color but how to use same generator to generate gradients for BBCode images?
Well, it's a bit more complicated because it depends from our needs. Different design = different needs.

Let start from a simple example.

Exercise:

Quote

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

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

Code:

[table]
[tr]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████

████████
████████
████████
████████
[/td]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████

████████
████████
████████
████████
[/td]
[/tr]
[/table]

We have two dark exclamation marks and we want to paint them gradient color.
In our example each exclamation mark contains 17 lines of █ ASCII chars in a size of 2pt.

To generate hexadecimal values for our gradient open http://patorjk.com/text-color-fader/

as a "message" write:

Quote

12345678901234567

You can write something else just mind that the message length must be 17 chars. Because we need 17 colors for 17 lines.

Choose your colors (I set 2 colors, #0040ff and #bd0021) and press 'generate color faded text'. Add a color tag to each line of your BBCode drawing and copy generated colors into BBCode image as new color values.
Try to paint second exclamation mark 'backwards'.

Exercise results:

Quote

Code:

[table]
[tr]
[td]
[size=2pt]
[color=#0040ff]████████
[color=#0c3cf1]████████
[color=#1838e3]████████
[color=#2334d5]████████
[color=#2f30c8]████████
[color=#3b2cba]████████
[color=#4728ac]████████
[color=#53249e]████████
[color=#5f2090]████████
[color=#6a1c82]████████
[color=#761874]████████
[color=#821466]████████
[color=#8e1059]████████

[color=#9a0c4b]████████
[color=#a5083d]████████
[color=#b1042f]████████
[color=#bd0021]████████
[/td]
[td]
[size=2pt]
[color=#bd0021]████████
[color=#b1042f]████████
[color=#a5083d]████████
[color=#9a0c4b]████████
[color=#8e1059]████████
[color=#821466]████████
[color=#761874]████████
[color=#6a1c82]████████
[color=#5f2090]████████
[color=#53249e]████████
[color=#4728ac]████████
[color=#3b2cba]████████
[color=#2f30c8]████████

[color=#2334d5]████████
[color=#1838e3]████████
[color=#0c3cf1]████████
[color=#0040ff]████████
[/td]
[/tr]
[/table]

Tips & Tricks (3): saving characters (I)

While working on a BBCode signature we don't need to close a color tag before we add another color tag. This can save a lot of characters.
We don't need to close a lot of tags, like [b ], [size ], [font ] and some others. More tips coming soon

Quote from: blockman on December 30, 2016, 11:23:28 AM

Thanks!

I hope you will learn something from my lessons

Quote from: veleten on December 30, 2016, 11:32:20 AM

Sorry, but truly I don't know any good image2bbcode converters which can be used for BBCode signatures. If you'll find one let me know

Best regards.

Dmitry.Vastov

Hero Member

Offline

Activity: 840
Merit: 520

Re: [LEARN] BBCode Lessons & Tutorials

January 06, 2017, 02:45:33 AM

#20

I want to master this. Since signatures are in demand here. I will be good sideline to make some extra income.
Thank you for tutorials roslinpl and more tutorials to come. Its a bit hard because im not good at codes. But still im willing to do this anyway.

Pages: [1] 2 3 4 5 6 7 8 9 10 11 » All

Page 1

Viewing Page: 1