What Is This? - This is a mini guide (a wiki, if you will) to how BBCode works on the Osu!Forums and the Me! section on your Profile (Osu!Supporter). Simply put, BBCode is a form of pseudocode/markdown that helps to make texts look prettier/more readable. It is commonly used in many forums and Osu! is no exception. In this guide, there may be some differences to the BBCode Wiki Page, but I will try to be as accurate and detailed as possible.
------
How Does BBCode Look Like? - BBCode is fairly simple. It consists of 2 parts that function similarly to open and close brackets. For example:
[b]Hello World![/b]--> Hello World!
This text shows 3 sections: The opening of the markup, followed by the text, then finally the closing of the markup, differentiated by the presence of a front slash "/". Some tags may require more user input. For example:
[size] requires more information (the size of the text). In this case, you will have to input the information like so: [size=150]Hello World![/size]--> Hello World!
------
How Do I Make More Complex Text Styles? - Nesting is a simple technique to learn but will quickly get out of hand. Let's say you wanted to make a text bold,
[b][s][color=red]Hello World![/b][/s][/color]-->
Note that the order in which you place the closing of markup must be the reverse of the opening.
[b][s][color=red]Hello World![/b][/color][/s] will not work because the [/s] is out of order.
------
Bold Text - This makes the text bold and stand out more from ordinary text. Use it as a title.
[b]This is Bolded Text[/b]--> This is Bolded Text
------
Italicized Text - This makes the text slanted and can be used as a form of emphasis.
[i]This is Italicized Text[/i]--> This is Italicized Text
------
Striked Text - This places a strike through the text.
[s]This is Striked Text[/s]-->
------
Heading - This acts as the main title for a large section. Use it sparingly.
[heading]This is a Heading[/heading]-->
This is a Heading
------Links - This creates a link to external/other websites (although directly posting a link creates a link). Its color cannot be changed. You can mask the link with text.
[url]https://www.youtube.com/watch?v=dQw4w9WgXcQ[/url] [link=https://www.youtube.com/watch?v=dQw4w9WgXcQ]This is a link[/link]--> https://www.youtube.com/watch?v=dQw4w9WgXcQ
--> This is a link
------
Dropdown(Spoiler) Boxes - This creates a box to hide spoilers in or to have dropdown menues.
[box=Click Me!]This Text is now HD[/box]-->
Click Me!
This Text is now HD
------
Lists - This creates a list that you can customize and input multiple entries in.
[list=1] [*] Milk [*] Comedy [*] Yume Cheese-su[/list]-->
- Milk
- Comedy
- Yume Cheese-su
- Milk
- Comedy
- Yume Cheese-su
Images - This allows placement of images in forums. Do note that you have to use the image's direct link (copy image address). Some images may not load and some may take some time to fully load. It is usually best to put them in a [notice] and [box] to allow for faster loading. Combine it with a [url] tag to create Linked Images.
[box=Osu! Logo][img]https://l3apq3bncl82o596k2d1ydn1-wpengine.netdna-ssl.com/wp-content/uploads/2020/11/Osu-810x455.jpg[/img][/box]-->
------
Font Size - Changes the size for text. Only comes in sizes 1 50 100 150. The default is 100.
[size=50]tiny[/size] [size=85]small[/size] [size=100]Normal[/size] [size=150]LARGE[/size]--> tiny small Normal LARGE
Note: Most of these are found through experimentation. Please add other tags/features I've missed.
Colored Text - This allows your texts to be colored. UseThis Website for a full list of HTML Colors. Hexadecimal codes (#FF0000) can also be used.
[color=lightsalmon]Colors[/color] [color=#F54A75]Galor![/color]--> Colors Galor!
------
Aligning Text - This allows you to change the alignment of your text. Unfortunately only left (default, cannot be manually called) and center aligning is possible.
[centre]CENTER[/centre]-->
------
Emails - This allows other users to click a link to your email address.
[email]contact@ppy.sh[/email] [email=contact@ppy.sh]This is PPY's Email[/email]--> contact@ppy.sh'>contact@ppy.sh
--> This is PPY's Email
------
Code - Displays barebone text that has no formatting and does not take BBCode into account.
[b]This is not bolded now :([/b]------
Quotes - Displays text as a quote (like when you reply to another user).
[quote]Wow nice combo I got![/quote]-->
Wow nice combo I got!
[quote="Emmanuelll"]Bruh how was that a sliderbreak?[/quote]-->
------Emmanuelll wrote:
Bruh how was that a sliderbreak?
Underlined Text - Displays text with underlines on it. Not sure why its not included in explicit tags.
[u]This is Underlined Text.[/u]--> This is Underlined Text.
------
Notices - Creates a box surrounding all your texts like this one you are looking at right now. (Can't show examples without breaking the code.)
Hope you have fun with your forum posts and profile pages! Hope This helps you! Thanks for reading! ♥