|
Title: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on December 24, 2016, 04:53:17 AM 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.
Lesson 1: Forum's signature styling rules
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] Preview:
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] After design is ready remove 'quote' tags and your BBCode signature code is ready :) Do you want more lessons? :) Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: izanagi narukami on December 24, 2016, 04:22:58 PM .... Do you want more lessons? :) Ofcourse ;D 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 Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: TastyChillySauce00 on December 25, 2016, 05:52:35 AM 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? Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: azguard on 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.
Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: veleten on 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 ;D Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: jamalaezaz on December 26, 2016, 03:24:47 PM Yes. I want more lessons. please continue that..
can't you make video tutorials for this? Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: jaceefrost on 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.
Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: Jemzx00 on 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.
Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: ibuddy122505 on December 28, 2016, 03:13:58 PM 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. ;D
Waiting next lessons though. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on December 28, 2016, 05:49:39 PM 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. Ofcourse ;D 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 :) 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? 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 (...) can't you make video tutorials for this? (...) 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. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: darklus123 on December 28, 2016, 07:52:22 PM 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, Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on December 29, 2016, 02:39:16 AM 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, 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. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on December 29, 2016, 03:54:44 AM 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 (https://bitcointalk.org/index.php?topic=1727100.msg19983368#msg19983368). 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
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 (https://bitcointalk.org/index.php?topic=1727100.msg19983368#msg19983368). Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on December 29, 2016, 04:13:10 AM 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 (https://bitcointalk.org/index.php?topic=1727100.msg19983368#msg19983368). Exercise: Selected ASCII characters for our BBCode image: ░ and █ Step 1) Draw a rectangle with █ ASCII chars. Remember about max. height. (Lesson 2 (https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187)). 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://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187]Lesson 2[/url]). Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: azguard on December 29, 2016, 09:21:31 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. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on December 29, 2016, 01:51:39 PM 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:
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
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
Code: [table] Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: blockman on December 30, 2016, 11:23:28 AM 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! Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: veleten on December 30, 2016, 11:32:20 AM @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? Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on January 06, 2017, 02:04:52 AM 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] 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] 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 :) 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! Thanks! I hope you will learn something from my lessons :) @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? 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. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: Dmitry.Vastov on January 06, 2017, 02:45:33 AM 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. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on January 06, 2017, 02:53:04 AM 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. Hello, Step by step my friend. I'm sure you can be the BBCode master. Try to follow my lessons and try to recreate images from lesson's exercises. Try to experiment with it. All you need is patience and time. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on January 07, 2017, 03:13:45 PM Lesson 8: BBCode Drawing Basics lvl.III We alreadu know the most important things about BBCode signatures. It's time to create a simple signature for Serior/Hero/Legendary Members. Let say that we want to create a signature which will looks like: Quote
I won't write a step by step tutorial but instead of that I uploaded a video for you where I captured a process of creation. I doubled the clip speed, in reality it took me 18.5min. Video length is 9min12sec. Lesson 8 video tutorial: (https://youtu.be/McKHrx1tBK0) https://youtu.be/McKHrx1tBK0 https://i.imgur.com/Vf56RQz.png (https://youtu.be/McKHrx1tBK0) When we want to replicate an image/logo with BBCode it's good to prepare and upload an image file so we can check our results on the run with an original image. Lesson 8 Bitcoin logo image: https://i.imgur.com/gPmC4Xi.png It's simplified Bitcoin logo - I adjusted pitch angle to make it looks better in BBCode. 2pt ASCII chars are not perfect for BBCode drawings but at least 2pt is most compatible as we already know from the lesson 4 (https://bitcointalk.org/index.php?topic=1727100.msg17332360#msg17332360). 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 (https://bitcointalk.org/index.php?topic=1727100.msg19983368#msg19983368). Lesson 8 BBCode signature code: Code: [center][table] Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: LoyceV on January 07, 2017, 03:25:56 PM My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures.
A screenshot from the OP: On the left: Chromium. On the right: Firefox. http://i64.tinypic.com/2eq3wg2.png It's been like this for as long as I can remember. My own signature doesn't show correctly either. Adjusting zoom-settings doesn't matter. I prefer using Firefox though. Am I the only one with this problem? Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on January 07, 2017, 03:34:12 PM My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures. (...) It's been like this for as long as I can remember. My own signature doesn't show correctly either. Adjusting zoom-settings doesn't matter. I prefer using Firefox though. Am I the only one with this problem? Hey, You're not the only one. This is the main problem with BBCode designs. Different OS, different browser might cause a BBCode design will glitch. There is no possibility to create a design which will be 100% compatible with all OS and browsers. Read lesson 4 (https://bitcointalk.org/index.php?topic=1727100.msg17332360#msg17332360) for more info. Best regards. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: poptok1 on January 07, 2017, 04:01:44 PM My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures. -snip- It is also a matter of default fonts. Fonts processors in Linux systems are known to be chimeric (if there is such a word) Try to install some third party "clear font/win. alike" font renderer, it may help. I have had this problem with my puppy OS, manual setting up default fonts for firefox helped a bit but on the other hand, other sites where displayed incorrectly. Its a hassle :) @roslinpl 2bad you didn't make this thread self-moderated... Peoples (valuable) opinions disrupt the reading (including mine) ;) THX 4 sharing this roslin, knowledge is commodity, 1 knowledge = 1BTC and there are markets for it :) Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: darklus123 on January 17, 2017, 06:25:39 PM 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, 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. Thank you so much, I have been working on this slowly haha atleast I am learning. Good job to you do i haven't tested it yet but i will as soon as i am ready for my first signature design regards, Edit: i just tested it on the lesson 3 and i think that it just work fine Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: youdacapt on January 17, 2017, 07:53:11 PM I think there was some kind of premium tool to generating code automatically without manual work. But I didn't find it.
By the way. Is it possible to make a BBcodes could move like Gif format? Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Vikingr on January 17, 2017, 09:20:09 PM I think there was some kind of premium tool to generating code automatically without manual work. But I didn't find it. I have searched for it on google but not found any tool to generate the code directly for the signature of bitcointalk. By the way. Is it possible to make a BBcodes could move like Gif format? and it is not possible to make animated things in bbcode signatures Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: banjir on January 17, 2017, 09:25:06 PM omg finally i found this thread about how to creat some signature BBcode.
thankyou very much for tutoriasl i was bookmark your link now and ready for learn everyday '' wish me luck '' :) Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: veleten on January 22, 2017, 04:28:25 PM My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures. (...) It's been like this for as long as I can remember. My own signature doesn't show correctly either. Adjusting zoom-settings doesn't matter. I prefer using Firefox though. Am I the only one with this problem? Hey, You're not the only one. This is the main problem with BBCode designs. Different OS, different browser might cause a BBCode design will glitch. There is no possibility to create a design which will be 100% compatible with all OS and browsers. Read lesson 4 (https://bitcointalk.org/index.php?topic=1727100.msg17332360#msg17332360) for more info. Best regards. there is a tool to test compatibility with over 1000+ desktop browsers and any combination of 0S, device and browser it is not cheap if you buy a subscription,BUT there is a free trial that one can use to make sure your code looks ok https://www.browserstack.com/ Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: roslinpl on January 23, 2017, 12:20:48 PM My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures. (...) It's been like this for as long as I can remember. My own signature doesn't show correctly either. Adjusting zoom-settings doesn't matter. I prefer using Firefox though. Am I the only one with this problem? Hey, You're not the only one. This is the main problem with BBCode designs. Different OS, different browser might cause a BBCode design will glitch. There is no possibility to create a design which will be 100% compatible with all OS and browsers. Read lesson 4 (https://bitcointalk.org/index.php?topic=1727100.msg17332360#msg17332360) for more info. Best regards. there is a tool to test compatibility with over 1000+ desktop browsers and any combination of 0S, device and browser it is not cheap if you buy a subscription,BUT there is a free trial that one can use to make sure your code looks ok https://www.browserstack.com/ Hey, thanks a lot for sharing it with us. Seems like a cool tool! Thanks everyone for your participation in the lessons. I'm glad that someone find them useful :) More lessons coming soon :) Stay tuned. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: apoorvlathey on January 23, 2017, 01:03:54 PM Nice tutorials rosinpl ! Keep them coming :D
I also made a video displaying how to make pixel art using photoshop ! With this trick it is easier to make complex designs faster and it is better than pixel by pixel imo. Hope you like it ! Check is out here : https://i.imgur.com/LjA9HQV.png (https://www.youtube.com/watch?v=T8lIa8RGHjo&feature=youtu.be) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Joel_Jantsen on January 23, 2017, 05:48:46 PM Nice tutorials rosinpl ! Keep them coming :D Awesome.Never knew that,it simplifies process so much! I have been a idiot all my life wasting hours aligning the pixels and still couldn't get a perfect picture.I should start looking out for signature design contests now. :PI also made a video displaying how to make pixel art using photoshop ! With this trick it is easier to make complex designs faster and it is better than pixel by pixel imo. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Diced90 on February 11, 2017, 10:29:10 AM Hope you like it ! I like it and thanks for the share, though it seems people have not yet got into signature making looking at the number of views and likes ::) Waiting for lesson 5 now sensei Rosinpl Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: cluit on February 11, 2017, 02:08:34 PM I would like to appreciate roslinple and all other who sharing experience and tutorials, I will read and watch all tutorials and try to participate in signature designing contests too.
Thank You so much. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: V1saya on February 11, 2017, 04:10:37 PM Cool. This is very helpful. I studied some basic coding more than a decade ago but i'll try to read this when needed. I leave a message so I can easily track this. Thanks for the share. Much appreciated. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: ice18 on February 15, 2017, 04:56:57 AM Thank you for this thread, very useful tutorials maybe I can use it for future reference.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on February 15, 2017, 11:45:17 PM Nice tutorials rosinpl ! Keep them coming :D I also made a video displaying how to make pixel art using photoshop ! With this trick it is easier to make complex designs faster and it is better than pixel by pixel imo. Hope you like it ! Check is out here : https://i.imgur.com/LjA9HQV.png (https://www.youtube.com/watch?v=T8lIa8RGHjo&feature=youtu.be) Hello, Thanks for sharing! It's pretty impressive! The only thing I would mind about is using 'white-space' inside of a BBCode pixel image design placed in a table rows( [ td ] ). Because when you put 'white-space' at front of a row the space might be invisible. For example: Quote
Example code: Code: [quote] When you're working on a design it's important to know about it. I'm using transparent characters instead of white-spaces because of that. It waste more characters but it's more accurate technique IMO while drawing with BBcode. But no matter what, you have good skills and I would just suggest to think about replacing 'white-spaces' with transparent characters. Thanks again for your tutorial video. It's very interesting when we combine knowledge. Hope you like it ! I like it and thanks for the share, though it seems people have not yet got into signature making looking at the number of views and likes ::) Waiting for lesson 5 now sensei Rosinpl Actually you can find 8 lessons here :) Lesson 9 coming soon. A short one but useful :) Thanks everyone for kind words! Lesson 9 coming up :) (Edited: done :)). Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: stardustin on February 16, 2017, 10:54:40 AM Thank you very much man, this was a great tutorial, I am new here but from the begining I was interested about how to create bbcode signature. Don't forget that there are some people, which will like your work.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: zzTAz on February 16, 2017, 11:36:27 AM thank you for this awesome work ;)
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on February 16, 2017, 08:58:59 PM Lesson 9: "Inside of tables": Image size This is a quick lesson or perhaps just a quick tip. Lesson 9 is not related with signatures but it's related with BBCode and it's good to know about it when you think about thread design improvements etc. If you want to create a table and put some images inside of table rows your image will be visually resized (to smaller). Adding width attribute to our image will not solve the problem. Example: Quote
Quote
Example code: Code: [quote][table] How to solve the problem? In a same row where the image is we need to type a random line of text which will be longer than image width. And make it transparent. ( color=transparent ). Quote
Code: Code: [quote][table] Thank you very much man, this was a great tutorial, I am new here but from the begining I was interested about how to create bbcode signature. Don't forget that there are some people, which will like your work. thank you for this awesome work ;) Hello, You're welcome :) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on April 24, 2017, 04:01:31 PM Hello,
I noticed that using 'monospace' font family for BBCode designs makes a design more compatible on different systems even Mac OSX. Code: [font=Monospace][size=2pt]██████[/size][/font] But there is one problem, it doesn't look so well under Linux / Windows / Android. But it looks "same" under ie. Windows Chrome & OSX Safari.. In some cases it may be better to draw BBCode designs with Monospace font. Especially for single color / black designs. I will draw some examples to compare later on. Have a great day and best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: monsanto on May 15, 2017, 06:04:15 PM Thanks for creating these lessons ;)
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Russlenat on May 16, 2017, 04:36:44 AM Thank you also for these thread. It help me a lot. now I know how to make beautiful threads...
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: fitraok09 on May 31, 2017, 12:26:30 AM Lesson 10 still coming soon :D
I still learn from you... :) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Renji Abarai on May 31, 2017, 12:31:36 AM Impressive! Very informative and glad you have made this tutorial. I am searching this tutorial for a long time. It is timely that I have more free time now for an early vacation, now I can focus on this. Continue to make this informative tutorial, really help us to especially those aspiring campaign signature designer. :)
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on May 31, 2017, 12:36:27 AM Thank you everyone!
Your opinions are like the honey to my heart :) It's my pleasure to continue with tutorials, I just need time to write another proper lesson/tutorial which will take your skills to the another level :) Keep an eye on this thread and soon it will bring the lesson 10 to all of you :) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on June 21, 2017, 10:49:30 AM Hello,
Just a quick drop :P If you need to draw a logo or an element which shape is a circle you can start from this template: Quote
Code: [table] It's made with 'Monospace' font so it should looks the same on Linux, Android, Windows, iOS and OSX. :) Lesson 10 will come :) I'm just really super busy with all the projects, orders and stuff :) Lesson 10 is dedicated to 'Monospace' font, so let say the post above is a teaser ;) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: sir.humus on June 22, 2017, 09:07:44 AM Lesson 10 will come :) I'm just really super busy with all the projects, orders and stuff :) Lesson 10 is dedicated to 'Monospace' font, so let say the post above is a teaser ;) Best wishes. Can't wait for your next lesson... I already tries to play with some of your examples and it's really cool. I have a business idea, and when the day will come I hope to make a signature campaign, and design my own signature based on your lessons. Thanks for your effort, we need more people like you in this forum. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CHRISBIN702 on June 27, 2017, 02:49:16 AM Great tutorial. Wish I'd known about this a month ago.
Wondering if you'd mind answering a question. I have made my signature that you can see below. I've just recently created a cool little character that I want to add either on the side/sides of the signature or right in the middle of the top line. (In between #1 and Bitcoin) How would I go about that? I'm self-taught and really racking my brain over this. Here is the signature code for the one I'm using now. Code: [center][url=http://www.tinyurl.com/runcpaog][font=Arial Black][size=16pt]【[btc]〖[btc]【[btc]〖RunCPA #1 Bitcoin Affiliate Network〗[btc]】[btc]〗[btc]】[/size][/font][/url] 【BTC〖BTC【BTC〖RunCPA #1 Bitcoin Affiliate Network〗BTC】BTC〗BTC】 (http://www.tinyurl.com/runcpaog) Tired of clicking faucets? Do you know how to use the internet? If you answered yes then you should be earning to your full potential with RunCPA Please, any advice would be greatly appreciated. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on July 01, 2017, 12:04:34 PM Great tutorial. Wish I'd known about this a month ago. Wondering if you'd mind answering a question. I have made my signature that you can see below. I've just recently created a cool little character that I want to add either on the side/sides of the signature or right in the middle of the top line. (In between #1 and Bitcoin) How would I go about that? I'm self-taught and really racking my brain over this. (...) Please, any advice would be greatly appreciated. Hello, you won't be able to add a BBCode drawing in the middle of the top line because it will in same time split your bottom line. Well it's kinda possible to do it but you will need to make it all in one [ td ]. :) All lines in one [ td ]. Kinda tricky but possible. I'm here guys just for a second now to tell you that latest Chrome Browser update is pretty bad for BBCode artists xD ... I sent report to Chrome Help Center ... Look what they have done ! ██████████████████████████████████████████████████ If you are under Chrome 59.0.3071.86 you will notice: can you see the thin lines between each of █, all those lines are in different color since latest Chrome update xD eh ... PS. Hmm.. it's pretty strange, I tried to downgrade Chrome but I still see those lines ... perhaps I would need to better clear up Chrome files. Eh. PS2. Version 60.0.3112.50 (Official Build) beta (64-bit) doesn't fix the issue. I hope they will fix that soon! :) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Batwingoz on July 03, 2017, 05:17:20 AM BB code is used to make signatures on this forum ?
I am interested in your content very much. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: yefi on July 04, 2017, 01:12:53 AM Great tuts man. Had no idea you could use transparent colour for fixing the table glitch. I'd been using non-breaking ASCII space (alt+255 or %A0), but that wasn't retained when editing posts.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CHRISBIN702 on July 04, 2017, 05:16:47 AM Great tuts man. Had no idea you could use transparent colour for fixing the table glitch. I'd been using non-breaking ASCII space (alt+255 or %A0), but that wasn't retained when editing posts. This "table glitch"... Is it the reason that the face of my character is spaced out on some browsers and devices? Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on July 06, 2017, 11:55:14 PM Lesson 10: "Advanced BBCode Drawing Techniques lvl.I" I promised to say something more about drawing with 'Monospace' font. The 'Monospace' seems to be the only font which will keep 'the same' character width, gap between two characters - so it basically will looks the 'same' under various operating systems. (But surely not under all of them). So even Mac users with older versions of Safari will see 'the same' drawing as let say latest Chrome Version. I added 'let say' because latest Chrome messed up a bit our designs ;) I posted about it few days ago. Alright, so where's the catch? So the only problem is that 'Monospace' drawings doesn't looks so solid as same drawing made with a default font. But it has some important advantages. It's not only that it will looks 'the same' under different browsers. But also! You can draw your designs with 1px, 1pt, 2px, 2pt and still it will looks the same under various browsers. But! The same image created in different 'Monospace' font sizes will have different color saturation depending on the font size. 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 (https://bitcointalk.org/index.php?topic=1727100.msg19983368#msg19983368). Example: Quote
Code: [table] You can test it on your own, just open this page under different browsers to compare results. Still - it's not 100% compatible with all browsers on different operating systems. But it's much better than default font compatibility. Best regards. Great tuts man. Had no idea you could use transparent colour for fixing the table glitch. I'd been using non-breaking ASCII space (alt+255 or %A0), but that wasn't retained when editing posts. Thanks! And thanks for sharing another way of fixing the 'table glitch'. It didn't occur to me until you told about it. This "table glitch"... Is it the reason that the face of my character is spaced out on some browsers and devices? it might be. Perhaps it is related to that table glitch. Can you post that fragment of a code which seems to be glitched? I will have a look at it if you want me to. BB code is used to make signatures on this forum ? I am interested in your content very much. Yes, signatures here are made with BBCode. Glad you like the content. As always thanks to everyone who enjoy those tuts and learn from it. It's truly my pleasure to continue with more tutorials. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CHRISBIN702 on July 07, 2017, 02:02:06 AM This "table glitch"... Is it the reason that the face of my character is spaced out on some browsers and devices? it might be. Perhaps it is related to that table glitch. Can you post that fragment of a code which seems to be glitched? I will have a look at it if you want me to. That is the same one in my current Sig. Code: [table][tr][td][size=2pt][color=#0008ff] ██ ██[/color] This next one I will post below is the one I really like though. I haven't done any formatting yet. It's just drawn. I really like shape. It's accurate to the little guy. Code: [size=2pt] ▄ ▄ WOW! That is not at all what it looks like between my code tags. It looks exactly like the 2pt size one below. I really need to start using te transparent letter trick right? ▄ ▄ ██▄ ▄██ ████▆▅▄▂▁▂▂▄████ ███▀▀▀▀▀▀▀▀▀▀▀▀▀███ ███ ▀█ ███ ⏺ ⏺ █ ███ █ ███ █▆▅▂▁▂▄█ █ ████ ▌ ▌ █ █████▇▆▅▄▂▁▁▂▄▅▆██ █████████████████████ █████████████████████ ▀███████████████████ ▀███████████████████ ▀██████████████████ ██ ██ ██ ██ ███ ███ █ ██ █ ▀▀▀▀▀ [/quote] I forgot to thank you for taking the time to help me and for posting these tutorials too. I really appreciate it. I learned most of my BBcode by reverse engineering signature campaigns manager pages. Then I found your posts and my skill has been improving ever since. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on July 10, 2017, 09:20:07 PM This "table glitch"... Is it the reason that the face of my character is spaced out on some browsers and devices? it might be. Perhaps it is related to that table glitch. Can you post that fragment of a code which seems to be glitched? I will have a look at it if you want me to. That is the same one in my current Sig. (...) I forgot to thank you for taking the time to help me and for posting these tutorials too. I really appreciate it. I learned most of my BBcode by reverse engineering signature campaigns manager pages. Then I found your posts and my skill has been improving ever since. Hey, Yes, I'm pretty sure it has to be related with a table glitch. Using transparent characters inside of the image instead of just a whitespace is much more compatible and can get better results. The only problem is that it takes more characters to make it. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CryptoWorld87 on July 12, 2017, 06:40:29 AM I want to learn also this kind of job i want extra money i hope i can learn this in the future i dont go to college because we dont have enough money to sustain the tuition fee its hard for me to understand how to do this but maybe if i try hope i can do this so i can earn extra money thank you so much for this oppurtunity so i can learn this a lot in computer editing
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CHRISBIN702 on July 12, 2017, 07:39:55 AM I want to learn also this kind of job i want extra money i hope i can learn this in the future i dont go to college because we dont have enough money to sustain the tuition fee its hard for me to understand how to do this but maybe if i try hope i can do this so i can earn extra money thank you so much for this oppurtunity so i can learn this a lot in computer editing You can do this. Start this tutorial at pg.1 Try to do all roslinpl's examples and you'll get the hang of it. Then check out the different available signatures in the signature campaigns thread. Don't give up and don't be afraid to fail. If you're not failing at things then your not trying. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Adbitco on August 05, 2017, 01:00:15 PM Thanks for teaching us something really useful. I guess being acquainted with html or xhtml makes it easier to learn bbcoding faster, correct?
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on August 05, 2017, 01:10:17 PM Thanks for teaching us something really useful. I guess being acquainted with html or xhtml makes it easier to learn bbcoding faster, correct? Hey, you're welcome :) It's surely going to be easier since you know HTML and source code doesn't looks for you like a spaghetti :) Creating BBCode Signatures is a mixture of quite simple coding + vision of the design. Have a great day everyone, More tuts coming soon :) (this week) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Diced90 on August 08, 2017, 09:29:11 PM Nice tutorials rosinpl ! Keep them coming :D seems video was taken down for some reason any help with this kind of video tutorial using photoshop for ASCII/pixel art...trying to practice some BBCode Drawing to draw logsI also made a video displaying how to make pixel art using photoshop ! With this trick it is easier to make complex designs faster and it is better than pixel by pixel imo. Hope you like it ! Check is out here : https://i.imgur.com/LjA9HQV.png (https://www.youtube.com/watch?v=T8lIa8RGHjo&feature=youtu.be) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on September 02, 2017, 10:57:03 AM Hello everyone,
I know I'm a bit late with another lesson. I'm super busy :) What else can I say. I was just working on a signature and I was struggling with 4000 sig char limit. I came out with a simple method how to replace transparent '░' in your BBCode drawings into a whitespace. Which saves a lot of characters because you don't need to add [ color = transparent ] [ /color] after each '░'. It works well with Monospace 2px font, wasn't tested with other sizes but with Monospace 2px it works like a charm. After you draw you BBCode pixel image you can just replace '░' with a 'whitespace'. It will looks 'glitchy' on editor screen but with Monospace (at least for sure with Monospace 2px) after previewing it will looks the same on all devices including my old Samsumg S3 Mini xD So it's a good method to save a lot of characters! I will write more about it in upcoming lesson and we will test different sizes than 2px on Android, Windows, Linux and iOS. I will try to write it down tonight but I cannot promise :) Stay busy! Have a great weekend ;) (...) seems video was taken down for some reason any help with this kind of video tutorial using photoshop for ASCII/pixel art...trying to practice some BBCode Drawing to draw logs Sorry, I cannot help with that. I don't use PS to create BBCodes. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: |Admiral| on September 02, 2017, 11:53:12 AM Your Tutorials are awesome, I don't have time to do these things but it's kind of fun and you have made things much easier.
Thanks! Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: maricapar on September 02, 2017, 02:12:07 PM Thank you for lessons! Great tutorial :)
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: webvn20 on September 03, 2017, 12:08:56 PM This is great tutorial , i don't think that we can create a symbol by input text in bbcode on this forum, with this tutorial i can do it , i will try make a symbol like heart or symbol different . it will make a post nice to see ,maybe good for seo.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: ansi on September 19, 2017, 01:47:30 AM Great New Thing s didn't know about before since im so noob in this domain
Waiting your next tutorials mate Would you mind name that edit program you used in your tutorial video, the one to mass edit & change some characters you want. (search & replace) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CHRISBIN702 on September 19, 2017, 11:15:27 AM Great New Thing s didn't know about before since im so noob in this domain Waiting your next tutorials mate Would you mind name that edit program you used in your tutorial video, the one to mass edit & change some characters you want. (search & replace) I just use basic wordpad that comes with Windows. Works exactly the same for me. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Aamir1 on September 21, 2017, 03:15:52 PM Never thought that someday i would be able to design signature, but i am now, and it is all because of you. Thank you very much @roslinpl for all the tutorials and tips you have posted so far, and for the ones you will in future. So far, learnt everything you have posted, and eagerly waiting to see the next tutorial.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: MintCondition on September 27, 2017, 02:13:02 PM Hello OP. Is there a tutorial on the application of Glow and shadow tool of BBCodes here. I'm having trouble on selecting color code to use. Can I know where to see the list of the color code applicable on that function? Thanks
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Aamir1 on September 27, 2017, 03:41:04 PM Hello OP. Is there a tutorial on the application of Glow and shadow tool of BBCodes here. I'm having trouble on selecting color code to use. Can I know where to see the list of the color code applicable on that function? Thanks Here: https://ufile.io/j1orn It is my personal collection of fonts, colors and symbols that can be used for BBCode designing. Download the file. Just to help the OP a little bit, i can tell you how to use glow, but i myself don't know the usage of shadow yet. So here is how you can use glow: Code: [glow=(color code or color name),(strength),(opacity)]Your text[/glow] Code: [glow=pink,2,300]BitcoinTalk[/glow] Result: Quote BitcoinTalk I hope i could be of some help, and maybe roslinpl can explain this in a better way, so you can also wait for his reply. Cheers. Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: foxydoxy on October 14, 2017, 05:24:56 PM I recently helped my friend to design and code signatures for his bounty program, I was really newbie on that but this section helped me. It made me angry, anytime I use the code I got from http://my.asciiart.club/ and check in post preview, I saw something different from the original code! Finally found this post and found that "px" and "pt" is the solution! Thank you for your post.
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. 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
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. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CHRISBIN702 on October 17, 2017, 05:54:16 AM Hello OP. Is there a tutorial on the application of Glow and shadow tool of BBCodes here. I'm having trouble on selecting color code to use. Can I know where to see the list of the color code applicable on that function? Thanks This was covered in lesson 7 and has been a very valuable tool for adding colors and gradients. http://patorjk.com/text-color-fader I also like this site for quick color grabs. https://html-color.codes/ Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Maingtoled1958 on October 18, 2017, 09:24:01 PM i’m newbie is there any viewer site to view codes
2) youtube url not work Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: BlackMambaPH on October 19, 2017, 03:10:58 AM When I'm doing signature design here in bitcointalk, this thread help me a lot, and also this following link:
List of unicode characters: https://en.wikipedia.org/wiki/List_of_Unicode_characters HTML Color Picker and more: https://www.w3schools.com/colors/colors_picker.asp HTML Colors From Image: https://html-color-codes.info/colors-from-image/ Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: wilhb81 on October 19, 2017, 03:39:54 AM OP, I have a question here. What's the differences between BBCode and Markdown? Is BBCode easier than Markdown or vice versa?
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: murtaja on November 05, 2017, 03:40:39 PM I NEED SOMEONE WHO KNOWS TO CREAT THE SIGNATURE CODING. PLEASE CONTACT ME URGENTLY.
U WILL BE PAID IN FIET Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Wunderkind on November 07, 2017, 11:30:56 PM Excellent thread with some awesome resources, thanks for the effort you've put into this.
Will definitely help me out if I dive deeper into signature designing. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: uelque on November 08, 2017, 12:15:06 AM It was really helpful, thank you for sharing your knowledge. Signatures are really in demand today because of to many ICO's coming out but I guess it will be really hard to get a job in making signatures specially when you guys who has a big name in signature industry are our competitors. But still thank you for this knowledge I'll try making some to test the knowledge I got. :)
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: BitcoinDiamond on November 08, 2017, 12:20:50 PM Great work! Will be using these for sure.
Keep up the good work! Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on November 09, 2017, 04:14:32 PM Hello everyone,
thanks for all the questions, messages and for improvement of your BBCode skillz ;-) True pleasure to share my knowledge with you and in same time improve skills for both sides. I have some new interesting techniques to share with you. But 1st let me start from answering to your questions: This is great tutorial , i don't think that we can create a symbol by input text in bbcode on this forum, with this tutorial i can do it , i will try make a symbol like heart or symbol different . it will make a post nice to see ,maybe good for seo. You can use many symbols - when we talk about the heart sometimes it's just better/easier/faster to use UNICODE/ASCII symbol instead of drawing it with UNICODE squares. It depends what kind of the results you would like to get. If you need just a heart in any shape you can try to use those: ♥ ❤ ❥ Quote
(...) Would you mind name that edit program you used in your tutorial video, the one to mass edit & change some characters you want. (search & replace) The one from the tutorial video was Sublime Text (https://www.sublimetext.com). If you're using Linux/macOS I suggest to use Brackets (http://brackets.io). (...) I just use basic wordpad that comes with Windows. Works exactly the same for me. You can use any editor you like. Some of them might save more time some of them less. It's like with coding - you can code super powerful app using Vi ^_^. Hello OP. Is there a tutorial on the application of Glow and shadow tool of BBCodes here. I'm having trouble on selecting color code to use. Can I know where to see the list of the color code applicable on that function? Thanks We cannot add shadow to the signatures, Heroes and Legendary can add glow but no shadow. You can draw a shadow for a logo or maybe for some elements but for not for the text. You can generate text gradient with patorjk.com/text-color-fader (http://patorjk.com/text-color-fader/) and then replace #color tag with #glow and also replace ] with ,1]. Example: Code: [color=#000] ---> [glow=#000,1] (...) 2) youtube url not work The one of the videos as you can see wasn't posted by me. And someone who posted his tutorial seems to delete that video. I cannot do nothing about it. OP, I have a question here. What's the differences between BBCode and Markdown? Is BBCode easier than Markdown or vice versa? We can say that Markdown is similar to BBCode - both of them can format the text. But BBCode is made to format the messages posted on the Internet. While Markdown is something more than that. I never did such a things like drawing a logo from Unicode characters in Markdown so it's hard to say is it easier or not ^_^. I think I answered to all the questions related to BBCode tutorials and lessons. Thanks again for your opinions, kind words, questions. I will post few new tricks tonight/tomorrow. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CryptoRama on November 13, 2017, 04:00:14 PM Thank you very much for this tutorial, Really great work, it helped a lot to me. first time I only fastreaded thread, and then read it alltrough and I allmost knew everything, now I just need to make some designs :)
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: 0o on November 13, 2017, 09:35:48 PM I have been looking for such a tutorial for a long time but I have always been looking in the wrong places, Thanks, I will now start to study.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Wingo on November 13, 2017, 11:32:22 PM Thank you! I am learning from this one. Great tutorial and videos, very helpful for those who wanted to learn. More power!
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: luzanb on December 21, 2017, 03:06:44 PM How can I do rowspan and colspan in Tables?
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Dydot on January 11, 2018, 02:17:15 PM Thanks for the tutorial, you are doing a great job here. Is there a reliable online tool that can be used to generate ASCII?
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Rozcobs on January 11, 2018, 05:21:43 PM Guys thank you for sharing you BBCode samples/ideas. Very informative. But since I'm a jr member i don't have enough privilege to use full signatures but only a few lines now so it's okay. No rush, better keeping up until I can learn on through. But now, I just enjoy watching how good you are guys on your works. Keep up guys and share more. Thanks.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Rabby637 on January 24, 2018, 12:12:15 AM Thank you so much to give us such type of lesson. But have a question have any YouTube video where i can see this practically .
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on January 24, 2018, 03:54:01 AM Thank you so much to give us such type of lesson. But have a question have any YouTube video where i can see this practically . Hello, you're welcome. I recommend to read the 1st post. (https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187) There's a link to Lesson 8 (https://bitcointalk.org/index.php?topic=1727100.msg17430917#msg17430917) and one YouTube video (https://youtu.be/McKHrx1tBK0). BTW. I'm sorry but I had to many things to do and I couldn't write new lessons and share some fresh tutorials with you but it's coming ;-) Coming soon: Lesson 11: Advanced Character Saving Techniques I'll be back soon ^_^ PS. I just read this: Jr Members can no longer have signature links. It's worth noticing.Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Kutz on January 24, 2018, 08:37:38 AM Best thread I ever seen here in BTT.. Thank you for sharing your talent to us. It help us a lot to improve our skills with Being artist/designer is not enough without knowing this kind of codes and skills..please continue this brilliant tutorials
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: BlackMambaPH on January 24, 2018, 10:26:32 AM Best thread I ever seen here in BTT.. Thank you for sharing your talent to us. It help us a lot to improve our skills with Being artist/designer is not enough without knowing this kind of codes and skills..please continue this brilliant tutorials He is one of the reason why I'm a bitcointalk signature designer ( more on because of this thread lol.) And because of that I'm also of his one service competitor here in bitcointalk. But of course his better than me. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on January 24, 2018, 10:22:49 PM Best thread I ever seen here in BTT.. Thank you for sharing your talent to us. It help us a lot to improve our skills with Being artist/designer is not enough without knowing this kind of codes and skills..please continue this brilliant tutorials He is one of the reason why I'm a bitcointalk signature designer ( more on because of this thread lol.) And because of that I'm also of his one service competitor here in bitcointalk. But of course his better than me. @Kutz thanks! I will continue that's for sure. @BlackMambaPH thank you, but I don't know am I better than you or better than anyone else. It's not me who judge. My main reason to create those tutorials was to achieve such a goals like hearing that somebody became a BCTalk designer with a help of my tutorials. Also if only I would be the only good BBCode sig designer that would be really very bad and also boring. It's like if fashionable shoes were made only by Christian Louboutin.. Competition causes that what we create becomes better and better. Or we're out of the business ^_^. I love when people have a choice between services and there is no monopoly on any of those. Someone might think that my signatures are the best while other might think the opposite. Then such a person can choose other designers like you and get out of the situation with a smile on a face. And that's the most important thing here. Rather than taking away competition - short-sightedness has no purpose - everything must evolve. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Pali on February 08, 2018, 09:28:55 PM This was very informative and helped me out in a great way.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: evgeshti on February 16, 2018, 08:01:55 PM Hello. I apologize if I ask a question that already sounded (there is no way to reread the entire topic).
I encountered such a problem - when I was creating signatures, I checked their appearance in the usual post by pressing the "review" button. After I finished the signatures and gave them to the customer, he did not see some characters (looked like "?", This symbol was "|"). 1) what it can depend on (if I checked everything correctly, then the characters that were not read by the Legendary/Hero in other signatures looked normal, but this may not be accurate information ;))? 2) Is it possible for me as a JuniorMember to check the work of the signature for ranks higher than mine? Thanks! All good! Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: TSM.Global on February 17, 2018, 12:50:40 AM It is amazing people teach others for free!
We will too develop our educational blog soon. Thanks for the affirmation of the idea we had. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Owillz on March 13, 2018, 08:57:24 AM Hello, I have read through your projects and I have started practicing. Thanks.
But please can some help me with this? How do yoiu guys arrange the content of signature design?? When you look at some designs, you will see some images standing alone while some text are place over other text. An example of what I mean is the design of the second post (#2) on this thread. Here is the link. https://bitcointalk.org/index.php?topic=1727100.msg17288135#msg17288135 Please how can one design such signature and lay them out in that manner?? Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: fxstrike on March 14, 2018, 03:21:19 AM ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ●⚫ █ █ █ █ BTC █ █ █ █ ⚫● ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Do you use any editor to 'bolt' everything together, using this preview editor looks like very difficult and probably used up this forum resources, some offline editor maybe better and more responsive than using web based editorTitle: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Owillz on March 14, 2018, 11:04:16 AM Quote ▄▄▄ ▄▄▄▄▄ ▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ███ █████ ███ ███████████ ███ ██████ ███ ███ ███ ███ ██ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ██████ ███ ███ ███ ██████ ███ ▀▀▀ ▀▀▀ ▀▀▀▀▀ ▀▀▀ 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 Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: fxstrike on March 14, 2018, 11:11:21 AM ▄▄▄ ▄▄▄▄▄ ▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ███ ██████ ███ ███████████ ███ ██████ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ██████ ███ ███ ███ ██████ ███ ▀▀▀ ▀▀▀ ▀▀▀▀▀ ▀▀▀ 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 Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: temarazin on March 14, 2018, 11:15:03 AM 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. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: fxstrike on March 14, 2018, 11:20:23 AM Quote ▄▄▄ ▄▄▄▄▄ ▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ███ █████ ███ ███████████ ███ ██████ ███ ███ ███ ███ ██ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ██████ ███ ███ ███ ██████ ███ ▀▀▀ ▀▀▀ ▀▀▀▀▀ ▀▀▀ Just use tag tt or monospace font. 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.Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Owillz on March 15, 2018, 09:15:59 AM ▄▄▄ ▄▄▄▄▄ ▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ███ ██████ ███ ███████████ ███ ██████ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ██████ ███ ███ ███ ██████ ███ ▀▀▀ ▀▀▀ ▀▀▀▀▀ ▀▀▀ 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 Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Owillz on March 15, 2018, 09:17:24 AM 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 Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Owillz on March 15, 2018, 09:18:10 AM Quote ▄▄▄ ▄▄▄▄▄ ▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ███ █████ ███ ███████████ ███ ██████ ███ ███ ███ ███ ██ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ██████ ███ ███ ███ ██████ ███ ▀▀▀ ▀▀▀ ▀▀▀▀▀ ▀▀▀ Just use tag tt or monospace font. 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. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Owillz on March 15, 2018, 12:41:49 PM 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 Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: coly20032003 on March 15, 2018, 03:48:14 PM Great tutorial! I learned a lot from it. I am also interested in understanding more about how table alignment works.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on March 15, 2018, 05:23:25 PM 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 :) (...)please what exactly am i doing wrong??(...) You don't read the tutorials :-) (An answer is out there already ^_^ ) ( here (https://bitcointalk.org/index.php?topic=1727100.msg19983368#msg19983368) and here (https://bitcointalk.org/index.php?topic=1727100.msg21436763#msg21436763) ;-) ) (New tutorials coming out tonight ^_^) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Cobalt9317 on March 15, 2018, 06:50:38 PM 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. ;-) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: NathanJackson on March 15, 2018, 08:43:25 PM Thank you for lessons! Great tutorial
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: fxstrike on March 16, 2018, 12:55:12 AM -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 Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on March 16, 2018, 03:26:22 AM -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 ::) (ie. here (https://bitcointalk.org/index.php?topic=1727100.msg17430917#msg17430917)) and yeah I'm using 'SMF Preview editor' 8) 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 (it's not so evil at all ;) 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 :) Well ... it's not a real nightmare - it's more like a challenge 8) Let me share with you some character saving techniques which I'm using to fight with the demons of 4k limit ;D 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] Quote from: SAME results - MORE characters Code: [center][table] 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] Quote from: SAME results - MORE characters Code: [center][table] 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 ;) It's easier to show on the example ^_^: Quote from: SAME results - LESS characters Code: [center][table] Quote from: SAME results - MORE characters Code: [center][table] Quote from: SAME results - MORE characters Code: [center][table] 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 ;D Quote from: Experiment 1 Code: [center][table] 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 ;) Quote from: Experiment 2 Code: [center][table] 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] Quote from: SAME results - MORE characters Code: [center][table] Quote from: SAME results - LESS characters Code: [center][table] Quote from: SAME results - MORE characters Code: [center][table] 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] Hint 6: Replace transparent elements with a white space... I mentioned about it few months ago in a post (https://bitcointalk.org/index.php?topic=1727100.msg21436763#msg21436763). Quote from: SAME results - LESS characters Code: [center][table] Quote from: SAME results - MORE characters Code: [center][table] 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 :) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: temarazin on March 17, 2018, 02:36:52 PM Wow, thanks for the new lesson! But I didn't understand the advanced example in the Hint 4...
Code: [center][table]
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 ^^ Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: 1C6fV5DtakfKANLJ8GUV7hCaA on March 17, 2018, 03:13:40 PM 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!
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on March 17, 2018, 08:17:06 PM Wow, thanks for the new lesson! But I didn't understand the advanced example in the Hint 4... (...code) (...post table glitch (https://bitcointalk.org/index.php?topic=1727100.msg17336272#msg17336272) :) (...) 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] Quote from: SAME results - MORE characters Code: [center][table] 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 8) 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. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: temarazin on March 18, 2018, 12:10:44 PM Let me show an another example of what I meant: I got it now, thanks. :) 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. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on March 18, 2018, 04:38:04 PM Let me show an another example of what I meant: I got it now, thanks. :) 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 (https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187) 8) I even left a 'starter' for Senior/Hero/Legendary signatures (at the end of the lesson 3). Quote
Code: [quote][table] Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: temarazin on March 18, 2018, 08:13:30 PM Yes, I've read all your lessons. Hmm, I'll show with screenshots:
Preview (Chrome) http://dl4.joxi.net/drive/2018/03/18/0023/0474/1561050/50/357d365a91.png Real view (Firefox) https://i.imgur.com/dbGE1W8.png Code (https://pastebin.com/iT4RngxY) (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). Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on March 18, 2018, 09:45:24 PM 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 :) 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 :) 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 (https://bitcointalk.org/index.php?topic=1727100.msg19983368#msg19983368) and here (https://bitcointalk.org/index.php?topic=1727100.msg21436763#msg21436763). 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 ;) ::) 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 ::) 8) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: jhimli on March 21, 2018, 02:09:18 PM 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..
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Towerbee on March 25, 2018, 03:52:23 AM Great information. Thanks. I was looking for something like this and I am glad I found this topic / thread. :) Keep posting things like this.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: fxstrike on March 25, 2018, 05:18:55 AM What pixelette tool please?? Last give a link. Thanks There is another thread of this kind of guide and they share the pixelate tool there, visit the thread here (https://bitcointalk.org/index.php?topic=2198076.0)You can visit the link directly here ANSI Art Converter (https://manytools.org/hacker-tools/convert-image-to-ansi-art/) and another one pixelate (https://morgh.us/pixelate/) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: fxstrike on March 25, 2018, 05:22:46 AM To make job easier without having to use Bitcointalk Preview Editor you can use this offline BBCode editor (https://www.bleepingcomputer.com/download/bbeditor/dl/152/), it can render the image in almost realtime making it easy and faster to create the image from the block character.
Screenshot of it displaying the image shown here (https://bitcointalk.org/index.php?topic=2198076.msg22115172#msg22115172) Caution: not all bbcode work with SMF will render the same in the software, so make sure you still have SMF to make final adjustment, table tag is not working https://i.gyazo.com/95f75ff8d070fd1d175f482f4b19cd26.png Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on March 25, 2018, 05:00:49 PM To make job easier without having to use Bitcointalk Preview Editor you can use this offline BBCode editor (https://www.bleepingcomputer.com/download/bbeditor/dl/152/), it can render the image in almost realtime making it easy and faster to create the image from the block character. (...) IMO it's not really useful :-) But if you like it - use it ;-) For me it's a waste of time because: 1) Amount of characters 2) Results are not so good as drawing pixel by pixel in Bitcointalk Preview Editor. (BBCode drawings made in such editors often differ in size when displayed in SMF Editor and Forum's boards) 3) 8) What pixelette tool please?? Last give a link. Thanks I wrote about those "generators" few month ago ;D https://bitcointalk.org/index.php?topic=2198076.msg22105956#msg22105956 They are all crap ::) You think I'm lying because I sell designs and I don't want people to know that they can generate a signature within a couple of minutes? You're wrong 8) Try to use those "generators" to create a working/good looking BBCode Signature, then you'll understand why I don't use them 8) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: fxstrike on March 25, 2018, 05:24:27 PM IMO it's not really useful :-) But if you like it - use it ;-) For me it's a waste of time because: 1) Amount of characters 2) Results are not so good as drawing pixel by pixel in Bitcointalk Preview Editor. 3) 8) What pixelette tool please?? Last give a link. Thanks I wrote about those "generators" few month ago ;D https://bitcointalk.org/index.php?topic=2198076.msg22105956#msg22105956 They are all crap ::) You think I'm lying because I sell designs and I don't want people to know that they can generate a signature within a couple of minutes? You're wrong 8) Try to use those "generators" to create a working/good looking BBCode Signature, then you'll understand why I don't use them 8) Best wishes. Just use it as complimentary tools to the primary tools (SMF Preview Editor), I use 2-3 different tools to create screenshot, edit image and uploading before but once I have one tools that can do all that in one shot I use it, in this case the software don't have capability to render table so its not much usable for complex signature with clickable text and image but simple image would be easy Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on March 26, 2018, 03:53:01 AM Just use it as complimentary tools to the primary tools (SMF Preview Editor), I use 2-3 different tools to create screenshot, edit image and uploading before but once I have one tools that can do all that in one shot I use it, in this case the software don't have capability to render table so its not much usable for complex signature with clickable text and image but simple image would be easy Thanks for sharing. Who knows maybe someday I will also find a better tool for myself than the SMF Preview Editor. But I still think it's the best (at least for me) to use SMF Preview Editor 8) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: bubidan.id on April 06, 2018, 03:48:31 PM this is very useful, thanks for making this thread, and very easy to understand gradually. I have started to study, do you mind, if one day I ask personally through pm? I would like to be proficient just like you.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: r1s2g3 on April 15, 2018, 05:39:10 PM 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 Hi roslinpl Thanks for your great tutorial. I have few questions. 1. Apart from 4000 characters, do forum put limitation on 3 lines? (as you asked to quote p 3 times in different line.) 2. How these p and "pt" will relate to each other? I read signature above 42 pt will also be not displayed. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on April 16, 2018, 10:26:41 AM Hello,
wow this should get me to learn how to create a signature My pleasure 8) this is very useful, thanks for making this thread, and very easy to understand gradually. I have started to study, do you mind, if one day I ask personally through pm? I would like to be proficient just like you. Thanks, I don't mind if you ask personally through pm - just remember to make sure your question wasn't already answered 1000 times ;) Hi roslinpl Thanks for your great tutorial. I have few questions. 1. Apart from 4000 characters, do forum put limitation on 3 lines? (as you asked to quote p 3 times in different line.) 2. How these p and "pt" will relate to each other? I read signature above 42 pt will also be not displayed. 1. Limitations as usual - Junior members cannot add links into signatures etc. Described here: https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187 2. Max. height is 42px - not 42pt But also max. height is 3 lines of text without changing the font size. That's why I don't measure the signature height is it 42px or approx. 42px but instead I make a column with 3 x 'p' So I know if anything displays below the last 'p' I know it's too high 8) (Why 'p' and not 'a' ? - 'p' is higher than 'a' :) ) I don't ask to 'quote p 3 times in different line' - what I was saying is that the quote has same styling as the signature space - during the signature creation process if you will preview your design without putting it into 'quote' the final results will looks different in the signature space than while previewing. Creating and previewing your signature inside the 'quote' tags will let you see the real results. But don't forget to remove 'quote' tags before using the signature :) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: SamaelDNM on April 18, 2018, 04:21:32 PM This is what I was looking for. When I learn I will translate it into the subject in my language so that it is better explained to the community and of course I will mention it. thank you very much for this excellent tuto :D
thank you Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: StayVIP on April 20, 2018, 03:06:43 AM hallo roslinpl can u help me for make signature campaign. i have budget for 100$ my bounty campaign will coming soon release. i need your help pls for help my project.
Thanks u best regard Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Crypto_Sassy on April 20, 2018, 04:50:33 AM Hi roslinpl
I have gone through the lessons but where I can practice in forum? I cannot practice in my signature space . Is there any thing feasible in BBcode similar to HTML where you can HTML pages on a standalone server (.html files) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Prometheu$ on April 25, 2018, 07:42:04 AM ████████ ██████████ ████████████ ██████████████ ████████████████ ████████████████ ████████████████████ ██████████████████████ ██████████████████████ ████████████████████████ ██ ██████████████████████████ ██ ██████████████████████████ ██ ████████████████████████████ ██ ██████████████████████████████ ████████████████████████████ ██████████████████████████████ ████████ ████████████████████████████████ ████ ██████████████ ██████████████████████████████████ ████████████████████████████████ ██████████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████ ██████████ ██ ██████████████████████████████ ████ ██████████████████████████████ ██████████████████████████████ ████████████████████████████ ████████████████████████ ████████████████████████ ██████████████████████ ████████████████████ ██████████████ ( •‿ • ) ٩◔‿◔۶ Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Prometheu$ on April 25, 2018, 08:05:13 AM 37000 characters
6 colors 3 hours of work ████████ ██████████ ████████████ ██████████████ ████████████████ ████████████████ ████████████████████ ██████████████████████ ██████████████████████ ████████████████████████ ██ ██████████████████████████ ██ ██████████████████████████ ██ ████████████████████████████ ██ ██████████████████████████████ ████████████████████████████ ██████████████████████████████ ████████ ████████████████████████████████ ████ ██████████████ ██████████████████████████████████ ████████████████████████████████ ██████████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████ ██████████ ██ ██████████████████████████████ ████ ██████████████████████████████ ██████████████████████████████ ████████████████████████████ ████████████████████████ ████████████████████████ ██████████████████████ ████████████████████ ██████████████ Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: manji on April 25, 2018, 08:13:23 AM you're the insipired and mentor to me, I created a Tutorial for my local board about BBcode and Signature
https://bitcointalk.org/index.php?topic=3307884.msg34518304#msg34518304 Thank's @roslinpl Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: mobilazy on April 25, 2018, 12:26:05 PM Wow! This is a tremendous work! I'll stick to this thread until I'll learn all topics. Thank you.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: finaleshot2016 on May 14, 2018, 04:29:49 PM Is there any other way to select multiple ASCII characters to change colors?
https://i.imgur.com/Ax6aG48.png Now, i don't know what is the specific colors of each ASCII characters Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: arzunpathak on May 21, 2018, 12:04:14 AM Perfect, I just love you.
You've done a great job. Thank you for providing this information. I'll create one and share my code such that others can take it as an example. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: apoorvlathey on May 21, 2018, 06:14:00 AM Is there any other way to select multiple ASCII characters to change colors? If you have to change all the "yellow" color in your code to something else say red or "#4286f4" you could use the "Find and Replace" functionality available in most text editors like Notepad++ or MS Word.https://i.imgur.com/Ax6aG48.png Now, i don't know what is the specific colors of each ASCII characters If you want to replace the color of a particular section of BBCode copy that part in text editor and do above steps. In other cases you have to do it manually. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Strufmbae on May 22, 2018, 07:56:25 AM Looking forward to this topic and waiting for the next lesson.
Thanks. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Sova_tmb on May 22, 2018, 04:36:10 PM Very good information! Thank you man!!!
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: keyarnellyta on May 26, 2018, 03:27:24 AM this is very useful info, i want to learn more deeply it might take a long time to understand the signature
Title: Re: [LEARN] BBCode Lessons & Tutorials Post by: ItsZeroLimit on May 26, 2018, 04:56:57 PM 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). Another and easier way to solve that problem is to add empty table cells, i mean tags Code: [td][\td] Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: temarazin on May 29, 2018, 07:27:19 AM Hello! I translated your great lessons to Russian. BBCode - ypoки и тyтopиaлы (https://bitcointalk.org/index.php?topic=2991003.0).
Your work inspires me! Thanks for that, roslinpl. :) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: TradeOne on June 01, 2018, 10:16:26 AM Give more lessons, you are good at it ;) :)
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: layoutph on June 04, 2018, 03:15:58 PM Please allow me to post this because this is related to the top., This is a test to know if the 1000px width is the maximum width size for the forum width. I need to do this for the ANN thread I am working on. Below is a 1000pixel width image.
https://i.imgur.com/sH09GuY.png https://i.imgur.com/9QHLBOO.png Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: temarazin on June 04, 2018, 03:52:28 PM Please allow me to post this because this is related to the top., This is a test to know if the 1000px width is the maximum width size for the forum width. I need to do this for the ANN thread I am working on. Below is a 1000pixel width image. [...] Max width of post is 1540px. On the screen with 1920x1080 resolution. if the image is wider than the width of the post, it will take 100% of the width. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: layoutph on June 05, 2018, 02:24:01 PM Thank you dude for the 1920x1080 heads up. I'll take note of this when creating my next ANN thread designs. I see so the size of the screen matters, I thought the max is 1200px.
Please allow me to post this because this is related to the top., This is a test to know if the 1000px width is the maximum width size for the forum width. I need to do this for the ANN thread I am working on. Below is a 1000pixel width image. [...] Max width of post is 1540px. On the screen with 1920x1080 resolution. if the image is wider than the width of the post, it will take 100% of the width. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Crypto one on June 07, 2018, 08:48:20 PM Thank you so much for your lessons.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Ikaklo on June 19, 2018, 04:36:00 PM ██████████████████████████████████ ████████████████████████████████ ██████████████████████████████ ██████████████████████████████ ████████████████████████████ ██████████████████████████ ██████████████████████████ ████████████████████████ ████████████████████████ ██████████████████████ ████████████████████ ████████████████████ ██████████████████ ████████████████ ████████████████ ██████████████ ████████████ ██████████████ ████████████████ ██████████████████ ██████████████████████ ████████████████████████ ██████████████████████████ ██████████████████████████████ ████████████████████████████████████████████████ ██████████████████████████████████████████████████ ██████████████████████████████████████████████████ ████████████████████████████████████████████████ ██████████████████████████████████████████████ ████████████████████████████████████████████ ██████████████████████████████████████████████ ████████████████████████████████████████████ ██████████████████████████████████████████ ████████████████████████████████ ██████████████████████████████ ████████████████████████████ ████████████████████████ ██████████████████████ ██████████████████ ████████████████ ██████████████ ████████████ ████████████ ████████████ ██████████████ ██████████████ ████████████████ ██████████████████ ██████████████████ ████████████████████ ██████████████████████ ██████████████████████ ████████████████████████ ██████████████████████████ ██████████████████████████ ████████████████████████████ Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Ikaklo on June 19, 2018, 04:48:39 PM (http://bitdiscuss.xyz/)
██████████ [/url]████████████████████████ ██████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████████ ██████████████████████████████████████████████████ ████████████████████████████████████████████████████ ████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████ ████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████ ██████████████████████████████████████████████████ ██████████████████████████████████████████████ ██████████████████████████████████████████ ████████████████████████████████████ ████████████████████████████ ██████████████████ Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: arzunpathak on June 21, 2018, 03:05:26 PM Can you help me correcting this code?
Code: [center] it looks like this Quote
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on June 21, 2018, 05:20:02 PM Can you help me correcting this code? It looks like 'this' because of: https://bitcointalk.org/index.php?topic=1727100.msg17336272#msg17336272 'Table Glitch' won't occur while wearing the signature. Read tutorials. You'll be able to correct your code on your own. You just need to learn a bit more. ^_^ (PS. It seems your signature exceeds the allowed height. Remove 'email' link or add 'email' to other line of text.) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: LogitechMouse on June 27, 2018, 05:53:25 AM Hello. I sent you a PM but maybe you are too busy doing some designs. Would like to say thanks for posting a tutorial on how to create signature using BBCODE. It helped many people like me
Aside from thanking you, I would like to ask a question regarding colors. Lets say for example, I want to create the logo of bitcoin using BBCODE, how would you pick the exact hexadecimal value of the color?? Are you using any color picker tool or any website to know the exact value of the color?? Hope I deliver it correctly :D Thanks for answering to my question :) -LogitechMouse P.S. Found solutions on the internet already :). I will just wait for your next lessons and thanks again :) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on June 28, 2018, 04:08:21 PM Hello. I sent you a PM but maybe you are too busy doing some designs. Would like to say thanks for posting a tutorial on how to create signature using BBCODE. It helped many people like me Aside from thanking you, I would like to ask a question regarding colors. Lets say for example, I want to create the logo of bitcoin using BBCODE, how would you pick the exact hexadecimal value of the color?? Are you using any color picker tool or any website to know the exact value of the color?? Hope I deliver it correctly :D Thanks for answering to my question :) -LogitechMouse P.S. Found solutions on the internet already :). I will just wait for your next lessons and thanks again :) Hello, it depends on a situation. If I need to create a BTC logo I'll use #FF9900 ;) In many cases I just check the 'brand color' or I use a color picker from Chrome Tools for Developers. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: iamMhew on July 10, 2018, 10:57:07 AM i wish to learn this stuff quickly, lol . i try the "Lesson 5: BBCode Drawing Basics lvl.II, Exercise: Selected ASCII characters for our BBCode image: ░ and █" and im happy to follow and do what it says, but one thing i cant understand, itry to create 2 rectangle but its never seperate, what ever i do the second rectangle always show below the first one. i think i miss something in this tutorial, maybe i should go and read again from the top. :D
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on July 10, 2018, 01:59:09 PM i wish to learn this stuff quickly, lol . i try the "Lesson 5: BBCode Drawing Basics lvl.II, Exercise: Selected ASCII characters for our BBCode image: ░ and █" and im happy to follow and do what it says, but one thing i cant understand, itry to create 2 rectangle but its never seperate, what ever i do the second rectangle always show below the first one. i think i miss something in this tutorial, maybe i should go and read again from the top. :D Hello, It seems you have a problem with table columns. An example of: "How to draw a thing next to another thing :) " Quote
Code: [table] Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: ridertiger on July 10, 2018, 02:04:40 PM Excellent post, thank you. Also, if you are doing translation, you can simply get the "quote" for the original ANN thread, and translate the words in that. THis way, you do not have to deal with BB code when translating.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on July 10, 2018, 02:38:09 PM Excellent post, thank you. Also, if you are doing translation, you can simply get the "quote" for the original ANN thread, and translate the words in that. THis way, you do not have to deal with BB code when translating. ? translation? I'm the author. What do you mean? Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: iamMhew on July 12, 2018, 04:02:01 AM i wish to learn this stuff quickly, lol . i try the "Lesson 5: BBCode Drawing Basics lvl.II, Exercise: Selected ASCII characters for our BBCode image: ░ and █" and im happy to follow and do what it says, but one thing i cant understand, itry to create 2 rectangle but its never seperate, what ever i do the second rectangle always show below the first one. i think i miss something in this tutorial, maybe i should go and read again from the top. :D Hello, It seems you have a problem with table columns. An example of: "How to draw a thing next to another thing :) " Quote
Code: [table] Best wishes. oh, its really breaks my head into two, but i want to learn so i will continue learning, by the way this is my first work (https://imgur.com/a/btioLbB). sorry for this lol and what is the meaning of TD and TR? i saw it on the code. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: reda on August 17, 2018, 05:26:48 AM ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: apoorvlathey on August 17, 2018, 01:18:49 PM Excellent post, thank you. Also, if you are doing translation, you can simply get the "quote" for the original ANN thread, and translate the words in that. THis way, you do not have to deal with BB code when translating. ? translation? I'm the author. What do you mean? Best wishes. He was pointing out the little trick for ANN thread translators that they can use the quote feature to get the BBCode of the original post and then translate the content, without the need of caring out the bbcode's formatting. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: riyarana1123 on August 17, 2018, 04:12:10 PM I always wish that there should be a any kind of lessons and tutorials so that we all investors who belong from a country where very few people know about bitcoin forum and use it as a medium to earn money can easily learn some skills and knowledge from those who have better knowledge in this filed and also having a great rank.And you make my wish come true thank u so much for this favor that you done for all of the investors of bitcoin forum.The lessons on BBCode and tutorial videos help all of us very much when we watch it and learn all the things from that videos and keep them in use while working on BBCode.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on August 18, 2018, 03:55:52 PM I always wish that there should be a any kind of lessons and tutorials so that we all investors who belong from a country where very few people know about bitcoin forum and use it as a medium to earn money can easily learn some skills and knowledge from those who have better knowledge in this filed and also having a great rank.And you make my wish come true thank u so much for this favor that you done for all of the investors of bitcoin forum.The lessons on BBCode and tutorial videos help all of us very much when we watch it and learn all the things from that videos and keep them in use while working on BBCode. Hey, making your wish come true is a part of my existence ;-) Thanks, it means a lot. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: finaleshot2016 on August 31, 2018, 03:30:12 AM Is there any other way to select multiple ASCII characters to change colors? https://i.imgur.com/Ax6aG48.png Now, i don't know what is the specific colors of each ASCII characters After that post, I studied and look more informations about the BBcodes. Also, I created a topic about "how to make signatures using BB codes" and here's the link: https://bitcointalk.org/index.php?topic=4495717.0 I would like to Thank @roslinpl for sharing his/her ideas. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on September 04, 2018, 12:19:53 AM wtf?
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: k0er on September 04, 2018, 02:40:01 AM ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ ██████████████████████████████ Code: [center][color=#ffffff]██████████████████████████████ 8600 symbols ;D wtf? :D :D I think he used autoconverter ASCII something like that... Code: [size=2pt][font=monospace][color=#808080] [/color][color=#797979],[/color][color=#757575],[/color][color=#737373]╓╖╖╓,,[/color] ,,╓╖╖╓,, ,▄██████████████▄w ,▄█████████████████████╖ ▓████▀▐▀██████████████████µ ,φ██████▒▒▒▒▒▒▒╬@▓▓███████████▌ ,▓▀████████▓▒▒▒▒▒▒▒▒▒▒▄▀▀████████▌ ,█ ▓████████▓▓▒▄▄█▒█████▄▓▓████████ ██ ██████████████▓█████████████████▄ ▐██████████████████████████████████▓█╕ `████████████████████████████████▓]▓▌ ▓█████████████████████████████,╢╩ `▓██████████████████████████▀░┴ ╚▓████████████████████▀▒╜ "▀▓██████████████▓▓╜ `╨▀▀████▀▀▐" Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Avirunes on September 10, 2018, 09:08:40 AM Just want to add up another tool to quickly get colour shades and this one is much more easy tool and slightly advanced then the one I previously used to work with: https://codepen.io/jasesmith/pen/rZmKQG
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: bananaunana on September 13, 2018, 10:00:51 PM Thanks, your post is very helpful and detailed for newcomers in Bitcointalk who want to spend a little effort to new comments and make them more pleasure to read. ;)
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: sell100 on October 07, 2018, 02:43:05 AM OP, I have a question here. What's the differences between BBCode and Markdown? Is BBCode easier than Markdown or vice versa? HI,Your signature design is very good. Can you give me a signature code?Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: sell100 on October 07, 2018, 02:55:04 AM Excellent post, thank you. Also, if you are doing translation, you can simply get the "quote" for the original ANN thread, and translate the words in that. THis way, you do not have to deal with BB code when translating. Hello, your signature design is very beautiful, can you tell me what design, or send me a signature code. OK?Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: cryptoperkele on October 08, 2018, 01:05:34 PM This is exactly what i was looking for. I've been trying to figure this out by myself by sending messages to myself with bbcode. If i had any merit i would give it to you because this is so cool what you're doing! Thank you very much.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on October 08, 2018, 11:01:01 PM Thanks, your post is very helpful and detailed for newcomers in Bitcointalk who want to spend a little effort to new comments and make them more pleasure to read. ;) This is exactly what i was looking for. I've been trying to figure this out by myself by sending messages to myself with bbcode. If i had any merit i would give it to you because this is so cool what you're doing! Thank you very much. For me, your words mean more than merit points :) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Jatawneh on October 16, 2018, 10:30:30 AM thank you for this topic
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on October 19, 2018, 12:32:41 PM I'm sorry but this is not 'Fix my code' thread.
Follow the tutorials, you'll understand your mistakes. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Jatawneh on October 19, 2018, 12:47:11 PM I'm sorry but this is not 'Fix my code' thread. Follow the tutorials, you'll understand your mistakes. Best wishes. thank you bro Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Jatawneh on October 19, 2018, 01:33:40 PM can you advice what area should i look at
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on October 19, 2018, 02:18:20 PM can you advice what area should i look at Hello, thanks for removing your post. 1) Your code was full of links (spam) 2) It seems you have a 'table glitch' issue - https://bitcointalk.org/index.php?topic=1727100.msg17336272#msg17336272 "Tips & Tricks (2): How to avoid table bug/glitch" It occurs on text, images, everything. :) Solution: 1) Use the method explained in "Tips & Tricks (2): How to avoid table bug/glitch" 2) Avoid using tables for the thread design. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Jatawneh on October 22, 2018, 11:13:44 PM thank you for your help
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Ratio2112 on November 27, 2018, 12:41:36 AM Really helpful, seeing a good looking drawing appear after drawing it is satisfying! Thanks a lot!
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Ratio2112 on November 27, 2018, 12:55:43 AM I found this tool that can help those with almost no ability in drawing: https://manytools.org/hacker-tools/convert-image-to-ansi-art/go
Just upload a picture in the ANSI art converter and you will have a semblance of your picture.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on November 27, 2018, 01:37:30 AM I found this tool that can help those with almost no ability in drawing: https://manytools.org/hacker-tools/convert-image-to-ansi-art/go Just upload a picture in the ANSI art converter and you will have a semblance of your picture. Thanks. However, the problem with those tools is explained here: https://bitcointalk.org/index.php?topic=2198076.msg22105956#msg22105956 (https://bitcointalk.org/index.php?topic=2198076.msg22105956#msg22105956) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Umcka on January 12, 2019, 08:57:04 AM Great topic! Roslinpl you have flexible sign with autoresize. Could you please clarify what tag should be used for such behavior? Thank you for further reply.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on January 12, 2019, 04:50:20 PM Great topic! Roslinpl you have flexible sign with autoresize. Could you please clarify what tag should be used for such behavior? Thank you for further reply. Hello, thanks, I don't use any special tags for my signature. I just made the design width compatible for mobile devices. :) Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: typhucoin2 on February 22, 2019, 02:36:11 PM 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.
Lesson 1: Forum's signature styling rules
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] Preview:
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] After design is ready remove 'quote' tags and your BBCode signature code is ready :) Do you want more lessons? :) Hi admin. Why my account can not join signature campaign? I can not edit text at signature position. Please guiding me Here is my profile: https://bitcointalk.org/index.php?action=profile;u=2359472 Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Avirunes on February 22, 2019, 03:45:55 PM Hi admin. Why my account can not join signature campaign? I can not edit text at signature position. Please guiding me Here is my profile: https://bitcointalk.org/index.php?action=profile;u=2359472 There is a signature limitation present. Also nowadays signature campaigns don't allow newbie's rank. You should be either Member or higher. I think you are new to the forum. I suggest you to go through some meta stickies and know how the ranking system works. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Carrelmae10 on April 01, 2019, 03:53:04 AM Hi admin. Why my account can not join signature campaign? I can not edit text at signature position. Please guiding me Here is my profile: https://bitcointalk.org/index.php?action=profile;u=2359472 ..you cannot join signature campaign atleast you have rank jr. member with 1 merit..you'll need to post high quality post inorder to gain merits..most signature campaigns don't allow newbies..you'll need to work hard to gain more merits..just read this forum rule https://bitcointalk.org/index.php?topic=2818350.0 Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on April 16, 2019, 02:25:43 PM Hello,
I received a few similar questions, so I answer collectively. If someone wants to translate this thread into other languages, please do it, I agree to this. My requirements: In translation thread please include the link to the original thread (https://bitcointalk.org/index.php?topic=1727100.0) and attribute the author (roslinpl). Thank you. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: |Admiral| on April 20, 2019, 10:49:14 AM I have tried to learn bbcode everything is working find but cant create image. Still trying to know how to create image on bbcode.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: BlackMambaPH on April 20, 2019, 11:06:54 AM I have tried to learn bbcode everything is working find but cant create image. Still trying to know how to create image on bbcode. This website helps me a lot when I'm creating an ASCII art for my signature design - https://asciiart.club/ . Just upload an image you want to create to and change the size to custom 45x45 or 40x40 size. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: cryptovigi on April 25, 2019, 06:58:57 AM Hello, I received a few similar questions, so I answer collectively. If someone wants to translate this thread into other languages, please do it, I agree to this. My requirements: In translation thread please include the link to the original thread (https://bitcointalk.org/index.php?topic=1727100.0) and attribute the author (roslinpl). Thank you. Thanks for your permission to translate the thread your work will reach more forum users. I have translated all lessons into Polish. Link to my thread: [TUTORIAL] LEKCJE BBCode (tworzenie sygnatur) (https://bitcointalk.org/index.php?topic=5132662.0) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on April 25, 2019, 11:44:03 AM Hello, I received a few similar questions, so I answer collectively. If someone wants to translate this thread into other languages, please do it, I agree to this. My requirements: In translation thread please include the link to the original thread (https://bitcointalk.org/index.php?topic=1727100.0) and attribute the author (roslinpl). Thank you. Thanks for your permission to translate the thread your work will reach more forum users. I have translated all lessons into Polish. Link to my thread: [TUTORIAL] LEKCJE BBCode (tworzenie sygnatur) (https://bitcointalk.org/index.php?topic=5132662.0) Great :) This thread has already been translated into at least two languages, it seems to me that someone once translated it also into Russian, but I can't find it... Found it :) Russian translation: https://bitcointalk.org/index.php?topic=2991003.0 Polish translation: https://bitcointalk.org/index.php?topic=5132662.0 The 3rd one (Hindi Translation) seems deleted. Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on April 26, 2019, 02:41:32 PM Hello,
forum user Meowth05 did another translation of this thread in the Local> Pilipinas section. https://bitcointalk.org/index.php?topic=5136214.0 The moderators removed his topic once, hence my request to forum moderators to set the same rules for local sections, other translations have not been removed, I request to keep the same rules for the various local sections. Thank you. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: merchantofzeny on May 24, 2019, 06:19:49 PM I'm inching like a worm through this tutorial. So far I've tried making a 4x4 square using block. I tried setting the size to both 2pt and 2px but they still seem to look the same.
Also BTW thanks for posting this. Been wanting to try this for a long time and read this thread before. Finally able to muster enough willpower to get started. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Avirunes on May 24, 2019, 06:59:47 PM I tried setting the size to both 2pt and 2px but they still seem to look the same. Well it will look same to you since you are just trying basic. The only difference you will see is the size but let me tell you that there is more to it. "pt" is actually cool to go with if you are trying to make something basic figure like take this for example ░███████████████████████████████████░ ███████░░░░░░░██████████░░░████░░░███ ███████░█████░█████████░███░██░███░██ ███████░█████░█████████░███░██░███░██ ██░░░░░░█████░░░░░░█████░░░████░░░███ ██░███████████████░██████████████████ ██░███████████████░██████████████████ ██░███████████████░██████████████████ ██░░░░░░█████░░░░░░██████████████████ ███████░█████░███████████████████████ ███████░█████░███████████████████████ ███████░░░░░░░██████████████████████ Basic and easily made using "pt" "px" basically is smaller in comparison to "pt" and so it helps you to make much more complicated figures accurately but this usually takes time (if you are not using some sort of generators) and in addition to that takes up too much characters. So eventually it leaves you with less characters for making the rest of the signature design. Below is the Icon of Ecomi.com which was used in their signature campaign. Source (https://pastebin.com/TMEk1PRE)
Above^^ was designed using "px". Accurate and fits into the signature space as well. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: big_daddy on May 28, 2019, 06:23:55 AM Hello!
Thank You for this great thread tutorial, I will try to follow all the lessons and learn how to make a custom signature Is here anyone from this topic selling custom signature codes? cause I need one Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on May 28, 2019, 12:12:45 PM Hello! Thank You for this great thread tutorial, I will try to follow all the lessons and learn how to make a custom signature Is here anyone from this topic selling custom signature codes? cause I need one Thank you big_daddy :) (I'm selling). Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: sr32703 on May 28, 2019, 05:45:47 PM Thanks a lot from my heart. I have learned signature designing from you.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: merchantofzeny on May 28, 2019, 09:07:18 PM I tried setting the size to both 2pt and 2px but they still seem to look the same. Well it will look same to you since you are just trying basic. The only difference you will see is the size but let me tell you that there is more to it. "pt" is actually cool to go with if you are trying to make something basic figure like take this for example ░███████████████████████████████████░ ███████░░░░░░░██████████░░░████░░░███ ███████░█████░█████████░███░██░███░██ ███████░█████░█████████░███░██░███░██ ██░░░░░░█████░░░░░░█████░░░████░░░███ ██░███████████████░██████████████████ ██░███████████████░██████████████████ ██░███████████████░██████████████████ ██░░░░░░█████░░░░░░██████████████████ ███████░█████░███████████████████████ ███████░█████░███████████████████████ ███████░░░░░░░██████████████████████ Basic and easily made using "pt" "px" basically is smaller in comparison to "pt" and so it helps you to make much more complicated figures accurately but this usually takes time (if you are not using some sort of generators) and in addition to that takes up too much characters. So eventually it leaves you with less characters for making the rest of the signature design. Below is the Icon of Ecomi.com which was used in their signature campaign. Source (https://pastebin.com/TMEk1PRE)
Above^^ was designed using "px". Accurate and fits into the signature space as well. Thanks for the tips. That last sig looks pretty complicated. Don't know how many hours I'd need to learn to make that. Seems the spacing also really matters. I installed Note++ and tried to separate stuff to make it easier to find unpaired tags but the results are different than when it's just a jumbled mess, LOL. Also noticed these dots I have for sigs looked different now that I opened the forum in Edge instead of Chrome. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: merchantofzeny on June 02, 2019, 06:52:33 PM Do you guys like use any tools for designing the sigs? I'm just starting with blocks and I'll try them in Notepad or Note++ and when they get to the forum they'd be all jumbled.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on June 03, 2019, 02:05:44 PM Why not to try your ASCII blocks in here, by previewing your post? For me it works the best.
Thanks a lot from my heart. I have learned signature designing from you. You are welcome. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: merchantofzeny on June 04, 2019, 07:33:00 PM Why not to try your ASCII blocks in here, by previewing your post? For me it works the best. Do you design your blocks just straight in the reply box or do you at least use notepad? No matter what I do they just look broken. I made a grid of 0s in note++, tested this M design there, replaced the 0 with spaces and then placed it here. Looks like cat vomit. Pasted it in notepad and it looks kinda different. I bet that would also be the case had it been made first in note pad instead. Every time I'm in the forum it's the only thing I've been doing. Paste, update, refresh. ;D Looks like I just can't get this right. Kudos to your design skills, this thing ain't easy and that's just the blocks, no codes yet. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: darklus123 on June 05, 2019, 06:55:04 AM Why not to try your ASCII blocks in here, by previewing your post? For me it works the best. Do you design your blocks just straight in the reply box or do you at least use notepad? No matter what I do they just look broken. I made a grid of 0s in note++, tested this M design there, replaced the 0 with spaces and then placed it here. Looks like cat vomit. Pasted it in notepad and it looks kinda different. I bet that would also be the case had it been made first in note pad instead. Every time I'm in the forum it's the only thing I've been doing. Paste, update, refresh. ;D Looks like I just can't get this right. Kudos to your design skills, this thing ain't easy and that's just the blocks, no codes yet. As per Op you have to insert it into a quote and actually op have provided a template for the signature designs. And as per op mate using ASICS images is just the best thing to use for your signature designs as they will look good in the newest browser and you can also always hit the preview button to check if it is already looking what you've wanted Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on June 05, 2019, 10:19:52 AM Why not to try your ASCII blocks in here, by previewing your post? For me it works the best. Do you design your blocks just straight in the reply box or do you at least use notepad? No matter what I do they just look broken. I made a grid of 0s in note++, tested this M design there, replaced the 0 with spaces and then placed it here. Looks like cat vomit. Pasted it in notepad and it looks kinda different. I bet that would also be the case had it been made first in note pad instead. Every time I'm in the forum it's the only thing I've been doing. Paste, update, refresh. ;D Looks like I just can't get this right. Kudos to your design skills, this thing ain't easy and that's just the blocks, no codes yet. As per Op you have to insert it into a quote and actually op have provided a template for the signature designs. And as per op mate using ASICS images is just the best thing to use for your signature designs as they will look good in the newest browser and you can also always hit the preview button to check if it is already looking what you've wanted Indeed :) I design straight in the reply box. Nowadays I draw with 2px monospace ASCII characters, so basically my starting template looks like: Quote from: roslinpl BBCode signature starter pack ▀ ▄ █▌ ▐░ Quote
Code: ▀ ▄ █▌ ▐░ Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: merchantofzeny on June 11, 2019, 05:21:05 PM Best wishes. I still get confused a bit but I think I'm starting to get the hang of this. Thanks roslinpl, darklus123, all of you guys. :) Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: roslinpl on June 12, 2019, 12:17:04 PM Best wishes. I still get confused a bit but I think I'm starting to get the hang of this. Thanks roslinpl, darklus123, all of you guys. :)
Best wishes. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: finaleshot2016 on June 12, 2019, 07:21:44 PM Through this tutorial, I made my own tribute signature (https://bitcointalk.org/index.php?topic=5153247.0) for celebrating our Independence Day here in Philippines. I also made own version of tutorial about BBcodes (https://bitcointalk.org/index.php?topic=4495717.0) because of this masterpiece. Thanks @roslinpl! I'm still looking forward to tutorial about the logo, I don't have enough skill to create it manually, any suggestions? Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CHRISBIN702 on December 17, 2019, 06:24:47 AM Did something change with the sigs? I notice a lot of warped sigs that used to look pretty cool.
Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: Fivestar4everMVP on September 22, 2020, 03:09:19 PM This is a very good thread to learn to design signatures which is some skill I've always liked and wondered how it's done, good work op, hope you update the thread again soon
Title: Re: [LEARN] BBCode: Can I has^Hve backspace, please? Post by: nullius on November 12, 2020, 05:37:39 AM Does anyone know any trick for backspacing, or otherwise superimposing text on text? A reliable BBcode trick would be good; but ultimately, that relies on the underlying capabilities of HTML without CSS styling tricks. A Unicode trick would work, if it actually works.
As a Unix terminal lover, I am sad^H^H^Hsomehow unsurprised that this old-fashioned ASCII tty trick doesn’t work (colours are off; it is only an example): Code: (/bin/sh) echo $'[tt][color=green]0[/color]\u0008[color=orange]\u221e[/color][/tt]' >> infsig.txt Result: Quote 0∞ The forum actually seems to emit a U+0008 back to me; but the effect is not displayed in my browser. I guess that this is an HTML issue, not a forum or BBcode issue. The WHATWG HTML5 standard categorizes U+0008 as a C0 control (https://infra.spec.whatwg.org/#c0-control) that it is does not deem to be ASCII whitespace (https://infra.spec.whatwg.org/#ascii-whitespace); but I cannot so easily find the exact specification of HTML5 C0 control handling in (I guess here) HTML mode. The W3 has a table which says (https://www.w3.org/html/wg/wiki/index.php?title=SerializationDependentProcessingDifferences&oldid=1006#Document_character_set) that C0 controls U+0001 – U+0008 are allowed in HTML5 text/html, “not allowed in any way” in XML 1.0, and “allowed only as a character reference” in XML 1.1. Anyway, browser behaviour is what matters here; and if it doesn’t work in my browser, it will probably break in others’ browsers. Thanks in advance for any tips for my quest to build a simple, aesthetically pleasing new signature. Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CrayjeksAjek on May 01, 2021, 11:20:01 PM I cant figure out how to turn my banner into a sig. Any help?
<a href="https://www.publish0x.com?a=M7e5991Be2"><img src="https://cdn.publish0x.com/prod/fs/images/567f7790740b342a477ffe057970369e6052c20e5511073fca76db62250d164a.gif" width="468" height="60" /></a> Title: Re: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Post by: CrayjeksAjek on May 01, 2021, 11:39:51 PM I cant figure out how to turn my banner into a sig. Any help? <a href="https://www.publish0x.com?a=M7e5991Be2"><img src="https://cdn.publish0x.com/prod/fs/images/567f7790740b342a477ffe057970369e6052c20e5511073fca76db62250d164a.gif" width="468" height="60" /></a> Best I can get to is the following code but nothing shows up still Code: [url=https://www.publish0x.com?a=M7e5991Be2][img]https://cdn.publish0x.com/prod/fs/images/299b641f2c2884c3034bf76a3a9d7ff7439d1da8fc7abb877bd1f5b3fe957edb.png[/img][/url] |
