Jump to content
  • 0

BBCode 101 for New Members


Flash Flyer - Sakura

Question

This guide covers the BBCode that is required to do common functions on YCM (and other sites).
Specialized code for this site will not be covered at this time, and may be added later.
 
I will be leaving the required input in a code [along with any keyboard commands that can be used after highlighting content], and then give a sample of what you should get from them. 
 
(You may also access these commands in the toolbar above the text box.)
 
=====

 

TABLE OF CONTENTS 

(Ctrl + F for quicker access)

  1. Bold
  2. Italics
  3. Underline
  4. Strikethrough
  5. Images
  6. URL
  7. Text color
  8. Quoting
  9. Text Alignment
  10. Font Size
  11. Spoiler tags
  12. Code boxes
  13. Acronym

=====

EDIT LOG

  • 8/28/2017: Added #1 - 13

=====

 
Bold
 

[b]Content here[/b]

You can also highlight the text, then hit Ctrl + B.
Hit the [ B ] button in the toolbar. 
 
[spoiler=Example]
 

[b]This is a test[/b]

This is a test


 
Italic
 

[i]Content here[/i]

You can also highlight the text, then hit Ctrl + I. 
Hit the [ I ] button in the toolbar. 
 
[spoiler=Example]
 

[i]This is a test[/i]

This is a test
 


 
Underline
 

[u]Content here[/u]

You can also highlight the text, then hit Ctrl + U. 
Hit the [ U ] button in the toolbar. 
 
[spoiler=Example]
 

[u]This is a test[/u]

 
This is a test


 
Strikethough
 

[s]Content here[/s]

You can also highlight the text, then hit Ctrl + S. 
 
[spoiler=Example]
 

[s]Use this for stuff you aren't supposed to read.[/s] 

Use this for stuff you aren't supposed to read.


 
Images
 
This is the one that will be used often, so please memorize this one.
 

[img=URL of image]

Make sure that your URL ends with a image extension like .jpg, .png or .gif.
If you are posting images from Wikia, remove anything after the file extension.
 
You can also use the picture button.
 

https://vignette2.wikia.nocookie.net/yugioh/images/0/0b/SaffiraQueenofDragons-DUEA-JP-UR.png/revision/latest?cb=20140418142721

