Jump to content
  • 0

BBCode 101 for New Members

Flash Flyer - Sakura


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



(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



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



[b]Content here[/b]

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

[b]This is a test[/b]

This is a test


[i]Content here[/i]

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

[i]This is a test[/i]

This is a test


[u]Content here[/u]

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

[u]This is a test[/u]

This is a test


[s]Content here[/s]

You can also highlight the text, then hit Ctrl + S. 

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

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

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.


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


From Wikia
(using earlier Sapphy link)




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. 


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]

Using a string of text to redirect.



Using an image to redirect.


(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]. 
(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. 

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

I want to type in blue text.




[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. 

[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:




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


[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.


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 2)]
content goes here

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=Member cards]

[spoiler=Member cards]





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




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



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





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


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

  • Create New...