Scratch

Some months ago, I saw a BBCode guide that someone wrote. It was great, and I learned a lot from it - but it didn't have everything, and it was rather messy. So I decided to make my own topic that had everything (even more than the official BBCode help page  ) and was easy to read.

Thanks to coolstuff and Wolfie1996, I can write the BBCode instructions exactly as they are, without having to put them in quote boxes. So - the instructions you see are exact, and not modified! 


First, two things to remember:

1. The BBCode instructions always are in brackets (if you don't know, brackets are these things: [ and ]).

2. The first instruction is written normally, but the second has a slash (this slash: / ) before the instructions.

For example, BBCode tags work like [example]Affected text goes here[/example]
______________________________________________________________________________________________________

Contents
BBCode Instructions
Bold, italic, and underline
Color text
Quote boxes
Code boxes
Smileys
Links
E-mails (you can ignore this)
Pictures
Invisible text
Extras
Questions about BBCode
Tips
And the super-fast way to learn BBCode (without all of the nice notes and things)
______________________________________________________________________________________________________

Bold, italic, and underline

The simplest BBCode - yet these three effects can strength your posts and emphasize certain parts (without using capital letters - they look messy  ).

The BBCode for these three is very easy. 

Bold: [b]Text goes here[/b]
Italics: [i]Text goes here[/i]
Underline: [u]Text goes here[/u]
As an example: "[i]This is some text[/i]" would appear as "This is some text". Simple, isn't it?


Color text

Colors are fun!    Use the color black to emphasize font more gently than bold, and use green and red for different meanings. Of course, it's all up to you. 

There are two ways to do color text. The first way:
[color=(whatever color you want)]Text goes here[/color]
For example, "[color=red]Red text[/color]" shows up as "Red text".

There are limited colors that you can use - but there are plenty of choices. For a complete list, go here. Use the name of the color, not the hexidecimal.

The second way is to use a hexadecimal instead of a color name.
[color=#(whatever hexadecimal you want)]Text goes here[/color]
"[color=#ff0000]Red text[/color]" shows up as "Red text".

Make sure you add that hash!

Something to make clear here: The ending BBCode tag is always [/color]; it does not change for each color.

Hexadecimals cover more than the colors in the above list - every color you see on your computer screen is a hexadecimal!

You can use the above list for finding the hexadecimals of certain colors - oh, too lazy to scroll up and find the link? Here. 


Quotes boxes

You know the button than lets you quote someone, right? It adds quote tags to the text. It's still BBCode though - and you should know how to do a quote without using the quote button!    And if you know how, you can easily create quote tags around something that doesn't have the quote button. Anyway, back to it...

[quote=(the name of the user you're quoting)]The text you're quoting[/quote]

If I were quoting myself, I'd write it like this:

[quote=Jonathanpb]MEH MEH MEH[/quote]

A few tips here:
1. If you don't input a name, you'll get a quote with no author.

wrote:

See? 

2. If you don't input a name and don't input the equals sign, you'll get a nice textbox. This is great for plenty of purposes.

The textbox!        

3. If you use the box in number 2 and use bold text, you can create quote boxes with different text than "___ wrote:". As an example:

[quote][b]Here is some text:[/b]

Text text text[/quote]

Would appear as this:

Here is some text:

Text text text

Looks sort of like the quote boxes, doesn't it? 


Code boxes

If you want to write some code, you can use code boxes. But since BBCode doesn't work in code boxes, I use them for demonstrating BBCode - well, I did, until I saw the trick that Wolfie used and copied her. 

[code]Write your code here[/code]

What the code boxes look like:

And this is what the text inside them look like. [b]BBCode doesn't work in here![/b] :P

Smileys

Yes, the nice smileys are BBCode!        

The smileys:














And how to do them:

:) or =)
:| or =|
:( or =(
:D or =D
:o or :O
;)
:/
:P
:lol:
:mad:
:rolleyes:
:cool:


Links

That link will take you to the Scratch Forums index, if you're wondering. Go on, click it (and lose this page)! 

If you want to post a simple link, just do this:

[url]http://scratch.mit.edu/forums/index.php[/url]

It works - but it looks rather ugly, doesn't it? If you want it to look nice, you can do this:

[url=http://scratch.mit.edu/forums/index.php]Scratch Forums Index[/url]

It will look like this: Scratch Forums Index. Let's break it down a bit:

[url=(web address goes here)]Name you want goes here[/url]

Of course, you can choose whatever name you want for your link. Just type the name you want into the section between the brackets. You can use smileys and get a smiley link. And color, bold, italic, and underline work as well.


E-mails

To be honest, this is completely unnecessary; sharing your e-mail on Scratch is not allowed. But this guide should be complete - so here it is!    But don't ever share your e-mail on Scratch - act like you never read this bit. 

E-mail BBCode works the same as link BBCode:

[email](e-mail address goes here)[/email]

[email=(e-mail address goes here)](name goes here)[/email]


Pictures

Pictures are awesome! 

[img](web address of picture goes here)[/img]

Here's an example:



My icon!

Make sure you use the web address that only has the picture, not a web page that happens to have a picture.

It's not just still pictures, actually - animated pictures (.gif files) work too! 

If you've created a picture and want to show it in a post, you'll have to upload it to an image-sharing website. Imageshack is a good one - you don't have to register, and you still get to upload pictures and use them! 

And a last note: You can combine the image and url BBCode to create clickable images:

[url=(web address)][img](image address)[/img][/url]

An example:






These you don't have to type! You can select different blocks from the block area below the spot where you type your post. Go on, try it!

Don't forget the [blocks] and [/blocks] tags - almost everyone forgets them! When you leave them out, text goes bold and spaced out, the distance between lines gets bigger, and text becomes true black. I'll demonstrate:

<move(  )steps>

And see how the text is?
It's all ugly. 
WAHHH[blocks][/blocks]


Invisible Text   <-- Highlight 

This isn't exactly new BBCode; it's just color text. To see how to do color text, see its section (sort of high up in the post).

The easy way (that isn't the exact color):
For normal posts, use the color Gainsboro. Highlight the following: Invisible Text
For quotes boxes, use the color LavenderBlush. Highlight the textbox:

Invisible Text

The hard way (that is exact):
For normal posts, use the hexidecimal #dedfdf. See how it's the exact color: Invisible Text
For quote boxes, use the hexidecimal #f1f1f1. See how it's the exact color (highlight the text box):

Invisible Text

There's another way to do invisible text - and it'll stay transparent no matter if it's in a quote box or not!

[color=transparent]Text goes here[/color]

But there's one problem with it - it doesn't work on Internet Explorer! If you view it on that browser, it'll show up as black color text.

Someone wrote:

Nice work, [user]!

That was such a lousy job you did - you're horrible at it!

(Highlight the invisible text in the (fake  ) quote.) That's how it looks in other browsers. But on Internet Explorer:

Someone wrote:

Nice work, [user]!

That was such a lousy job you did - you're horrible at it!

And then the insulted user comes along using Internet Explorer, sees the message, you get caught, and it all goes crazy. So I wouldn't use it if I were you - some people will probably see your hidden message. 
______________________________________________________________________________________________________

Tips:

  • You can nest BBCode! For example, [b][i][u]Text[/u][/i][/b] will create Text.

  • For extreme bold, use bold and the color black. [b][color=black]Extreme bold[/color][/b] gives Extreme bold

  • You can use color text in links: [url=http://scratch.mit.edu][color=red]Scratch[/color][/url] gives Scratch
     If you want the underline to change color too, add the underline BBCode: [url=http://scratch.mit.edu][color=red][u]Scratch[/u][/color][/url] gives Scratch

  •

Here is some text:

Text text text

You see how it's the quote box, but with something else instead of the "___ wrote:"? To do that, you use bold for the text at the top, then use some Enters and write your text.

  • With italics you can do this: Last edited by Jonathanpb (Today 12:35:47)
It's fake, but it looks real. Of course, if you edit your post and don't get rid of the fake edit, you'll end up with two edits (one fake and one real)! A warning - don't go around putting fake moderator edits in your posts; it confuses people. 

  • BBCode doesn't have to be given in code boxes! If you put BBCode tags inside BBCode tags, the outer tags won't work. For example, [b[i][/i]]Text[/b] produces [b]Text[/b].

Questions about BBCode

If you have a question, just post and ask.

  • Can you nest BBCode? Yes. Instructions are above in the Tips section.
  • How many colors are there for color text? 143 for the color text with color names, and practically unlimited for the color text with hexadecimals.


The super-fast way to learn BBCode (without all of the notes and stuff)

If you're in a rush, here's a quick guide. It does not have all of the notes and extras. It is seriously recommended that you read the above instructions. This is only for a quick guide.

Bold text: [b]Text goes here[/b]
Italic text: [i]Text goes here[/i]
Underline text: [u]Text goes here[/u]
Color text (name of color): [color=(color name goes here)]Text goes here[/color]
Color text (hexadecimal color): [color=#(hexadecimal goes here)]Text goes here[/color]
Quote boxes: [quote=(name goes here)]Quoted text goes here[/quote]
Code boxes: [code]Code goes here[/code]
Smileys:  :) :| :( :O  ;) :/ :P :lol: :mad :rolleyes: :cool:
Normal web link: [url](web link goes here)[/url]
Custom names for web link: [url=(web link goes here)](custom name goes here)[/url]
Picture: [img](web address with picture goes here)[/img]
Scratch blocks: See the buttons below the posting area
Invisible text (easy but not exact): Color text with Gainsboro for normal posts and LavenderBlush for quote boxes
Invisible text (harder but exact): Color text with hexadecimals #dedfdf for normal posts and #f1f1f1 for quote boxes
Transparent: [color=transparent]Text goes here[/color]

Quick and easy - but read the above instructions sometime, it's worth it.
______________________________________________________________________________________________________


Enjoy your BBCode!
Jonathanpb

Last edited by Jonathanpb (2010-12-30 03:08:35)