Patreon LogoYour support makes Blue Moon possible (Patreon)

BBcode Resources

Cat

แ Œแ Œ แ Œ แ Œ แ Œ แ Œแ Œ แ Œ แ Œ แ Œ แ Œแ Œ แ Œ แ Œ แ Œ แ Œแ Œ แ Œ แ Œ แ Œ แ Œแ Œ แ Œ แ Œ แ Œโ™ก แ Œแ Œ
Joined
Jun 13, 2022
๐—•๐—•๐—ฐ๐—ผ๐—ฑ๐—ฒ ๐—ฅ๐—ฒ๐˜€๐—ผ๐˜‚๐—ฟ๐—ฐ๐—ฒ ๐—ง๐—ต๐—ฟ๐—ฒ๐—ฎ๐—ฑ​
โ €
hi there! this will be a thread detailing cheats for BBcoding in particular. it doesn't matter if you're a beginner, a pro, or don't know where to start. everything here will be laid out through tutorials and resources.


i want to note that there already is a design resources thread. it has many links that i might refer to in this thread. please check that out if you haven't already!


lastly: please do NOT post on this thread. to keep things organized, i'd like my posts to not be interrupted by outside posts. if you need help, feel free to reach out to the design team or me! i'm happy to help.
 
Last edited:
[ ยท ] THE BASICS 1 New
the basics! part 1
3c78e3fd5c12f82e1b8d0b217caa9c6491fc4904.gif
how to bold + italicize + underline + etc
bold:
tag: [ b ] [ /b ]

example: the word [ b ] guide [ /b ] is in bold.

result: the word guide is in bold.

tip: avoid marking long sentences in bold, as this loses the highlighting effect.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


italicize:
tag: [ i ] [ /i ]

example: the word [ i ] guide [ /i ] is in italics.

result: the word guide is in italics.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


underline:
tag: [ u ] [ /u ]

example: the word [ u ] guide [ /u ] is underlined.

result: the word guide is underlined.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


cross through:
tag: [ s ] [ /s ]

example: the word [ s ] guide [ /s ] is crossed out.

result: the word guide is crossed out.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


superscript:
tag: [ sup ] [ /sup ]

example: the equation x[ sup ] 2 [ /sup ] is a parabola.

result: the equation x2​ is a parabola.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


subscript:
tag: [ sub ] [ /sub ]

example: the formula of water is H[ sub ] 2 [ /sub ]O.

result: the formula of water is H2​O.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


sizing:
tag: [ size ] [ /size]

example 1: the word [ size= 26px ] large [ /size ] is bigger than the others.

result 1: the word​
large is bigger than the others.

example 2: the word [ size= 1px ] small is smaller than the others.

result 2: the word
small is smaller than the others.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


coloring text:
tag: [ color ] [ /color ]

example 1 (by entering the color name): the word [ color=blue ] guide [ /color ] is colored blue.

result 1: the word
guide is colored blue.