(Saffira's DUEA print in Japan.)
 
If you want to post this, remove anything after the .png part before placing the link inside tag.
 
[spoiler=Example]
 
Standard posting
 

[img=http://i.imgur.com/JAYSUMQ.gif]

 
JAYSUMQ.gif
 
From Wikia
 
(using earlier Sapphy link)
 

[img=https://vignette2.wikia.nocookie.net/yugioh/images/0/0b/SaffiraQueenofDragons-DUEA-JP-UR.png]

SaffiraQueenofDragons-DUEA-JP-UR.png

 

NOTE: YCM will auto-render the coding to (img=URL) after you refresh the page and all. I am using parentheses here, because brackets will trigger the BBCode. 

 


 
URLs
 
You can just copy/paste the URL of your choice into the post, and it will automatically render once the page is refreshed. 
 
However, if you wish to have a string or even an image link to a URL of choice, then do this:
 

[url=(link here)]Text or image here[/url]

[spoiler=Example]
 
Using a string of text to redirect.

[url=https://bulbapedia.bulbagarden.net/wiki/Latias_(Pok%C3%A9mon)]Latias-chan[/url] 

Latias-chan
 

Using an image to redirect.
 

[url=http://forum.yugiohcardmaker.net/topic/183792-★-club-espeon-we-have-mastery-over-shooting-star-dragon★/][img=http://i.imgur.com/3kUiuDk.png][/url]

3kUiuDk.png
 
(If you click on the picture, it should redirect you to the linked thread. Yes, I am using Club Espeon's banner because of reasons.)


 
Text color
 

[color=(color name)] Content here [/color] 

[b]OR [/b]

[color=#hexcode] Content here [/color]

Use the first option only for specific color names (like blue, red, black, orange, etc.).
Second option is used for more specific tones and hues [for example, #ffd700 if you want gold-colored text]. 
 
http://htmlcolorcodes.com/http://htmlcolorcodes.com/color-names/
(Use these to find colors you want)
 
You may also click on the color palette between the size box and emotes/smiley box for predetermined choices. Make sure you highlight the text first. 
 
[spoiler=Example]
 

[color=#0000ff]I want to type in blue text.[/color]

 
I want to type in blue text.


 
Quoting
 

[quote]content[/quote]

OR

[quote name="(something)"]content[/quote]

Use the first one to generate a generic quote bubble to put stuff in. (You can also click the "quote" button to generate the bubble yourself.)
 
The second one is if you wish to have it read "(x) said", but that will require you to switch to BBCode mode when typing and do the above. 
 
[spoiler=Example]

[quote]Hi, and welcome to YCM, (member).[/quote]

Hi, and welcome to YCM, (member).

 


 
Text Alignment
 
By default, all text on this site is left-aligned; however if you want to center stuff or right-align, use these:
 

[center]text[/center]

OR

[right]text[/center]

You can also do this yourself by clicking the alignment buttons at the far right of the lower toolbox.
 

[spoiler=Example]

[center]This is important.[/center]

This is important.

[right]You traditionally read Japanese and Arabic this way.[/right]

You traditionally read Japanese and Arabic this way.

 

 

 

Font Size
 
By now, you have noticed that I have been using larger font than others to mark sections. You can do this by highlighting the text you want, and going to the "Size" menu (it's between the font setting and color options).
 
Unless it is absolutely necessary, please try not to use size 24 or higher font for posts. (I am using size 24 to mark sections in this guide).
 
 
Spoiler Tags
 
This is one of the most common ones used, so please memorize the coding.
 

[spoiler=(name)]content[/spoiler]

 
You may also do spoiler nesting, as in placing a spoiler in another spoiler. You simply need to put the opening/coding marks around the previous spoiler, like this...
 

[spoiler=(name)]
[spoiler=(name 2)]
content goes here
[/spoiler]
[/spoiler]

You don't need to put the spoiler tags on different lines; you may also leave them on the same line. And yes, it is possible to nest multiple spoilers.
 

[spoiler=Example]

[spoiler=Member cards]
[img=http://i.imgur.com/S52J8hX.png]
[img=http://i.imgur.com/1z7REnd.png]
[/spoiler]

[spoiler=Member cards]
S52J8hX.png
1z7REnd.png

 

 

 

 

Coding box

 

Basically, you use this if you want to type in code and not trigger the automatic BBCode stuff. If you've noticed, I have been using this one very often to show you what the commands are. (Also is useful for copy/paste forms and applications)

[code]content here[/code]

(You can just ignore the other parts when you type it in. To generate the brackets automatically, click the code button [ ] and paste whatever you need in there.)

 

Acronym

 

Does exactly what its name implies, but also can be used for other purposes. 

[acronym='meaning']text[/acronym] 

[spoiler=Example]

[acronym='ta ta for now']TTFN[/acronym] 

TTFN

 

 

 

=====
It is also possible to combine BBCode, so for instance, you may also have a bold/italicized string of text that's also colored. You just need to add on the proper coding at the start and end. 

 

Make sure that the ending code always has a slash, or else it will break. 

 

(It should also be noted that sometimes YCM has a habit of breaking code on its own if too much is used on a wider expanse of text; which is usually the color code [defaulting to standard].)

=====

 

Think that should about do it for the most part. 

If you have any questions about how stuff works that wasn't answered specifically in this guide, don't be afraid to ask. 

Link to post
Share on other sites

4 answers to this question

Recommended Posts

That, and maybe images are the main ones. Darj recommended adding the code and acronym ones as well, which I didn't do because newer members wouldn't likely use them too much. 

 

As I mentioned in the OP, I didn't put any of the specific ones that only certain areas use for stuff. I would've put in the (divider1) one, but we need to replace that URL because Photobucket sheet on hotlinking from there recently (and Aix did upload it over there). Though, that one is really simple.

Link to post
Share on other sites

Well, I did write this for member benefit since newer members usually have a hard time learning all of the tools. 

 

That being said, gotta add a few of the new ones that were implemented earlier in the year. I think that boils down to the mention, second version of spoilers (though I have to actually test this one out), the warning BBCode, etc. I'll get to it later. 

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...