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]

---

Blurry text!
You can also adjust how blurry (1-8):
Even blurrier text!

Code:

[blur]Blurry text![/blur]
You can also adjust how blurry (1-8):
[blur=8]Even blurrier text![/blur]

---

This Text Has Small Caps

Code:

[smallcaps]This Text Has Small Caps[/smallcaps]

---

This text has a text shadow!
Note: The first two numbers move the shadow away from the original text (or can be set to 0px 0px) and the third number is the blur amount of the shadow.

Code:

[textshadow="1px 1px 3px #FF0000"]This text has a text shadow![/textshadow]

---

This text is spaced out!

Code:

[spaced="3px"]This text is spaced out![/spaced]

---

This text is uppercase!
This TEXT IS Lowercase!
this text is capitalized!
Note: Works with uppercase, lowercase, or capitalize.

Code:

[tt="uppercase"]This text is uppercase![/tt]
[tt="lowercase"]This TEXT IS Lowercase![/tt]
[tt="capitalize"]this text is capitalized![/tt]

---

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.

---

Use an icon from Font Awesome.


Note: some icons may not work.

Code:

[icon=sword]

---

Button (Normal):
text
Note: You can use color/fade/etc. code inside of the button code to overwrite the link color.

Code:

[button="URL"]text[/button]

OR:
[button="URL"][color=HEX]text[/color][/button]

---

Button (w/ border radius):
text
Note: You can use color/fade/etc. code inside of the button code to overwrite the link color.

Code:

[buttonbr="URL"]text[/buttonbr]

OR:
[buttonbr="URL"][color=HEX]text[/color][/buttonbr]

---

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. You can also use height instead of width.

Code:

[image width=300 height=200]insert link here[/image]

Force set width and height instead of letting it scale normally.

Code:

[imagepos width=300 height=50 position=40,35 size=auto]link[/imagepos]

Your image with a custom position and size! Uses BOTH width and height. Position is the X,Y positioning of the image, and size can be "auto" (the full size image), "cover" (will fill the box), or a specific amount in pixels like "800px" -- useful if the image is very large and you want to scale it down a little.

Code:

[circleimage width=300]insert link here[/circleimage]

Your image... in a circle! Uses only 'width' but will make it an even circle.

Code:

[circleimagepos width=300 position=35,35 size=auto]link[/circleimagepos]

Your image... in a circle with a custom position and size! Uses only 'width' but will make it an even circle. Position is the X,Y positioning of the image within the circle, and size can be "auto" (the full size image), "cover" (will fill the circle), or a specific amount in pixels like "800px" -- useful if the image is very large and you want to scale it down a little.

Code:

[center] stuff [/center]

[center][circleimagepos width=300 position=35,35 size=auto]link[/circleimage post][/center]

Use this center code to center circle images and images with set positions, they will not respond to align code.

---

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, magenta, or default (regular box bg color) 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]

---

Lists:

• Item one
  
• Item two 
  • sub item 
    
  • sub item 
    
• Item three
  

1. Item one
   
2. Item two
   

1. Item one
   
2. Item two
   

Code:

[list]
[*] Item one
[*] Item two
  [list]
  [*] sub item
  [*] sub item
  [/list]
[*] Item three
[/list]

[list=1]
[*] Item one
[*] Item two
[/list]

[list=a]
[*] Item one
[*] Item two
[/list]

---

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!

Title Here

With centered title.

Title Here

With right-aligned title.

Code:

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

[fieldset centertitle="Title Here"]With centered title.[/fieldset]

[fieldset righttitle="Title Here"]With right-aligned title.[/fieldset]

---

This will put your text in a cute lil box!

or alternate background color!

Code:

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

[box altbg] or alternate background color! [/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]

Version with no padding:
[box plainscrollablenopad=HEIGHT] text in here [/box]

Version with no padding and no margin:
[box plainscrollablenpnm=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]

Version with no top margin:
[boxhnm]Text in here[/boxhnm]

---

There's a secret hidden here...

you are so cute!

Code:

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

---

Advanced Collapse

Some stuff in here! Note that the ID ("advexample" here) in both the button and content codes should match! This helps it target the specific tag you'd like to show - these do not have to be together in your code, such as having a line of buttons for a menu and their targets to show/hide elsewhere.

Code:

[advcollapsebutton id="advexample" text="Advanced Collapse"]
[advcollapse id="advexample"] Some stuff in here! [/advcollapse]

---

▮#626d77

Code:

[swatch=626d77]

---

Make custom swatches using the icon code :D


Some good icons for swatches (more on Font Awesome):

Code:

[color=#626d77][icon=paw][/color]

[icon=square] [icon=circle] [icon=diamond] [icon=star]

---

Code:

[swatchbar="626d77"]

(#626d77)

Note: You can use this as a divider or whatever by using size code before the swatchbartext code, and set the swatch and textcolor to be the same color. Example:

(#626d77)

Code:

[swatchbartext="626d77" textcolor="232e39"]

As a colored divider:
[size=2][swatchbartext="626d77" textcolor="626d77"][/size]

---

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!""

---

Easily inking to profiles or threads.

Code:

[p=#]Name[/p] - Profiles

[t=#]Thread Title[/t] - Threads

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]

Note! You can creat a nested row/col group by using rownest and colnest inside of an existing row/col:

Code:

[rownest]
[colnest] stuff [/colnest]
[colnest] stuff [/colnest]
[/rownest]

---

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]

Add "nonum" to use without numbers:

Code:

[hp=15,max=30 nonum]