This is where you will find the MyCodes that will work on The Vivarium forum.

Have a MyCode Request?

---

This is text that is blue.
Replace "blue" with any or other named color.

Code:

[color=blue]blue[/color]

---

This will give you automatic quotes and change your color to your assigned dialogue color for your character.

Code:

[q]Dialogue color[/q]

---

Customised colour with #F9CF95 #hexcode. A good place to find #hexcodes is color-hex.com

Code:

[color=#F9CF95]Customised colour with #F9CF95 #hexcode.[/color]

---

This is a font that is bold.
This is a font that is italicized.
This is a font that is underlined.
This is a font that is struck-through.

Code:

[b]Bold[/b]. [i]Italic[/i]. [u]Underline[/u]. [s]Strikethrough[/s].

---

This font is extra small
This font is small
This font is average
This font is large
This font is extra large

Code:

[size=x-small]This font is extra small[/size]. [size=small]This font is small[/size]. [size=large]This font is large[/size]. [size=x-large]This font is extra large[/size].

---

Hover over me for a surprise! (Translated text, great for speaking in other languages!)

Code:

[hover=Hidden text]Original text[/hover]

---

This text has a gradient fade!

Code:

[fade start="#HEX" end="#HEX"]text in here[/fade]

---

Playwrite VN
Example from Google Fonts import.

Code:

[cfont=https://fonts.googleapis.com/css2?family=Playwrite+VN:wght@100..400&display=swap][font=Playwrite VN]Playwrite VN[/font]
Example from Google Fonts import.

---

Candylove
Example from CDN Fonts import.

Code:

[cfont=https://fonts.cdnfonts.com/css/candylove][font=Candylove]Candylove[/font]
Example from CDN Fonts import.

---

For adding images to your profile or OOC posts

Code:

[image width=500]insert link here[/image]

Changing the number after the = in the code to a different number gives your image a different width

---

For notes on your posts:

---

This is me saying things out of character!

Code:

[ooc]This is me saying things out of character![/ooc]

This is me saying things out of character!

---

Code:

[note]This is me saying things out of character![/note]

---

This — will — give — you — a big dash!

Code:

[mdash]

This will give you an indent!
They stack!

Code:

[indent]

---

If you want a line/divider, you can use the following code

Code:

[hr]

---

To give someone an alert at the top of your post!

Replace "red" with silver, blue, green, yellow, orange, or magenta to change the color of the banner! View color examples on this page of the Guidebook.

Code:

[alert=red]To give someone an alert at the top of your post![/alert]

---

Blockquotes are useful for really long quoted pieces of text, such as songs or even snippets of other posts!

Code:

[blockquote]Blockquotes are useful for really long quoted pieces of text, such as songs or even snippets of other posts![/blockquote]

---

Title Here

This will put your text in a fieldset textbox!

Code:

[fieldset title="Title Here"]Put your text in a fieldset textbox![/fieldset]

---

This will put your text in a cute lil box!

Code:

[box]Put your text in a box![/box]

---

This will put your text in a cute lil box that you can choose the width of! Just replace 300 with whatever width you desire!

Code:

[narrow width=300][box]Put your text in a box![/box][/narrow]

---

HEADER

Scrolling text that has a header. This example has a maximum of 100 pixels but you can adjust that number! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code:

[box header="HEADER" scrollable=100]Scrolling text that has a header. This example has a maximum of 100 pixels but you can adjust that number![/box]

---

Scrolling text that doesn't have a header. This example has a maximum of 150 pixels but you can adjust that number! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code:

[box scrollable=150]Scrolling text that doesn't have a header. This example has a maximum of 150 pixels but you can adjust that number![/box]

---

This scroll box is plain! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code:

[box plainscrollable=HEIGHT] text in here [/box]

---

This is a box that has "full height" set so if it is in a set of rows and columns (row and col codes) then it will have the same height as others it's next to.

This code can have a header the same way as the others but cannot scroll

Lorem ipsum....

Code:

[boxh]Full height box, works inside cols. Cannot be scrollable but can include the header="text" code, like the other boxes.[/boxh]

---

There's a secret hidden here...

you are so cute!

Code:

[collapse="stuff"]more stuff[/collapse]

---

for mobile users

This will align your font to the left.

Code:

{{LEFT{{

---

This will align your font to the right.

Code:

}}RIGHT}}

---

This will center your font.

Code:

}{CENTER}{

---

This will justify your font.

Code:

{}JUSTIFY{}

---

This will change your font to your assigned dialogue color!

Code:

""This will change your font to your assigned dialogue color!""

Complex Code

Some code is a bit more complex than others and may interact in different ways. Code like this, I will explain in more depth below. They usually can't be just copied and pasted from the guide, since there has to be more thought put into them. Sometimes, it's minimal thought, like "how many boxes can fit here" and other times, you have to remember to change ids and copy multiple codes.

---

Flexbox — Rows and Columns

Here in Vivarium, we use bootstrap grid/flexbox to make fancy little boxes and have them side by side. A lot of the site was designed with these columns!

In order to make these work, you always have to wrap them in row tags. That means, before and after your columns, with nothing else! Then, each of the inside boxes are a col tag. These can be either just col or have a number attached. These numbers go up to 12 because the way the grid works is that it's split into chunks in a grid 12 wide. The numbers always have to add up to 12 in one row.

Examples of flexbox

One full width column — col=12.

text

Code:

[row]
[col=12][box]text[/box][/col]
[/row]

Two columns equal width — all col=6 — Because 6 + 6 = 12

text

text

Code:

[row]
[col=6][box]text[/box][/col]
[col=6][box]text[/box][/col]
[/row]

Three columns different width — col=4, col=3 , and col=5— Because 4 + 3 + 5 = 12

text

text

text

Code:

[row]
[col=4][box]text[/box][/col]
[col=3][box]text[/box][/col]
[col=5][box]text[/box][/col]
[/row]

Five columns different widths — all just col  — col fits widths with others to form 12. This allows for numbers of columns that don't add up to 12!

text

text

text

text

text

Code:

[row]
[col][box]text[/box][/col]
[col][box]text[/box][/col]
[col][box]text[/box][/col]
[col][box]text[/box][/col]
[col][box]text[/box][/col]
[/row]

---

Flexbox — Vertically Centered

You can also have a column that's vertically centered amidst other boxes! For this, instead of col, you'd use midcol. You'll use the same row code as normal cols.

Example of vertically aligned flexbox

multiline text
multiline text
multiline text
multiline text

text

This box is multiline but uses col instead of midcol!
That means it will start at the top. You can mix and match!

Code:

[row]
[midcol=4][box]multiline text
multiline text
multiline text
multiline text[/box][/midcol]
[midcol=4][box]text[/box][/midcol]
[col=4][box]This box is multiline but uses [font=Courier New]col[/font] instead of [font=Courier New]midcol[/font]!
That means it will start at the top. You can mix and match![/box][/col]
[/row]

Health Bar/Skill Progression Bars

0/30

Code:

[hp=0,max=30]

15/30

Code:

[hp=15,max=30]