Bitcoin Forum
March 28, 2024, 08:03:42 PM *
News: Latest Bitcoin Core release: 26.0 [Torrent]
 
   Home   Help Search Login Register More  
Pages: « 1 2 3 4 5 [6] 7 8 9 10 11 »  All
  Print  
Author Topic: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!]  (Read 42550 times)
fxstrike
Member
**
Offline Offline

Activity: 238
Merit: 40

First Payment Gateway using GoldBacked cryptocurre


View Profile
March 14, 2018, 11:20:23 AM
 #101

Quote

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


Just use tag tt or monospace font.
Now thats look good

this is what i am facing. after designing in notepad++, when i ever i try it out with the post preview, the character becomes distorted. totally different from how it looks in notepad++. please what am i doing wrong??? it is becoming fraustrating
That is why you need offline SMF installed on your own computer to try the code you design, there is so much things to try before you get the grasp of this thing.

1711656222
Hero Member
*
Offline Offline

Posts: 1711656222

View Profile Personal Message (Offline)

Ignore
1711656222
Reply with quote  #2

1711656222
Report to moderator
In order to achieve higher forum ranks, you need both activity points and merit points.
Advertised sites are not endorsed by the Bitcoin Forum. They may be unsafe, untrustworthy, or illegal in your jurisdiction.
1711656222
Hero Member
*
Offline Offline

Posts: 1711656222

View Profile Personal Message (Offline)

Ignore
1711656222
Reply with quote  #2

1711656222
Report to moderator
Owillz
Member
**
Offline Offline

Activity: 532
Merit: 10


View Profile
March 15, 2018, 09:15:59 AM
 #102


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

this is what i am facing. after designing in notepad++, when i ever i try it out with the post preview, the character becomes distorted. totally different from how it looks in notepad++. please what am i doing wrong??? it is becoming fraustrating

I use this forum Preview Editor to correct some of the distortion but is seem to be too cumbersome to do it manually, probably using same pixelette tool can help doing it faster

What pixelette tool please?? Last give a link. Thanks
Owillz
Member
**
Offline Offline

Activity: 532
Merit: 10


View Profile
March 15, 2018, 09:17:24 AM
 #103

Quote

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


Just use tag 'tt' or monospace font. Also, you can use a character ░ with transparent color instead spaces.

Btw I still waiting for the lesson 11. Thanks a lot to roslinpl for this cool tutorial.

Thanks will try out the tag. The transparent color tag I read from here can result to excessive reduction in character
Owillz
Member
**
Offline Offline

Activity: 532
Merit: 10


View Profile
March 15, 2018, 09:18:10 AM
 #104

Quote

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


Just use tag tt or monospace font.
Now thats look good

this is what i am facing. after designing in notepad++, when i ever i try it out with the post preview, the character becomes distorted. totally different from how it looks in notepad++. please what am i doing wrong??? it is becoming fraustrating
That is why you need offline SMF installed on your own computer to try the code you design, there is so much things to try before you get the grasp of this thing.

Yea. I have it installed already. But the glow tag doesn't seem to work fine with it.
Owillz
Member
**
Offline Offline

Activity: 532
Merit: 10


View Profile
March 15, 2018, 12:41:49 PM
 #105

Quote

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


Just use tag 'tt' or monospace font. Also, you can use a character ░ with transparent color instead spaces.

Btw I still waiting for the lesson 11. Thanks a lot to roslinpl for this cool tutorial.



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




THE tt tag didn't work for me. please what exactly am i doing wrong?? someone should quote me, view my code and tell me please
coly20032003
Full Member
***
Offline Offline

Activity: 322
Merit: 110


View Profile
March 15, 2018, 03:48:14 PM
 #106

Great tutorial! I learned a lot from it. I am also interested in understanding more about how table alignment works.
roslinpl (OP)
Legendary
*
Offline Offline

Activity: 2212
Merit: 1199


View Profile WWW
March 15, 2018, 05:23:25 PM
 #107

this is what i am facing. after designing in notepad++, when i ever i try it out with the post preview, the character becomes distorted. totally different from how it looks in notepad++. please what am i doing wrong??? it is becoming fraustrating


I recommend to design in post editor,
I described how I do it in my tutorials - seems like Notepad++ has a different font face and that's why it looks different Smiley

(...)please what exactly am i doing wrong??(...)

You don't read the tutorials :-)
(An answer is out there already ^_^ ) ( here and here ;-) )

(New tutorials coming out tonight ^_^)


Best wishes.
Cobalt9317
Copper Member
Sr. Member
****
Offline Offline

Activity: 434
Merit: 278

Offering Escrow 0.5 % fee


