[TUTORIAL] LEKCJE BBCode (tworzenie sygnatur)

[cryptovigi]

Jakiś czas temu napisałem krótki quasi poradnik dotyczący edycji avatara. Ale co tam avatar? – to może zrobić każdy w kilka/kilkanaście sekund!!!
Dzisiaj pójdziemy na całość i nauczymy się robić własne sygnatury!!!

Na pierwszy rzut oka wydaje się to być bardzo proste, ale czy ktokolwiek z was próbował zgłębić ten temat? Ja przyznam się szczerze, że nawet nie próbowałem – jak zobaczyłem kod pierwszej stwierdziłem że to masakra i odpuściłem… aż do dzisiaj, kiedy natrafiłem na forum na doskonały poradnik w tym temacie i po przeczytaniu kilku linijek już wiedziałem że trzeba go przetłumaczyć i wrzucić na naszego lokala…

Oryginalny poradnik został stworzony przez użytkownika roslinpl w wątku [LEARN] BBCode Lessons & Tutorials [+tutorial videos!]
Zachęcam do odwiedzenia tego wątku, gdyż oprócz poniższego tutorialu można znaleźć tam wiele dodatkowych wskazówek dotyczących BBCode

		........................................Linki.do.lekcji:........................................	..................Linki.do.Tips.&.Tricks:..................
███████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ███████████████████████████████████████	..............	Lekcja 1:.Zasady stylów forumowych sygnatur Lekcja 2:.Maksymalna wysokość sygnatur BBCode Lekcja 3:.Tabela szablonów sygnatur Senior/Hero/Legendary.Members....(i..trochę.o.tabelach...) Lekcja 4:.Podstawy rysunku BBCode poziom I Lekcja 5:.Podstawy rysunku BBCode poziom II Lekcja 6:.Kolory Lekcja 7:.Kolory - Gradienty Lekcja 8:.Podstawy rysunku BBCode poziom III (video tutorial included) Lekcja 9:."Wewnątrz tabel": Rozmiary obrazu Lekcja 10:."Zaawansowane techniki rysunku BBCode poziom I" Lekcja 11:."Advanced Character Saving Techniques part I" Lekcja 12:.Wkrótce	I II III IV V VI

Lekcja 1: Zasady stylów forumowych sygnatur

RANGA	LINKI	STYLE	WYTŁUSZONE LITERY	KURSYWA	PODKREŚLENIE	TABLE	MAX.  LITER
Newbies	nie	nie	nie	tak	tak	nie	50
Jr. Members	nie	nie	nie	tak	tak	nie	150
Members	tak	nie	nie	tak	tak	nie	4000
Full Members	tak	kolor czcionki, styl czcionki	tak	tak	tak	nie	4000
Sr. Members	tak	tak (bez 'glow')	tak	tak	tak	tak	4000
Hero/Legendary.Members	tak	tak	tak	tak	tak	tak	4000

Lekcja 2: Maksymalna wysokość sygnatur BBCode

Maksymalne wysokość sygnatury jest taka sam dla wszystkich rang.
Najprostszym sposobem na sprawdzenie maksymalnej możliwej wysokości: [/ b] Podczas projektowania sygnatury - utwórz kolumnę tabeli z 3 liniami tekstu, w każdej linii wpisz literę „p”.

Pamiętaj: Przestrzeń podpisu profilu ma „takie same” arkusze stylów kaskadowych jak 'quote' -
- Dlatego wszystko poniżej trzeciej linii „p” nie będzie widoczne w Twojej przestrzeni sygnatury.

p
p
p

Lekcja 3: Tabel szablonów sygnatur Senior/Hero/Legendary Members (i trochę o tabelach...)

Tabele składają się z kolum i rzędów.
Żeby stworzyć tabelę musisz stworzyć ramy tabeli i rzędów. Rzędy zawierają kolumny.

Proste wytłumaczenie na przykładzie:
Otwórz tabelę -> otrwórz rząd z np. 4 kolumnami -> zamknij rząd -> otwórz kolejny rząd -> z 4 kolumnami -> zamknij rząd -> zamknij tabelę

W kodzie ten przykład wygląda następująco:

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]

Podgląd:

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

Kiedy chcesz stworzyć nowy projekt sygnatury (dla Senior/Hero/Legendary Members), możesz zacząć od szablonu, który pozwoli Ci zaoszczędzić sporo czasu:

Code:

[quote][table]
[tr]
[td]
p 
p
p - MAKSYMALNA WYSOKOŚĆ - 
[/td]
[td]
ZAWARTOŚĆ
[/td]
[/tr]
[/table][/quote]

Po przygotowaniu projektu usuń znaczniki „quote” i kod sygnatury BBCode jest gotowy


Lekcja 4: Podstawy rysunku BBCode poziom I

Kiedy chcemy odtworzyć obraz w BBCode, musimy zapamiętać kilka bardzo ważnych zasad BBCode na Forum:

Osobiście przetestowałem wiele różnych metod i jestem pewien, że najlepszą metodą jest ręczne narysowanie obrazu piksel po pikselu. Konwertery / generatory obrazu BBCode nie spełniają moich oczekiwań, nie polecam żadnego i nie używam żadnego z nich.

Po prawie 3 latach doświadczeń z projektami sygnatur BBCode, jestem pewien, że jeśli chcemy, aby nasz podpis był wysoce kompatybilny z różnymi systemami operacyjnymi i przeglądarkami internetowymi, powinniśmy użyć znaków o rozmiarze 2pt podczas tworzenia obrazu BBCode do sygnatury.

Najlepsze znaki ASCII, które polecam używać do obrazów BBCode, to: " ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ "
Ale głównie używam " █ " i zawsze w rozmiarze 2pt. Gdyż jest on najbardziej kompatybilny z różnymi przeglądarkami i systemami operacyjnymi.


