Pages:
Author

Topic: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!] - page 10. (Read 42735 times)

hero member
Activity: 1162
Merit: 547
CryptoTalk.Org - Get Paid for every Post!
Nice tutorials rosinpl ! Keep them coming  Cheesy

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 :
legendary
Activity: 2212
Merit: 1199
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 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 Smiley


More lessons coming soon Smiley


Stay tuned.

Best wishes.
legendary
Activity: 2016
Merit: 1106
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 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/
newbie
Activity: 44
Merit: 0
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 '' Smiley
hero member
Activity: 798
Merit: 500
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?
I have searched for it on google but not found any tool to generate the code directly for the signature of bitcointalk.

and it is not possible to make animated things in bbcode signatures
sr. member
Activity: 1876
Merit: 295
GOD is TRUE
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?
hero member
Activity: 1246
Merit: 588
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
hero member
Activity: 1638
Merit: 756
Bobby Fischer was right
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 Smiley

@roslinpl 2bad you didn't make this thread self-moderated...
Peoples (valuable) opinions disrupt the reading (including mine) Wink
THX 4 sharing this roslin, knowledge is commodity, 1 knowledge = 1BTC and there are markets for it Smiley
legendary
Activity: 2212
Merit: 1199
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 for more info.



Best regards.
legendary
Activity: 3290
Merit: 16489
Thick-Skinned Gang Leader and Golden Feather 2021
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.


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?
legendary
Activity: 2212
Merit: 1199

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:

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

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




legendary
Activity: 2212
Merit: 1199
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.
hero member
Activity: 840
Merit: 520
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.
legendary
Activity: 2212
Merit: 1199

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 Smiley

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 Smiley

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 Smiley (almost).


Example:
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 Smiley

@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 Smiley


Best regards.

legendary
Activity: 2016
Merit: 1106
@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?
hero member
Activity: 3066
Merit: 629
Vave.com - Crypto Casino
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!
legendary
Activity: 2212
Merit: 1199

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 Smiley )

Shorthand hexadecimal form examples:

Hexadecimal.form
legendary
Activity: 1484
Merit: 1001
Crypto-News.net: News from Crypto World
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.
legendary
Activity: 2212
Merit: 1199
legendary
Activity: 2212
Merit: 1199
Pages:
Jump to:
© 2020, Bitcointalksearch.org