Styling

Different parameters can be applied using CSS syntax in the Style field to customize decorations in your dungeon. This page describes the most commonly used ones.

Important notes

 * Multiple parameters must be separated with semicolon (";").
 * Format: parameter: value; parameter2: value;

Common parameters:
{| class="article-table" ! Parameter ! Definition ! Default Value ! Examples ! Reference !

color
HEX colors: color: #4286f4
 * Define color  (text | link)
 * white
 * Simple colors: color: black

RGB colors: color: rgb(216, 34, 34)

RGB colors with custom transparency: color: rgba(216, 34, 34, 0.5)
 * CSS colors

Pick any color
 * Yes

font-size

 * Define font size in %  (text | link)
 * 500% (100% for partial editing)
 * font-size: 1000%
 * Yes
 * Yes

font-weight

 * Make text bold(er)  (text | link)
 * normal
 * Simple: font-weight: bold

Precise (100-900 with 100 steps): font-weight: 900
 * Yes
 * Yes

text-shadow

 * Add shadow to a text (text | link)
 * none
 * text-shadow: 0.1vw 0.1vw black
 * Learn more
 * Yes

background
HEX colors: background: #4286f4
 * Set background color  (text | link)
 * none
 * Simple colors: background: black

RGB colors: background: rgb(216, 34, 34)

RGB colors with custom transparency: background: rgba(216, 34, 34, 0.5)
 * Pick any color
 * Yes

border

 * Set border  (text | link | image)
 * none
 * vw - flexible units: border: 0.5vw solid black

px - inflexible units: border: 10px
 * All border variations
 * Partial

opacity

 * Define opacity (transparency)  (text | link | image)
 * 1
 * opacity: 0.5
 * Yes
 * Yes

left

 * Change position by changing offset from top and left edge  (text | link | image)
 * 50%
 * top: 25%; left: -10%
 * No
 * No

transform: scale

 * Scaling  (text | link | image)
 * 1
 * transform: scale(3)
 * No
 * No

transform: rotate

 * Rotation in deg (degrees)  (text | link | image)
 * 0
 * transform: rotate(-30deg)
 * No
 * }
 * }

Partial styling
You can style parts of a text by wrapping any part in    tag OR additional tags (see below) and using the above parameters (see  column in table above ):

E.g.: This is my text 

Additional tags:
{| class="article-table" ! Tag !Definition !Examples



 * Bold text
 * Bold text



 * Italic text
 * Italic text



 * Link
 * Website


 * Horizontal line
 * Text  Another paragraph
 * }