Czemu nie używam 2px lub 1pt czy 1px?
Skoro wszyscy będą korzystać z Google Chrome, to całkiem fajnie jest użyć 2px, 1px lub coś mniejszego niż 2pt. Dzięki temu możesz uzyskać więcej szczegółów na obrazach BBCode.

Niestety znaki mniejsze niż 2pt używane w sygnaturach BBCode będą wyglądały na rozciągliwe lub będą się zbyt mocno zmniejszać w różnych przeglądarkach internetowych i systemach operacyjnych, co oznacza, że w rzeczywistości sygnatura będzie wyglądać dobrze dla mniejszej części odwiedzających.

Projekt sygnatury BBCode nie jest aż tak elastyczny jak HTML + CSS designs, które mogą wyglądać inaczej w różnych przeglądarkach internetowych.

W aktualnej wersji przeglądarki Chrome/Mozilla/Safari sugeruję wykorzystanie 2px czcionki Monospace podczas rysowania BBCode.
Jak wspomniano w lekcji 10.

Eksperyment: Narysuj kwadrat w BBCode. Używaj tylko znaku ASCII " █ " w różnych rozmiarach: 2pt, 2px, 1pt, 1px.

Podejrzyj ten kwadrat w BBCode przy wykorzystaniu różnych przeglądarek jak Chrome/Mozilla/Opera/Edge/Safari/etc.

2pt→

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

2px→

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

1pt→

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

1px→

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

Pamiętaj, że kwadrat narysowany znakiem o rozmiarze 2pt w większości przeglądarek wygląda tak samo. Jest najbardziej kompatybilny. Inne kwadraty narysowane tym samym znakiem ASCII o różnych rozmiarach znaków są rozciągliwe / skurczone w innych przeglądarkach internetowych. Znaki ASCII 2pt nie są w 100% kompatybilne, ale po latach eksperymentów jestem pewien, że jest wysoce kompatybilny.

W obecnych wersjach przeglądarek Chrome / Mozilla / Safari sugeruję użycie [color = red] 2px Monospace font [/ b] [/ color] podczas rysowania za pomocą BBCode.
Jak wspomniano w lekcji 10.

[1715114110]

1715114110

[1715114110]

1715114110

[1715114110]

1715114110

[1715114110]

1715114110

[cryptovigi]

Lekcja 5: Podstawy rysunku BBCode poziom II


O.K. Więc już wiemy, że dobrym wyborem, aby wykorzystanie znaku 2pt █ ASCII dla naszych obrazów BBCode. Ale jak ładnie nim rysować?

Cierpliwość i odrobina artystycznego zmysłu doprowadzą nas do celu

Musisz to ćwiczyć i eksperymentować, aby to w końcu to poczuć.

W aktualnej wersji przeglądarek Chrome/Mozilla/Safari sugeruję wykorzystanie 2px Monospace font podczas rysowania za pomocą  BBCode.
Jak wspomniano w lekcji 10.

Ćwiczenie: Wybrane znaki ASCII do naszego rysunku BBCode: ░ oraz █

Step 1) Narysuj kwadrat wykorzystując znak ASCI █. Pamiętaj o maksymalnej wysokości. (Lekcja 2).

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

Krok 2) Narysuj krzyż wykorzystując znaki ASCII ░ .

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

Krok 3) Narysuj krzyż i kółka znakiem ASCII ░.

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

Krok 4) Zaokrąglij obramowanie znakami ASCII ░.

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

Kod przykładu :

Code:

[b]Krok 1)[/b] Narysuj prostokąt znakami ASCII █. Pamiętaj o maksymalnej wysokości. ([url=https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187]Lekcja 2[/url]).
[quote][size=2pt]█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████[/size][/quote]

[b]Krok 2) [/b]Zaokrąglij obramowanie znakami ASCII ░.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Krok 3) [/b]Narysuj krzyż i kółka znakiem ASCII ░.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Krok 4)[/b] Zaokrąglij obramowanie znakami ASCII ░.
[quote][size=2pt]░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░[/size][/quote]

Lekcja 6: Kolory

Aby zmienić kolor BBCode, elementy projektu sygnatury wystarczy dodać atrybut koloru.

Code:

[color=#value][/color]

Wartość atrybutu koloru może mieć postać nazw kolorów jak "Black, White, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, Lime Green"
albo postać kolorów w formie szesnastkowej i skróconej formie szesnastkowej która pomoże zaoszczędzić kilka znaków . (limity znaków sygnatur nie są duże więc oszczędzaj tyle znaków ile tylko Ci się uda )

Skróty szesnastkowe na przykładach:

Forma.szesnastkowa	........Skrótowa.forma .szesnastkowa........
#000000	#000
#ffffff	#fff
#77CC33	#7C3
#33CC99	#3C9

Występuje także 'przezroczysty' atrybut koloru w BBCode który jest bardzo przydatny w obrazach BBCode.

Ten tekst jest widoczny ALE TEN NIE A ten jest widoczny

Code:

Ten tekst jest widoczny [color=transparent]ALE TEN NIE[/color] A ten jest widoczny

Lekcja 7: Kolory - Gradienty

Aby stworzyć gradient dla twojego tekstu lub obrazu BBCode można zaoszczędzić sporo czasu wykorzystując 'Text Color Fader' - gradient generator

Kiedy miałem mniej doświadczenia z BBCodes, robiłem gradienty ręcznie. W edytorach graficznych rysowałem kwadraty z tłami gradientowymi, a następnie ręcznie i po umieszczeniu linii pomocniczych w tej samej odległości od siebie byłem w stanie odebrać potrzebne kolory za pomocą selektora kolorów. Ale potem znalazłem bardzo dobry generator gradientu

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

To moje ulubione narzędzie do tworzenia dobrych gradientów i możesz ustawić „Kod wyjściowy” na „Standardowy kod forum”.

Interfejs użytkownika http://patorjk.com/text-color-fader jest bardzo prosty. Napisz wiadomość, wybierz liczbę kolorów i ustaw kod wyjściowy na „Standardowy kod forum”. Naciśnij „'generate color faded text” i gotowe (prawie).

PRzykład:

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]