View Profile WWW
March 15, 2018, 06:50:38 PM
 #108

Thank you for letting the community learn how to make a signature design. :-)
I hope to challenge you in the next upcoming signature contest if it is not your interest I would still like you to participate.
You are the only remaining signature designer that I still haven't compete on.

and I just want to add 4000 characters will not fit if you use all the 4000 characters I don't know but having that issue ever since.
but perhaps you can clarify this issue for me. ;-)
NathanJackson
Member
**
Offline Offline

Activity: 122
Merit: 10


View Profile
March 15, 2018, 08:43:25 PM
 #109

Thank you for lessons! Great tutorial
fxstrike
Member
**
Offline Offline

Activity: 238
Merit: 40

First Payment Gateway using GoldBacked cryptocurre


View Profile
March 16, 2018, 12:55:12 AM
 #110

-BTC-
(New tutorials coming out tonight ^_^)

You should also give the tools you use, because doing it on SMF Preview editor probably the worst experience one would have

roslinpl (OP)
Legendary
*
Offline Offline

Activity: 2212
Merit: 1199


View Profile WWW
March 16, 2018, 03:26:22 AM
Last edit: March 17, 2018, 08:30:35 PM by roslinpl
Merited by temarazin (1)
 #111

-BTC-
(New tutorials coming out tonight ^_^)

You should also give the tools you use, because doing it on SMF Preview editor probably the worst experience one would have

I did  Roll Eyes (ie. here) and yeah I'm using 'SMF Preview editor'  Cool


Lesson 11: "Advanced Character Saving Techniques part I"

Quote from: 'Horror Movie Trailers'
                                          THE BIGGEST NIGHTMARE                                          
SLEEPLESS NIGHTS & HOURS SPENT ON SQUEEZING THE CODE...
                                4K LIMIT                                
