BBCode
BBCode is a type of markup or coding language mainly used on discussion boards and forums. A function generally consists of an opening tag, such as
[i], and a closing tag, such as [/i]. The table below is aimed to guide you in understanding the BBCode that is supported here at Art Fight:| BBCode format | Posted results | Acceptable input/notes | ||||
| Standard | ||||||
[i]italicized text[/i] | italicized text | |||||
[b]bolded text[/b] | bolded text | |||||
[s]strikethrough text[/s] | ||||||
[u]underlined text[/u] | underlined text | |||||
[small]small text[/small] | small text | |||||
[sub]subscript text[/sub] | subscript text | |||||
[sup]superscript text[/sup] | superscript text | |||||
[url=http://example.org]hyperlinked text[/url] | hyperlinked text | |||||
[img]image.png[/img] |  | Make sure you use a complete image url that ends with .png, .jpg or .gif. Images that are too large will be automatically resized. | ||||
[color=#679e4b]text color[/color] | text color | Any hex color. | ||||
[size=5]text resize[/size] | text resize | 1 - 7 | ||||
[h1]header text[/h1] | header text | h1toh6 | ||||
[font=Georgia]font style[/font] | font style | Arial, Arial Black, Courier New, Georgia, Impact, Sans-Serif, Serif, Times New Roman, Trebuchet MS, Verdana | ||||
[right]right-aligned text[/right] | right-aligned text | |||||
[center]center-aligned text[/center] | center-aligned text | |||||
[left]left-aligned text[/left] | left-aligned text | |||||
[imgleft]https://artfight.net/images/logo50.png[/imgleft] Image to the left and text beside it | Image to the left and text beside it | |||||
[hr] | Note: A horizontal rule does not need a closing bracket. | |||||
example[br][br][br]text | example text | Introduces a new line within the same line. | ||||
[quote]Quote[/quote] | Quote | |||||
[quote=@username]Named quote[/quote] | Named quote | The quoted name does not have to be a user ping. | ||||
[spoiler]spoiled text[/spoiler] | Spoiler:
| This will be displayed in full in the WYSIWYG editor as a preview, but will be hidden when displayed normally. | ||||
[ code]non-transforming text[ /code] | non-transforming text | |||||
[list=1][li]list=1[/li][/list] | [list=A] | [list=1][list=A][list=a][list=I][list=i][*] (no closing tag) can be used for bullets. | ||||
| Tables | ||||||
|---|---|---|---|---|---|---|
[table][/table] | Required to start the table. | |||||
[tr][/tr] | Required to have a row in the table. Inserted between the opening and closing tags for the table. You may have multiple of these in a table. | |||||
[td]table cell[/td] | Required to have information in the table. Inserted between the opening and closing tags for the table row. You may have multiple of these in a row. Each row should have the same number of cells. | |||||
[th]table header cell[/th] | For header cells. Can be used in place of normal table cells. | |||||
[table][tr][td]cell 1[td][td]cell 2[td][/tr][tr][td]cell 3[td][td]cell 4[td][/tr][/table] |
| Table sample | ||||
| Art Fight Specific | ||||||
@admin | admin | Note: In comments, this will notify the user that they were pinged and turn into a link to their page. The username will not turn into a link if the user does not exist. |
Common BBCode questions and bugs
How do I add a spoiler?
Write
[spoiler] text [/spoiler]The spoiler isn’t working
Try removing formatting.
My images are breaking
Make sure your link has an image file extension (.jpg .png or .gif) at the end. Otherwise, try uploading the image to an external image hosting site, like Imgur or File Garden, and use that link instead!
My image is stretched/squashed
When using the image insert tool in the text editor, you can choose to input the size you want the image to be. If you only put in width or only put in height and not both, the image will resize itself accordingly without stretching or squashing.
I'm seeing weird tags that I didn't add
Try removing formatting.
How do people do the randomized image on their profile?
This is done by using the site https://sig.grumpybumpers.com/. Use at your own risk.
CSS
CSS is a coding language that lets you change colors and other cosmetic elements. With CSS you can add an image in the background, change the width of your comment boxes, change the link color of all links, and much more.How do I access CSS?
You get access to editing your CSS by donating 25$ more to Art Fight.
Are there any helpful links and guides?
Official Art Fight CSS Guide
(More links coming)
Where can I get help with CSS?
We have a channel named CSS-help in our discord server. If you do not have access, ask for help getting access in the af-help channel.
How do I add a banner?
Please note that this WILL NOT work unless you have the 25$ donor tier.
1. Go to your profile settings
2. Input this into your profile, but replace URL with your image link that ends with .png or .jpg or .gif :
.banner {
background-image:url("URL") !important;
height:200px !important;
}What is the recommended size for a banner?
Your banner will be shown broader and narrower depending on the onlooker’s screen size. We recommend 1920 pixels width and anything from 200 to 500 pixels height. If you don’t specify, the default height is 200 pixels. Remember to also take a look at the banner on your phone if you want it to look good on all devices.
Why did my CSS disappear?
Donations only last for one year.
Will my CSS come back like it was when I donate 25$+ again?
Yes, but we recommend saving your code in a text or google document to be sure in case of bugs and such.
I want to delete all my custom CSS but it won't go away. How do I fix this?
Try putting a punctuation . into the box and saving.
What fonts can I use?
The fonts you can use depends on what fonts people have installed on their computer, which can vary. There are some fonts that are “web safe” which means every computer should have them. Most of the fonts in our text editor should work! The way setting a font works also makes it possible to have back-up fonts when what you have set isn’t found.