W porządku, teraz wiemy, jak szybko wygenerować tekst z kolorem gradientu, ale jak użyć tego samego generatora do generowania gradientów dla obrazów BBCode? To trochę bardziej skomplikowane, ponieważ zależy to od naszych potrzeb. Różne wzory = różne potrzeby.

Zacznijmy od prostego przykładu.

Przykład:

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

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

Code:

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


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


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

Mamy dwa ciemne wykrzykniki i chcemy je pomalować kolorem gradientowym.
W naszym przykładzie każdy wykrzyknik zawiera 17 linii znaków █ ASCII o rozmiarze 2pt.

Aby wygenerować heksadecymalne wartości dla naszych gradientów otwórz http://patorjk.com/text-color-fader/

jako "wiadomość" wpisz:

12345678901234567

Możesz napisać coś innego tylko o tym, że długość wiadomości musi wynosić 17 znaków. Ponieważ potrzebujemy 17 kolorów dla 17 linii.

Wybierz kolory (ustawię 2 kolory, # 0040ff i # bd0021) i naciśnij „generate color faded text”. Dodaj znacznik koloru do każdej linii rysunku BBCode i skopiuj wygenerowane kolory do obrazu BBCode jako nowe wartości kolorów.
Spróbuj pomalować drugi wykrzyknik „do tyłu”.

Wyniki ćwiczenia:

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

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

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): oszczędzanie znaków (I)

Podczas pracy nad sygnaturą BBCode nie musimy zamykać znacznika koloru przed dodaniem kolejnego znacznika koloru [/ b]. To może oszczędzić wiele znaków.
Nie musimy zamykać wielu tagów, takich jak [/ b], [/ size], [/ font] i innych. Więcej porad wkrótce

Lekcja 8: Podstawy rysunku BBCode poziom III

Znamy już najważniejsze zagadnienia dotyczące sygnatur BBCode. Czas stworzyć prostą sygnaturę dla Serior / Hero / Legendary Members.
Powiedzmy, że chcemy stworzyć sygnaturę, która będzie wyglądała tak:

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

We ♥ Bitcoin

Nie napiszę tutouriala krok po kroku, ale zamiast tego załączam film, w którym przedstawiłem cały proces tworzenia. Podwoiłem prędkość klipu, w rzeczywistości zajęło mi to 18,5 minuty, a dzięki podwojeniu prędkości skróciłem wideo do 9 minut 12 sekund. (oryginalny film zamieszczony przez twórcę poradnika)


Lekcja 8 video tutorial: https://youtu.be/McKHrx1tBK0

Gdy chcemy odtworzyć obraz / logo za pomocą BBCode, dobrze jest przygotować i uploadować oryginalny plik obrazu, abyśmy mogli na bieżąco weryfikować rezultaty naszej pracy z oryginałem

Lekcja 8 logo Bitcoin: https://i.imgur.com/gPmC4Xi.png

To uproszczone logo Bitcoin - dostosowałem kąt nachylenia, aby wyglądało lepiej w BBCode. Znaki ASCII 2pt nie są idealne dla rysunków BBCode, ale chociaż rozmiar 2pt jest najbardziej kompatybilny, co już wiemy z Lekcji 4.

W aktualnej wersji przeglądarek Chrome/Mozilla/Safari sugeruję wykorzystanie 2px Monospace font podczas rysowania za pomocą  BBCode.
Jak wspomniano w lekcji 10.

Lekcja 8 kod sygnatury BBCode:

Code:

[center][table]
[tr]
[td]
[size=2pt][color=#f90][color=transparent]░░░░░░░[/color]▄▄▄▄▄▄
[color=transparent]░░░░[/color]▄██████████▄
[color=transparent]░░░[/color]██████████████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░[/color]▀█████
██████▄▄[color=transparent]░░[/color]▄▄[color=transparent]░░[/color]██████
████████[color=transparent]░░[/color]▀▀[color=transparent]░[/color]▄██████
████████[color=transparent]░░[/color]▄▄▄[color=transparent]░░[/color]█████
██████▀▀[color=transparent]░░[/color]▀▀▀[color=transparent]░░[/color]█████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░░[/color]█████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░░░[/color]██████████████
[color=transparent]░░░░[/color]▀██████████▀
[color=transparent]░░░░░░░[/color]▀▀▀▀▀▀
[color=transparent]░░░[/color][color=#e1e1e1]▀[color=#d3d3d2]▀[color=#c6c4c3]▀[color=#b8b6b4]█[color=#aaa8a5]█[color=#9c9a96]█[color=#8f8b87]█[color=#817d78]█[color=#918e8a]█[color=#a19e9b]█[color=#b1afad]█[color=#c1c0be]▀[color=#d1d0d0]▀[color=#e1e1e1]▀
[/td]
[td]
[size=25pt][b][i][color=#f90]We [color=red]♥[/color] Bitcoin[/b][/size]
[/td]
[/tr]
[/table][/center]

Dzisiaj pierwsze 8 lekcji - kolejne wkrótce....

[cryptovigi]

Lekcja 9: "Wewnątrz tabel": rozmiar obrazu

To szybka lekcja lub właściwie może tylko szybka wskazówka.
Lekcja 9 nie jest związana z sygnaturami, ale jest związane z BBCode i dobrze wiedzieć o tym kiedy myślisz o ulepszaniu designu wątków etc.


Jeżeli chcesz stworzyć tabelę i wstawić obraz do środka komórki (rzędu) tabeli - rozmiar obrazu zostanie wizualnie zmniejszony. Co ważne nawet dodanie atrybutu szerokości do twojego obrazu nie rozwiąże tego problemu.


Przykład:

150px x 150px Bitcoin logo Ale jego rozmiar to nie 150x150...

150px x 150px Bitcoin logo Dodany atrybut szerokości: Width=150. Ale wciąż to nie jest  150x150..

Kod przykładu:

Code:

[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
150px x 150px Bitcoin logo
Ale jego rozmiar to nie 150x150...
[/td]
[/tr]
[/table][/quote]

[quote][table]
[tr]
[td]
[img width=150]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
150px x 150px Bitcoin logo
Dodany atrybut szerokości: Width=150. Ale wciąż to nie jest  150x150..
[/td]
[/tr]
[/table][/quote]

Jak rozwiązać ten problem?
W tej samej komórce (rzędzie) gdzie jest obraz musimy wpisać dowolną linię tekstu, która będzie dłuższa niż szerokość obrazu.
I ustawić kolor tekstu na przezroczysty. ( color=transparent ).

fffffffffffffffffffffffffffffff

150px x 150px Bitcoin logo Teraz bez wprowadzania jakiegokolwiek atrybutu szerokości obraz jest wyświetlany jako 150px x 150px

Kod:

Code:

[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[color=transparent]fffffffffffffffffffffffffffffff[/color]
[/td]
[td]
150px x 150px Bitcoin logo
Teraz bez wprowadzania jakiegokolwiek atrybutu szerokości obraz jest wyświetlany jako 150px x 150px
[/td]
[/tr]
[/table][/quote]

Lekcja 10: "Zaawansowane techniki rysunku BBCode poziom I"

Obiecałem powiedzieć więcej na temat rysowania czcionką 'Monospace'.

'Monospace' wydaje się być jedyną czcionką, która zachowuje identyczną szerokość znaku, przerwę pomiędzy dwoma znakami - więc po prostu będzie wyglądać tak samo pod różnymi systemami operacyjnymi.
(Choć na pewno nie wszystkimi).

Więc nawet użytkownicy Maka ze starszymi wersjami Safari zobaczą 'taki sam' rysunek jak powiedzmy użytkownicy ostatniej wersji Chrome. Chociaż akurat ostatnia wersja Chrome trochę nabałaganiła w naszych projektach

W porządku gdzie jest haczyk?

Jedyny problem jest taki, że rysunki w 'Monospace' nie wyglądają tak jednolicie (solidnie) jak te same rysunki tworzone czcionką dafaultową.
Ale czcionka ta ma kilka bardzo ważnych zalet.

Nie tylko to, że będzie wyglądała "tak samo" pod różnymi przeglądarkami. Ale także! Możesz rysować swoje projekty znakami w rozmiarach 1px, 1pt, 2px, 2pt i wciąż będzie wyglądał tak samo pod różnymi przeglądarkami.
Ale pamiętaj! Ten sam obraz stworzony znakami czcionki 'Monospace' o różnym rozmiarze będzie miał różne nasycenie kolorów uzależnione od rozmioru cznionki.

W aktualnych wersjach przeglądarek Chrome/Mozilla/Safari sugeruję wykorzystanie czcionki Monospace o rozmiarze 2px tworząc obrazy w BBCode.

Przykład:

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Size=2pt

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Size=2px

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Size=1pt

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Size=1px

Code:

Code:

[table]
[tr]
[td]
[font=Monospace][size=2pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=2px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2px[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=1pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=1px[/b][/size][/center]
[/td]
[/tr]
[/table]

Możesz to przetestować samodzielnie - wystarczy otworzyć tę stronę pod różnymi przeglądarkami żeby porównać wyniki.
Oczywiście nie będą nadal kompatybilne z wszystkimi przeglądarkami pod każdym systemem operacyjnymi, ale i tak wygrywa pod kątem kompatybilności z czcionkami defaultowymi.



Lekcja 11: "Zaawansowane techniki ograniczania ilości znaków część I"

                                          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  

Limit znaków nie jest tak zauważalny w projektach sygnatur dla Memberów i Full Memberów, gdzie 4tysiące znaków jest ilością zdecydowanie wystarczającą.

Koszmar zaczyna się podczas projetkowania sygnatur dla Senior, Hero and Legendary members
No.... to może nie prawdziwy koszmar - to raczej wyzwanie  

Podzielę się z wami kilkoma technikami oszczędzania ilości znaków, których używam podczas walki z demonami limitu 4 tysięcy

Postaram się stworzyć rodzaj listy łatwej do przeczytania (mam nadzieję).

Wskazówka 1: Nie musisz zamykać każdego taga w kolumnach tabeli.

Nie musisz zamykać wszystkich tagów. Możesz to zastąpić kolejnym tagiem.
Na przykład zamiast zamykać taga koloru możesz zmienić kolor na inny otwierając kolejny tag.

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[color=#7b2d2d]█[color=#382877]█[color=#3a6921]█
[/td]
[/tr]
[/table][/center]

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]

Wskazówka 2: Nie musisz zamykać żadnych tagów przed zamknięciem tagu kolumny w tabeli.

Nie musisz zamykać tagów czcionki, rozmiaru etc (żadnego) jeżeli zamykasz tag kolumny w tabeli.

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Wskazówka 3: Ustaw główny kolor jako pierwszy...

Kiedy rysujesz coś z w BBCode - logo etc. - postaraj się określić kolor, który będzie się pojawiał najczęściej i umieść jego tag na początaku.
Kiedy kolejny element wymaga innego koloru, zmień kolor i zamknij tak nowego koloru na końcu elelmentu.

Następny znak pozostanie pod mocą pierwszego koloru
Łatwiej pokazać to na przykładzie ^_^:

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[/color]████████
████████[color=#1d847f]█████████████████████[/color]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

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]

Wskazówka 4: Wstaw tagi czcionki i stylu na początku...

Kiedy ustawiasz styl czcionki i chcesz wykorzystać go do końca kolumny w tabeli wstaw tag stylu na początku.
Ale nie przed tagiem adresu URL i wyrównania (center/left/right) tags.  Wiem, że brzmi to trochę skomplikowanie....

Więc zobaczmy to na przykładzie

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][font=Arial][size=25px][color=#000]Przykładowy tekst.[/b]
I kolejna linia tekstu.
[/td]
[/tr]
[/table][/center]

Co się stało: Zamknąłem tag 'Bold' i odruchowo z zamknięciem tagu 'bold' inne tagi w zasięgu 'bold' zostały zamknięte.
Ale jeżeli przesuniemy je na poza zakres tagu 'bold' zachowają swoje właściwości

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][font=Arial][size=25px][b][color=#000]Przykładowy teks.[/b]
I kolejna linia tekstu.
[/td]
[/tr]
[/table][/center]

Co się stało: Taka sama liczba znaków jak w przykładzie 1 - inne rezultaty.

Zbyt wiele pisania by wspomnieć o wszystkich możliwych sytuacjach w których możesz to wykorzystać aby zaoszczędzić trochę znaków.

Skupmy się na najważniejszych rzeczach do zapamiętania:

Zamykając dowolny tag wewnątrz kolumny, zamykasz wszystkie tagi w zasięgu zamykanego tagu.

Code:

[center][table]
[tr]
[td]
[center][font=Arial][size=15px][b][url=https://bitcointalk.org]Trochę bardziej zaawansowany przykład[/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80]Druga linia - I kolejny link ale ta sama czcionka/rozmiar bez pogrubienia.
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][font=Arial][size=15px]Trochę bardziej zaawansowany przykład[/url][/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80][font=Arial][size=15px]Druga linia - I kolejny link ale ta sama czcionka/rozmiar bez pogrubienia.
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[center][b][font=Arial][url=https://bitcointalk.org][color=#12d][size=15px]Trochę bardziej [color=#000]ZAAWANSOWANY[/color] przykład[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]Druga linia - [color=#12d]I [/color] kalejny link ale ta sama czcionka + pogrubienie 
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[center][b][font=Arial][url=https://bitcointalk.org][color=#12d][size=15px]Trochę bardziej [color=#000]ZAAWANSOWANY[/color] przykład[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]Druga linia - [color=#12d]I [/color] kalejny link ale ta sama czcionka + pogrubienie 
[/td]
[/tr]
[/table][/center]

Trudno jest jasno określić jak wykorzystywać zasięg zamykanych tagów dla naszych korzyści - wszystko zależy od projektu i potrzeb - w różnych sytuacjach możemy wykorzystywać to na wiele sposobów.

Wskazówka 5: Tag wyrównania zamyka inne tagi...

Code:

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

Wskazówka 6: Zamienianie przezroczystych elementów pustą przestrzenią...

Wspomniałem o tym kilka miesięcy temu w poście.

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████        █████
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████[color=transparent]░░░░░░░░[/color]█████
[/td]
[/tr]
[/table][/center]

To jeszcze nie wszystkie techniki oszczędzania znaków ale idę spać. Wkrótce powrócę z kolejną porcją lekcji

[cryptovigi]

RESERVED

[cryptovigi]

Z uwagi na zamknięcie BitMixera zostałem od wczoraj "bezrobotny" więc postanowiłem w końcu w praktyce przetestować ten poradnik i stworzyć pierwszą własną sygnaturę BBCode... Poniżej efekty tej zabawy...

1░░░░░░░░░░░░░██ 2░░░░░░░░░░░██████ 3░░░░░░░░░██████████ 4░░░░░░░░█████░░█████ 5░░░░░░█████░░░░░██████ 6░░░░░█████░░░░███████ 7░░░█████░░░░░██████░░░░██ 8░░█████░░░░███████░░░█████ 9░░░█████░░░░████░░░░█████ 0░░░░░█████░░░░█░░░░████ 1░░░░░░█████░░░░░░█████ 2░░░░░░░░█████░░░████ 3░░░░░░░░░██████████ 4░░░░░░░░░░░██████ 5░░░░░░░░░░░░░██

górny wiersz ░ENERGI (NRG)--BEST 2019 AIRDROP--UP TO 100 NRG (~$220)░

1░░░░░░░░░░░░░██ 2░░░░░░░░░░░██████ 3░░░░░░░░░██████████ 4░░░░░░░░█████░░█████ 5░░░░░░█████░░░░░██████ 6░░░░░█████░░░░███████ 7░░░█████░░░░░██████░░░░██ 8░░█████░░░░███████░░░█████ 9░░░█████░░░░████░░░░█████ 0░░░░░█████░░░░█░░░░████ 1░░░░░░█████░░░░░░█████ 2░░░░░░░░█████░░░████ 3░░░░░░░░░██████████ 4░░░░░░░░░░░██████ 5░░░░░░░░░░░░░██

Code:

[center]
[table]
[tr]
[td]
[size=2pt][color=transparent]1░░░░░░░░░░░░░[/color][color=green]██[/color]
[color=transparent]2░░░░░░░░░░░[/color][color=green]██████
[color=transparent]3░░░░░░░░░[/color][color=green]██████████
[color=transparent]4░░░░░░░░[/color][color=green]█████[color=transparent]░░[/color][color=green]█████
[color=transparent]5░░░░░░[/color][color=green]█████[color=transparent]░░░░░[/color][color=green]██████
[color=transparent]6░░░░░[/color][color=green]█████[color=transparent]░░░░[/color][color=green]███████
[color=transparent]7░░░[/color][color=green]█████[color=transparent]░░░░░[/color][color=green]██████[color=transparent]░░░░[/color][color=green]██
[color=transparent]8░░[/color][color=green]█████[color=transparent]░░░░[/color][color=green]███████[color=transparent]░░░[/color][color=green]█████
[color=transparent]9░░░[/color][color=green]█████[color=transparent]░░░░[/color][color=green]████[color=transparent]░░░░[/color][color=green]█████
[color=transparent]0░░░░░[/color][color=green]█████[color=transparent]░░░░[/color][color=green]█[color=transparent]░░░░[/color][color=green]████
[color=transparent]1░░░░░░[/color][color=green]█████[color=transparent]░░░░░░[/color][color=green]█████
[color=transparent]2░░░░░░░░[/color][color=green]█████[color=transparent]░░░[/color][color=green]████
[color=transparent]3░░░░░░░░░[/color][color=green]██████████
[color=transparent]4░░░░░░░░░░░[/color][color=green]██████
[color=transparent]5░░░░░░░░░░░░░[/color][color=green]██
[/size]
[/td]
[td]
[size=3pt][color=transparent]górny wiersz[/color][/size]
[size=18pt][size=10pt][color=transparent]░[/color][/size][url=http://earndrop.energi.world/homepage.php?ref=54209][font=Arial Black][color=green]ENERGI (NRG)--BEST 2019 [color=#ce1111]AIRDROP[/color]--UP TO 100 NRG (~$220)[/color][/font][/url][size=7pt][color=transparent]░[/color][/size][/size]
[/td]
[td]
[size=2pt][color=transparent]1░░░░░░░░░░░░░[/color][color=green]██[/color]
[color=transparent]2░░░░░░░░░░░[/color][color=green]██████
[color=transparent]3░░░░░░░░░[/color][color=green]██████████
[color=transparent]4░░░░░░░░[/color][color=green]█████[color=transparent]░░[/color][color=green]█████
[color=transparent]5░░░░░░[/color][color=green]█████[color=transparent]░░░░░[/color][color=green]██████
[color=transparent]6░░░░░[/color][color=green]█████[color=transparent]░░░░[/color][color=green]███████
[color=transparent]7░░░[/color][color=green]█████[color=transparent]░░░░░[/color][color=green]██████[color=transparent]░░░░[/color][color=green]██
[color=transparent]8░░[/color][color=green]█████[color=transparent]░░░░[/color][color=green]███████[color=transparent]░░░[/color][color=green]█████
[color=transparent]9░░░[/color][color=green]█████[color=transparent]░░░░[/color][color=green]████[color=transparent]░░░░[/color][color=green]█████
[color=transparent]0░░░░░[/color][color=green]█████[color=transparent]░░░░[/color][color=green]█[color=transparent]░░░░[/color][color=green]████
[color=transparent]1░░░░░░[/color][color=green]█████[color=transparent]░░░░░░[/color][color=green]█████
[color=transparent]2░░░░░░░░[/color][color=green]█████[color=transparent]░░░[/color][color=green]████
[color=transparent]3░░░░░░░░░[/color][color=green]██████████
[color=transparent]4░░░░░░░░░░░[/color][color=green]██████
[color=transparent]5░░░░░░░░░░░░░[/color][color=green]██
[/size]
[/td]
[/tr]
[/table]
[/center]

EDIT:
Postanowiłem nieco zmodyfikować sygnaturkę i po chwili natknąłem się na problem ograniczenia ilości znaków (przekroczyłem o blisko tysiąc) ale wystarczyło skorzystać z porad w ostatnim poście - dot ograniczania znaków (szczególnie chodzi o nie zamykanie znaczników dot kolorów - czyli zapominamy o [/color] oraz ustawianie głównego koloru dzięki czemu nie musimy go umieszczać za każdym razem) i zjechałem o tysiąc znaków w dół idealnie mieszcząc się w limicie:

1░░░░░░░░░░░░░██ 2░░░░░░░░░░░██████ 3░░░░░░░░░██████████ 4░░░░░░░░█████░░█████ 5░░░░░░█████░░░░░██████ 6░░░░░█████░░░░███████ 7░░░█████░░░░░██████░░░░██ 8░░█████░░░░███████░░░█████ 9░░░█████░░░░████░░░░█████ 0░░░░░█████░░░░█░░░░████ 1░░░░░░█████░░░░░░█████ 2░░░░░░░░█████░░░████ 3░░░░░░░░░██████████ 4░░░░░░░░░░░██████ 5░░░░░░░░░░░░░██

ENERGI (NRG) -- BEST 2019 AIRDROP     GET UP TO 100 NRG (~$220) FOR FREE

1░░░░░░░░░░░░░██ 2░░░░░░░░░░░██████ 3░░░░░░░░░██████████ 4░░░░░░░░█████░░█████ 5░░░░░░█████░░░░░██████ 6░░░░░█████░░░░███████ 7░░░█████░░░░░██████░░░░██ 8░░█████░░░░███████░░░█████ 9░░░█████░░░░████░░░░█████ 0░░░░░█████░░░░█░░░░████ 1░░░░░░█████░░░░░░█████ 2░░░░░░░░█████░░░████ 3░░░░░░░░░██████████ 4░░░░░░░░░░░██████ 5░░░░░░░░░░░░░██

ONLY CITIZENS OF THE USA & CANADA

1░░░░░░░░░░░░░██ 2░░░░░░░░░░░██████ 3░░░░░░░░░██████████ 4░░░░░░░░█████░░█████ 5░░░░░░█████░░░░░██████ 6░░░░░█████░░░░███████ 7░░░█████░░░░░██████░░░░██ 8░░█████░░░░███████░░░█████ 9░░░█████░░░░████░░░░█████ 0░░░░░█████░░░░█░░░░████ 1░░░░░░█████░░░░░░█████ 2░░░░░░░░█████░░░████ 3░░░░░░░░░██████████ 4░░░░░░░░░░░██████ 5░░░░░░░░░░░░░██

Code:

[center]
[table]
[tr]
[td]
[size=2pt][color=green][color=transparent]1░░░░░░░░░░░░░[/color]██
[color=transparent]2░░░░░░░░░░░[/color]██████
[color=transparent]3░░░░░░░░░[/color]██████████
[color=transparent]4░░░░░░░░[/color]█████[color=transparent]░░[/color]█████
[color=transparent]5░░░░░░[/color]█████[color=transparent]░░░░░[/color]██████
[color=transparent]6░░░░░[/color]█████[color=transparent]░░░░[/color]███████
[color=transparent]7░░░[/color]█████[color=transparent]░░░░░[/color]██████[color=transparent]░░░░[/color]██
[color=transparent]8░░[/color]█████[color=transparent]░░░░[/color]███████[color=transparent]░░░[/color]█████
[color=transparent]9░░░[/color]█████[color=transparent]░░░░[/color]████[color=transparent]░░░░[/color]█████
[color=transparent]0░░░░░[/color]█████[color=transparent]░░░░[/color]█[color=transparent]░░░░[/color]████
[color=transparent]1░░░░░░[/color]█████[color=transparent]░░░░░░[/color]█████
[color=transparent]2░░░░░░░░[/color]█████[color=transparent]░░░[/color]████
[color=transparent]3░░░░░░░░░[/color]██████████
[color=transparent]4░░░░░░░░░░░[/color]██████
[color=transparent]5░░░░░░░░░░░░░[/color]██

[/td]
[td]
[center][size=13pt][url=http://earndrop.energi.world/homepage.php?ref=54209][font=Arial Black][color=green]    ENERGI (NRG) -- BEST 2019 [color=#ce1111]AIRDROP  [/color]
  GET UP TO 100 NRG (~$220) [color=#ce1111]FOR FREE  [/font][/url][/center]
[/td]
[td]
[size=2pt][color=green][color=transparent]1░░░░░░░░░░░░░[/color]██
[color=transparent]2░░░░░░░░░░░[/color]██████
[color=transparent]3░░░░░░░░░[/color]██████████
[color=transparent]4░░░░░░░░[/color]█████[color=transparent]░░[/color]█████
[color=transparent]5░░░░░░[/color]█████[color=transparent]░░░░░[/color]██████
[color=transparent]6░░░░░[/color]█████[color=transparent]░░░░[/color]███████
[color=transparent]7░░░[/color]█████[color=transparent]░░░░░[/color]██████[color=transparent]░░░░[/color]██
[color=transparent]8░░[/color]█████[color=transparent]░░░░[/color]███████[color=transparent]░░░[/color]█████
[color=transparent]9░░░[/color]█████[color=transparent]░░░░[/color]████[color=transparent]░░░░[/color]█████
[color=transparent]0░░░░░[/color]█████[color=transparent]░░░░[/color]█[color=transparent]░░░░[/color]████
[color=transparent]1░░░░░░[/color]█████[color=transparent]░░░░░░[/color]█████
[color=transparent]2░░░░░░░░[/color]█████[color=transparent]░░░[/color]████
[color=transparent]3░░░░░░░░░[/color]██████████
[color=transparent]4░░░░░░░░░░░[/color]██████
[color=transparent]5░░░░░░░░░░░░░[/color]██

[/td]
[td]
[center][size=13pt][url=http://earndrop.energi.world/homepage.php?ref=54209][font=Arial Black][color=green]  ONLY CITIZENS OF THE 
[color=#ce1111] USA & CANADA [/font][/url][/center]
[/td]
[td]
[size=2pt][color=green][color=transparent]1░░░░░░░░░░░░░[/color]██
[color=transparent]2░░░░░░░░░░░[/color]██████
[color=transparent]3░░░░░░░░░[/color]██████████
[color=transparent]4░░░░░░░░[/color]█████[color=transparent]░░[/color]█████
[color=transparent]5░░░░░░[/color]█████[color=transparent]░░░░░[/color]██████
[color=transparent]6░░░░░[/color]█████[color=transparent]░░░░[/color]███████
[color=transparent]7░░░[/color]█████[color=transparent]░░░░░[/color]██████[color=transparent]░░░░[/color]██
[color=transparent]8░░[/color]█████[color=transparent]░░░░[/color]███████[color=transparent]░░░[/color]█████
[color=transparent]9░░░[/color]█████[color=transparent]░░░░[/color]████[color=transparent]░░░░[/color]█████
[color=transparent]0░░░░░[/color]█████[color=transparent]░░░░[/color]█[color=transparent]░░░░[/color]████
[color=transparent]1░░░░░░[/color]█████[color=transparent]░░░░░░[/color]█████
[color=transparent]2░░░░░░░░[/color]█████[color=transparent]░░░[/color]████
[color=transparent]3░░░░░░░░░[/color]██████████
[color=transparent]4░░░░░░░░░░░[/color]██████
[color=transparent]5░░░░░░░░░░░░░[/color]██

[/td]
[/tr]
[/table]
[/center]

[EDIT 2]
I ostatnia wariacja na temat sygnatury o tematyce airdropa energi:

ENERGI($NRG) 60th COINMARKETCAP LISTED ON KUCOIN & DIGIFINEX

1░░░░░░░░░░░██ 2░░░░░░░░░██████ 3░░░░░░░██████████ 4░░░░░░█████░░█████ 5░░░░█████░░░░░██████ 6░░░█████░░░░███████ 7░█████░░░░░██████░░░░██ 8█████░░░░███████░░░█████ 9░█████░░░░████░░░░█████ 0░░░█████░░░░█░░░░████ 1░░░░█████░░░░░░█████ 2░░░░░░█████░░░████ 3░░░░░░░██████████ 4░░░░░░░░░██████ 5░░░░░░░░░░░██

AIRDORP(100 NRG~$850!!!)   GET YOUR FREE CRYPTO

1░░░░░░░░░░░██ 2░░░░░░░░░██████ 3░░░░░░░██████████ 4░░░░░░█████░░█████ 5░░░░█████░░░░░██████ 6░░░█████░░░░███████ 7░█████░░░░░██████░░░░██ 8█████░░░░███████░░░█████ 9░█████░░░░████░░░░█████ 0░░░█████░░░░█░░░░████ 1░░░░█████░░░░░░█████ 2░░░░░░█████░░░████ 3░░░░░░░██████████ 4░░░░░░░░░██████ 5░░░░░░░░░░░██

GLOBAL ROUND ONLY 5K PEOPLE DON'T MISS IT!!! REGISTER NOW

idziemy dalej - tym razem na tapetę idzie LATOKEN i ich program airdrop:

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

s LATOKEN

░░░░░░░

ACCESS TO THOUSANDS FREE TOKENS YOUR INVITATION IS HERE

░░░░░░░

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

s LAAIRDROP

Code:

[center]
[table][tr][td]
[url=https://airdrop.latoken.com/invite/dFCIarukXmFHUcx9][size=2pt][color=black]
[color=transparent]░░░░░░░[/color]▄▄▄▄▄▄
[color=transparent]░░░░[/color]▄██████████▄
[color=transparent]░░░[/color]██████████████
[color=transparent]░░[/color]████     ██▌      ███▌
[color=transparent]░[/color]████▌    ██▌        ████ 
█████    ▐██     █    ████▌
████▌   ▐██     ██    ████
████    ▐██               ███▌
███▌    ██▌   ████     ███
[color=transparent]░[/color]██              █████     █▌
[color=transparent]░░[/color]████████████████
[color=transparent]░░░[/color]██████████████
[color=transparent]░░░░[/color]▀██████████▀
[color=transparent]░░░░░░░[/color]▀▀▀▀▀▀[/url]
[/td]
[td]
[url=https://airdrop.latoken.com/invite/dFCIarukXmFHUcx9][size=5pt][color=transparent]s[/color][/size]
[size=20pt] [B]LATOKEN[/B][/url][/td]

[td]
[color=transparent]░░░░░░░[/color]
[/td]

[td]
[center][url=https://airdrop.latoken.com/invite/dFCIarukXmFHUcx9][size=14pt] [B]ACCESS TO THOUSANDS FREE TOKENS 
YOUR INVITATION IS [color=red]HERE[/color][/url][/center]
[/td]

[td]
[color=transparent]░░░░░░░[/color]
[/td]

[td]
[url=https://airdrop.latoken.com/invite/dFCIarukXmFHUcx9][size=2pt][color=black]
[color=transparent]░░░░░░░[/color]▄▄▄▄▄▄
[color=transparent]░░░░[/color]▄██████████▄
[color=transparent]░░░[/color]██████████████
[color=transparent]░░[/color]████     ██▌      ███▌
[color=transparent]░[/color]████▌    ██▌        ████ 
█████    ▐██     █    ████▌
████▌   ▐██     ██    ████
████    ▐██               ███▌
███▌    ██▌   ████     ███
[color=transparent]░[/color]██              █████     █▌
[color=transparent]░░[/color]████████████████
[color=transparent]░░░[/color]██████████████
[color=transparent]░░░░[/color]▀██████████▀
[color=transparent]░░░░░░░[/color]▀▀▀▀▀▀[/url]
[/td]
[td]
[url=https://airdrop.latoken.com/invite/dFCIarukXmFHUcx9][size=5pt][color=transparent]s[/color][/size][size=20pt]
[B]LA[color=red]AIRDROP[/color][/B][/url][/td][/tr][/table][/center]

I po raz kolejny szukam szczęścia ;-) tym razem z binance jersey:

░░░░░░░░░░░▐▌ ░░░░░░░░░░████ ░░░░░░░░▐██████▌ ░░░░░░░██████████ ░░░░░▐████▌░░▐████▌ ░░░▐▌░░▐▌░░▐▌░░▐▌░░▐▌ ░░████░░░░████░░░░████ ▐██████▌▐██████▌▐██████▌ ░░████░░░░████░░░░████ ░░░▐▌░░▐▌░░▐▌░░▐▌░░▐▌ ░░░░░▐████▌░░▐████▌ ░░░░░░░██████████ ░░░░░░░░▐██████▌ ░░░░░░░░░░████ ░░░░░░░░░░░▐▌

BINANCE ----- JERSEY

ONLY NOW 10€ FOR REGISTER AND UP TO 100€ FOR REFS

DON'T WAIT!!! ONLY TO 23 JULY!!!

░░░░░░░░░░░▐▌ ░░░░░░░░░░████ ░░░░░░░░▐██████▌ ░░░░░░░██████████ ░░░░░▐████▌░░▐████▌ ░░░▐▌░░▐▌░░▐▌░░▐▌░░▐▌ ░░████░░░░████░░░░████ ▐██████▌▐██████▌▐██████▌ ░░████░░░░████░░░░████ ░░░▐▌░░▐▌░░▐▌░░▐▌░░▐▌ ░░░░░▐████▌░░▐████▌ ░░░░░░░██████████ ░░░░░░░░▐██████▌ ░░░░░░░░░░████ ░░░░░░░░░░░▐▌

BINANCE ----- JERSEY