But don't give up! There are several ways to face the pure evil ^_^ of 4k limit.
(it's not so evil at all  Wink

The character limit is not so noticeable in the signature designs for the Members and Full Members, where 4k characters is definitely enough.

The nightmare begins when designing the signature for Senior, Hero and Legendary members Smiley
Well ... it's not a real nightmare - it's more like a challenge  Cool

Let me share with you some character saving techniques which I'm using to fight with the demons of 4k limit  Grin

I will try to make a kind of a list so it's easy to read (hopefully).


Hint 1: You don't have to close every tag in a table column.

You don't have to close each of the tags. You can replace it with another tag.
For example instead of closing the color tag you can just change the color to a different one with a new tag.

Quote from: SAME results - LESS characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[color=#7b2d2d]█[color=#382877]█[color=#3a6921]█
[/td]
[/tr]
[/table][/center]
Quote from: SAME results - MORE characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][color=#7b2d2d]█[/color][color=#382877]█[/color][color=#3a6921]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Hint 2: You don't have to close any tags before closing the table column tag.

You don't have to close the font, size etc. (any) tags before you close the table column tag.

Quote from: SAME results - LESS characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█
[/td]
[/tr]
[/table][/center]
Quote from: SAME results - MORE characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Hint 3: Set the main color as the first one...

While you're drawing something in BBCode - a logo etc. - try to determine the color that occurs most often and put its tag to the front.
When another element requires a different color, change the color and close the new color tag at the end of that element.

Next characters will be under the power of the first color  Wink
It's easier to show on the example ^_^:

Quote from: SAME results - LESS characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[/color]████████
████████[color=#1d847f]█████████████████████[/color]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]
Quote from: SAME results - MORE characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]
Quote from: SAME results - MORE characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=2px]
[color=#3a75bf]█████████████████████████████████████
[color=#3a75bf]████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Hint 4: Put the font face/font style tags to the front...

When you're setting the font style and you want to use it until the table column ends put any styling tags to the front.
But not before the URL and (if) align (center/left/right) tags.  I know it sounds a bit complicated....

So let me bring up the examples  Grin

Quote from: Experiment 1
Code:
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][font=Arial][size=25px][color=#000]The example text.[/b]
And an another line of text.
[/td]
[/tr]
[/table][/center]

What happened: I just closed the 'Bold' tag and involuntarily with 'bold' tag closure other tags in range of 'bold' tag were closed.
But if we move them out of the 'bold' tag range they will retain their properties  Wink

Quote from: Experiment 2
Code:
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][font=Arial][size=25px][b][color=#000]The example text.[/b]
And an another line of text.
[/td]
[/tr]
[/table][/center]

What happened: Same amount of characters as an example 1 - different results.

Too much writing to mention all possible situations in which you can use it in various ways to save some characters.

Let's focus on the most important thing to remember:
Quote
By closing any tag inside the table column, you close all tags within the range of the closed tag.

Quote from: SAME results - LESS characters
Code:
[center][table]
[tr]
[td]
[center][font=Arial][size=15px][b][url=https://bitcointalk.org]A bit more advanced example[/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80]The Second line - And another link but same font face/size without bold.
[/td]
[/tr]
[/table][/center]
Quote from: SAME results - MORE characters
Code:
[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][font=Arial][size=15px]A bit more advanced example[/url][/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80][font=Arial][size=15px]The Second line - And another link but same font face/size without bold.
[/td]
[/tr]
[/table][/center]


Quote from: SAME results - LESS characters
Code:
[center][table]
[tr]
[td]
[center][b][font=Arial][url=https://bitcointalk.org][color=#12d][size=15px]A bit more [color=#000]ADVANCED[/color] example[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]The Second line - [color=#12d]AND[/color] another link but same font face + bold
[/td]
[/tr]
[/table][/center]
Quote from: SAME results - MORE characters
Code:
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][color=#12d][font=Arial][size=15px]A bit more [color=#000]ADVANCED[color=#12d] example[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][b][font=Arial][size=8px][color=#000]The Second line - [color=#12d]AND[color=#000] another link but same font face + bold
[/td]
[/tr]
[/table][/center]

It is difficult to determine clearly how to use the range of closed tags for our benefits - everything depends on the design and needs - in different situations, we can use it in a variety of ways.


Hint 5: Align tags close other tags...

Code:
[table]
[tr]
[td]
[color=blue][font=Verdana][size=16px]Test text example
[center]Test text example bottom
[/td]
[/tr]
[/table]

Hint 6: Replace transparent elements with a white space...

I mentioned about it few months ago in a post.

Quote from: SAME results - LESS characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████        █████
[/td]
[/tr]
[/table][/center]
Quote from: SAME results - MORE characters
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████[color=transparent]░░░░░░░░[/color]█████
[/td]
[/tr]
[/table][/center]


It's not all the techniques that can save the characters, but now I'm going to sleep.
Today I'll come back with another portion of lesson Smiley


temarazin
Full Member
***
Offline Offline

Activity: 224
Merit: 186


View Profile
March 17, 2018, 02:36:52 PM
Merited by roslinpl (1)
 #112

Wow, thanks for the new lesson! But I didn't understand the advanced example in the Hint 4...

Code:
[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][color=#12d][font=Arial][size=15px]A bit more [color=#000]ADVANCED[/color] example[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]The Second line - [color=#12d]AND[/color] another link but same font
[/td]
[/tr]
[/table][/center]


How I can see, it is not Arial font on the second line. Or "same font" means something other? Sorry I need to improve my English ^^
1C6fV5DtakfKANLJ8GUV7hCaA
Full Member
***
Offline Offline

Activity: 462
Merit: 104


Crypto Marketer For Whales


View Profile WWW
March 17, 2018, 03:13:40 PM
 #113

I've been looking for this tutorial all over the net and I'm glad I found it here! There's a lot of opportunities when you know how to make signature codes. You get to handle projects for lots of ICOs!

Buy Reddit Accounts & Upvotes
Discord: Playerup#6929
Skype: AWH2010
Telegram: @redditfactory
roslinpl (OP)
Legendary
*
Offline Offline

Activity: 2212
Merit: 1199


View Profile WWW
March 17, 2018, 08:17:06 PM
Last edit: March 17, 2018, 10:32:19 PM by roslinpl
 #114

Wow, thanks for the new lesson! But I didn't understand the advanced example in the Hint 4...

(...code)

(...post table glitch Smiley (...) that's why I didn't preview those codes in the post - to not waste characters on removing 'post table glitch' - )

How I can see, it is not Arial font on the second line. Or "same font" means something other? Sorry I need to improve my English ^^

Hey,

Ahh ! I see my mistake - Thanks for spotting - I improved those examples and triple checked ^_^


Let me show an another example of what I meant:

Quote from: SAME results - LESS characters
Code:
[center][table]
[tr]
[td]
[center][b][font=Arial][size=15px][url=https://bitcointalk.org][color=#12d]A bit more [color=#000]ADVANCED[/color] example[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][color=#000]The Second line - [color=#12d]AND[/color] another link but same font face & font size + bold.
[/td]
[/tr]
[/table][/center]
Quote from: SAME results - MORE characters
Code:
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][font=Arial][size=15px][color=#12d]A bit more [color=#000]ADVANCED[/color] example[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][b][font=Arial][size=15px][color=#000]The Second line - [color=#12d]AND[/color] another link but same font face & font size + bold.
[/td]
[/tr]
[/table][/center]

I've been looking for this tutorial all over the net and I'm glad I found it here! There's a lot of opportunities when you know how to make signature codes. You get to handle projects for lots of ICOs!

My pleasure Cool
I made few sig designs for ICOs - but not only for ICOs - I guess approx. 30% of my designs were made for ICOs.


Best wishes.
temarazin
Full Member
***
Offline Offline

Activity: 224
Merit: 186


View Profile
March 18, 2018, 12:10:44 PM
 #115

Let me show an another example of what I meant:

I got it now, thanks.  Smiley
Btw, I have a question. What max number of lines of bbcode-drawing for signature? With a practice, I got 13 lines for 2pt size (for firefox and a bit more lines for Chrome). But I don't know number of lines for 1pt, 2px and 1px size. I can't test it because my rank is lower than Senior.

roslinpl (OP)
Legendary
*
Offline Offline

Activity: 2212
Merit: 1199


View Profile WWW
March 18, 2018, 04:38:04 PM
 #116

Let me show an another example of what I meant:

I got it now, thanks.  Smiley
Btw, I have a question. What max number of lines of bbcode-drawing for signature? With a practice, I got 13 lines for 2pt size (for firefox and a bit more lines for Chrome). But I don't know number of lines for 1pt, 2px and 1px size. I can't test it because my rank is lower than Senior.



Hello,

yes - you can test it on your own - please read: Lesson 2  Cool

I even left a 'starter' for Senior/Hero/Legendary signatures (at the end of the lesson 3).

Quote
p
p
p(MAX.HEIGHT)
CONTENT
Code:
[quote][table]
[tr]
[td]
p
p
p(MAX.HEIGHT)
[/td]
[td]
CONTENT
[/td]
[/tr]
[/table][/quote]


Best wishes.
temarazin
Full Member
***
Offline Offline

Activity: 224
Merit: 186


View Profile
March 18, 2018, 08:13:30 PM
 #117

Yes, I've read all your lessons. Hmm, I'll show with screenshots:

Preview (Chrome)


Real view (Firefox)

Code (pastebin)

It is difficult to determinate max height visually. And I thought maybe there is the precise number of lines for main sizes. How I said, it is 13 lines for size 2pt (with my experience).
roslinpl (OP)
Legendary
*
Offline Offline

Activity: 2212
Merit: 1199


View Profile WWW
March 18, 2018, 09:45:24 PM
Last edit: March 18, 2018, 10:33:57 PM by roslinpl
 #118

Yes, I've read all your lessons. Hmm, I'll show with screenshots:

(...)

It is difficult to determinate max height visually. And I thought maybe there is the precise number of lines for main sizes. How I said, it is 13 lines for size 2pt (with my experience).

It's not difficult Smiley
I was trying to explain that all you need to do is add an extra table column with 3 lines of text and as a text just write a letter 'p'.
If your BBCode drawing displays below the last pixel of the bottom line letter 'p' it means that it's too high Smiley

Quote from: It's too high

Quote from: ~Max. height


I suggest to set the font size in pixels (px) instead of points (pt).
I wrote a little bit about it in Lesson 10 and here.

Since I'm experimenting with Monospace font I use 2px characters for my drawings - it's the most compatible (from my experience).

Some of the lessons are written before many browser updates  Wink Roll Eyes
It used to be better to draw with 2pt ASCII characters without changing the font (default Forum font). It was the most compatible setting on the largest number of machines and browsers.
Currently the best compatibility we get thanks to drawing with 2px ASCII characters and the Monospace font.

I just left updates under some lessons to make everything more science-friendly  Roll Eyes Cool

Best wishes.
jhimli
Jr. Member
*
Offline Offline

Activity: 59
Merit: 7


View Profile
March 21, 2018, 02:09:18 PM
 #119

Its very very helpful training for me .,, was learned signature creation from this lession ,, but one thing am not able to create alone till now ,,, I want to create a simple logo ... grrrrr... may be it will take time ... to learn ... by the way thanks for the nice video ... need more help ,,video is too much fast ,, if possible please provide some slow video... I am here to learn seriously... please if possible provide one slow video with creating signature..
Towerbee
Jr. Member
*
Offline Offline

Activity: 196
Merit: 5


View Profile
March 25, 2018, 03:52:23 AM
 #120

Great information. Thanks. I was looking for something like this and I am glad I found this topic / thread. Smiley Keep posting things like this.
Pages: « 1 2 3 4 5 [6] 7 8 9 10 11 »  All
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2006-2009, Simple Machines Valid XHTML 1.0! Valid CSS!