example 2 (entering the color in hexadecimal): the word [ color=#0000ff ] guide [ /color ] is colored blue.

result 2: the word
guide is colored blue.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


blurring text:
tag: [ ispoiler ] [ /ispoiler ]

example: the word [ ispoiler ] guide [ /ispoiler ] is blurred.

result: the word guide is blurred.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


creating links:
tag: [ url ] [ /url]

to make a URL clickable, wrap the URL with the tag:

example: the site [ url ] https : // bluemoonroleplaying.com/community/ [ /url ] is clickable.

result: the site Blue Moon Roleplaying Forums is clickable.

to create an anchor text, enter the anchor and the target URL:

example: the word [ url= https: // bluemoonroleplaying.com /community/ ] bluemoon [ /url ] is clickable.

result: the word bluemoon is clickable.

some forums such as phpBB also include the magic links feature which automatically recognize a URL without the need for any tags.

example: the https: // bluemoonroleplaying.com/community/ site is up-to-date.

result: the Blue Moon Roleplaying Forums is up-to-date.

for all link formats the user will either be taken to a new tab or stay in the same tab depending on the browser settings.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


images:
tag: [ img ] [ / img ]

to place an embedded image at a certain location in the post, wrap the image URL in the same way you would use the [ url ] tag.

example: [ img ] https://dummyimage.com/300x250/000/fff [ /img ]

result:

bbcode example


you can specify the width so that the height is automatically calculated respecting the original proportions of the image.

example: [ img width = "150px" ] https://dummyimage.com/300x250/000/fff [ /img ]

result:

fff


84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


creating lists:
tag: [ list ] [ / list ]

the BBcode formatting allows you to create numbered and unnumbered lists. unnumbered lists correspond to an unordered set of items.

example:
we will serve the following fruits at the picnic:

[ * ]banana
[ * ]apple
[ * ]avocado

result:

we will serve the following fruits at the picnic:
  • banana
  • apple
  • avocado
with numbers, just replace the [ * ] with a corresponding number.
 
[ ยท ] THE BASICS 2 New
the basics! part 2
3c78e3fd5c12f82e1b8d0b217caa9c6491fc4904.gif
how to bold + italicize + underline + etc
adding quotes:
tag: [ quote ] [ / quote ]

to add a quotation block to a simple sentence, simply wrap the text with the tags.

example: [ quote ] this sentence is a quote. [ /quote ]

result:
this sentence is a quote.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


creating a line break:
tag: [ hr ]

horizontal lines are useful for dividing a block of text into two parts.

example: text before the line. [ hr ] [ /hr ] text after the horizontal line.

result: text before the line.
text after the horizontal line.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


aligning text:
you can make the alignment right, left or centered with BBcode.

example:

[ center ] this text is centered. [ /center ]

result:

this text is centered.​

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


creating headings:
tag: [ h1 ]

you can simplify the creation of h1, h2, h3, h4, etc. headers with BBcode.

example:

[ h2 ] header 2 [ /h2 ]

result:

header 2


tip: don't use headers to highlight words but as headings and subheadings for long articles. if the goal is just to highlight a word or phrase, use the [ size ] tag.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


highlighting text:
tag: [ highlight ] [ /highlight ]

example: this word is [ highlight=purple ] highlighted [ /highlight ] because it's important.

result: this word is highlighted because it's important.

now you can also use specific hexadecimal for your highlighting.

example: this word is [ highlight=#3d0f0f ] highlighted [/highlight] because it's important.

result: this word is highlighted because it's important.

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


adding hover-over text:
tag: [ abbr ] [ /abbr ]

example: i love [ abbr="not really, i love cats" ] dogs! [ /abbr ]

result: i love dogs!

84eb0d6c8c5d3f74c3f5ca3890594f9e3278e83c.pnj


creating a spoiler:
tag: [ spoiler ] [ /spoiler ]

example: man, did you know that this cat [ spoiler ] stinks to hell and back [ /spoiler ] but i love her.

result: man, did you know that this cat
stinks to hell and back
but i love her.

tip: you can also name the spoiler tag so it doesn't say 'see more'.

example: man, did you know that this cat [ spoiler="meow" ] stinks to hell and back [ /spoiler ] but i love her.

result: man, did you know that this cat
stinks to hell and back
but i love her.​
 
[ ยท ] THE DIFFERENCE BETWEEN INDENT, FLOAT LEFT/RIGHT, AND REGULAR LEFT/RIGHT ALIGNMENT New
the difference between indent, float left/right, and regular left/right alignment
3c78e3fd5c12f82e1b8d0b217caa9c6491fc4904.gif
so, what's the difference between indenting, floating, and complete aligning?

great question! well, we know how and where indenting on the tab bar is:
NNbrqan.gif

this can be used to indent in increments! i wouldn't recommend using this for any complex coding. it's primary use is to indent posts. HOWEVER, if you find yourself wanting a few indents to your post/image/etc, then indent would be a great feature to use.


now we have our alignment option:
OZKaRUX.gif

alignment is a complete and total shift with whatever you're writing. it doesn't move in increments like the indent option. so if you want your text completely on the right side of the screen, then alignment would be the tags to use in this instance.


now, the floating option is not on the tab bar! this is more of an in-house secret, hah.
so, let's say you want a HUGE indent of 200 pixels to the left of your post. here's how you would go about doing that:
g6THCH2.gif


now a common mistake is adding the [ center ] tags after the [ floatleft ] tags. as shown above. it still indents 200 pixels but also forces your text to the center... which isn't what you want. this is how to fix something like that:
57XkQ4M.gif

now you might be wondering, what if i want my text to be centered though? there is a solution to that!

within those tags ( [ floatleft = 200 ] [ / floatleft ] [ floatleft ] words! [ /floatleft ] ) put the [ center ] tag in between the second set of [ floatleft ] tags.

like so: [ floatleft = 200 ] [ / floatleft ] [ floatleft ] [ center ] words! [ /center ] [ /floatleft ]

another common mistake with the float tags is not putting space in between the [ floatleft = 200 ] [ /floatleft ] tags like so:
fZFaEXi.gif

you NEED to put space there otherwise it will come out looking like you hadn't put the float tags there in the first place.

can i change it to be 100 pixels instead of 200? yes!! you can change it to whatever you want. i usually stick with the 200 range because that's as far as i want to personally push/indent my work.


so let's crank the intensity just a wee bit. let's say you want to add another column of text to the 'words!' portion to your right. here's how you would go about adding that:
GGYu1I6.gif

do you notice an issue though? there's no space between 'words!' and 'words again! wow!' let's fix that:
MZDDVRz.gif

now, i've been a little shoddy in introducing the transparent tag, but it is a thing. it's a lifesaver when it comes to adding inconspicuous spaces in between things. all you have to do for that is [ color=transparent ] type whatever here. it will be transparent. i like using x's or periods [ /color ]


that's all there is to it! you can add as many float tags as you want... or just experiment until you find what you're going for. i hope this helps ^-^​
 
[ ยท ] FIELDSETS AND TABLES New
fieldsets and tables
3c78e3fd5c12f82e1b8d0b217caa9c6491fc4904.gif
so, you've probably seen plenty of different ways to put text in a box. maybe for aesthetic purposes or to show a list of some kind. here's how you make tables, fieldsets, and something more.

table:
tag: [ table ] [ / table ]

now, the easiest way to go about making a table is using the prompt in the bar up top (it's next to where you can quote). you can make your table however you like. just play around with what you have.
nameage
john65
luke40
mary19
now, the BBcoding for this looks really complex, but it's much easier to just use the prompt. otherwise, you'll be putting a lot of tr's and th's down.

fieldset:
tag: [ fieldset ] [ /fieldset ]

example: [ fieldset block_align="bcenter" ] hello world! [ /fieldset ]

result:
Fieldset:
hello world!
you might be asking yourself, is there a way to change the width of the box? yes.

example: [ fieldset block_align="bcenter" width="100px" ] hello world! [ /fieldset ]

result:
Fieldset:
hello world!

another question you might have is, "can i rename or change the giant 'fieldset' above my box? yes, you can.

example: [ fieldset title="meow" block_align="bcenter" width="300px" ] hello world! [ /fieldset ]

result:
meow
hello world!

you can make the title of your fieldset invisible! you can use an invisible spacer like so:

example: [ fieldset title="โ€Ž โ€Ž โ€Ž โ€Ž " block_align="bcenter" width="300px" ] hello world! [ /fieldset ]

result:
โ€Ž โ€Ž โ€Ž
hello world!
 
Back
Top Bottom