No edit summary Tag: Visual edit |
No edit summary Tag: Visual edit |
||
| Line 21: | Line 21: | ||
|'''Define color '''<nowiki>(text | link)</nowiki> |
|'''Define color '''<nowiki>(text | link)</nowiki> |
||
|white |
|white |
||
| − | |'''Simple colors: '''color: black |
+ | |'''Simple colors: '''''color: black'' |
| − | '''HEX colors: '''color: #4286f4 |
+ | '''HEX colors: '''''color: #4286f4'' |
| − | '''RGB colors: '''color: rgb(216, 34, 34) |
+ | '''RGB colors: '''''color: rgb(216, 34, 34)'' |
| − | '''RGB colors with custom transparency: '''color: rgba(216, 34, 34, 0.5) |
+ | '''RGB colors with custom transparency: '''''color: rgba(216, 34, 34, 0.5)'' |
|[https://htmlcolorcodes.com/color-picker/ Pick any color] |
|[https://htmlcolorcodes.com/color-picker/ Pick any color] |
||
|- |
|- |
||
| Line 32: | Line 32: | ||
|'''Define font size in % '''<nowiki>(text | link) </nowiki> |
|'''Define font size in % '''<nowiki>(text | link) </nowiki> |
||
|500% |
|500% |
||
| − | |font-size: 1000% |
+ | |''font-size: 1000%'' |
| |
| |
||
|- |
|- |
||
| Line 38: | Line 38: | ||
|'''Make text bold(er) '''<nowiki>(text | link)</nowiki> |
|'''Make text bold(er) '''<nowiki>(text | link)</nowiki> |
||
|normal |
|normal |
||
| − | |'''Simple: '''font-weight: bold |
+ | |'''Simple: '''''font-weight: bold'' |
| − | '''Precise (100-900 with 100 steps): '''font-weight: 900 |
+ | '''Precise (100-900 with 100 steps): '''''font-weight: 900'' |
| |
| |
||
|- |
|- |
||
| Line 46: | Line 46: | ||
|'''Set background color '''<nowiki>(text | link)</nowiki> |
|'''Set background color '''<nowiki>(text | link)</nowiki> |
||
|none |
|none |
||
| − | |'''Simple colors: '''color: black |
+ | |'''Simple colors: '''''color: black'' |
| − | '''HEX colors: '''color: #4286f4 |
+ | '''HEX colors: '''''color: #4286f4'' |
| − | '''RGB colors: '''color: rgb(216, 34, 34) |
+ | '''RGB colors: '''''color: rgb(216, 34, 34)'' |
| − | '''RGB colors with custom transparency: '''color: rgba(216, 34, 34, 0.5) |
+ | '''RGB colors with custom transparency: '''''color: rgba(216, 34, 34, 0.5)'' |
|[https://htmlcolorcodes.com/color-picker/ Pick any color] |
|[https://htmlcolorcodes.com/color-picker/ Pick any color] |
||
|- |
|- |
||
| Line 57: | Line 57: | ||
|'''Set border '''<nowiki>(text | link | image)</nowiki> |
|'''Set border '''<nowiki>(text | link | image)</nowiki> |
||
|none |
|none |
||
| − | |'''''vw'' - flexible units: '''border: 0.5vw solid black |
+ | |'''''vw'' - flexible units: '''''border: 0.5vw solid black'' |
| − | '''px - inflexible units: '''border: 10px |
+ | '''px - inflexible units: '''''border: 10px'' |
|[https://www.quackit.com/html/codes/html_borders.cfm All border variations] |
|[https://www.quackit.com/html/codes/html_borders.cfm All border variations] |
||
|- |
|- |
||
| Line 65: | Line 65: | ||
|'''Define opacity (transparency) '''<nowiki>(text | link | image)</nowiki> |
|'''Define opacity (transparency) '''<nowiki>(text | link | image)</nowiki> |
||
|1 |
|1 |
||
| − | |opacity: 0.5 |
+ | |''opacity: 0.5'' |
| |
| |
||
|- |
|- |
||
| Line 72: | Line 72: | ||
|'''Change position by changing offset from top and left edge '''<nowiki>(text | link | image)</nowiki> |
|'''Change position by changing offset from top and left edge '''<nowiki>(text | link | image)</nowiki> |
||
|50% |
|50% |
||
| − | |top: 25%; left: -10% |
+ | |''top: 25%; left: -10%'' |
| |
| |
||
|- |
|- |
||
| Line 78: | Line 78: | ||
|'''Scaling '''<nowiki>(text | link | image)</nowiki> |
|'''Scaling '''<nowiki>(text | link | image)</nowiki> |
||
|1 |
|1 |
||
| − | |transform: scale(3) |
+ | |''transform: scale(3)'' |
| |
| |
||
|- |
|- |
||
| Line 84: | Line 84: | ||
|'''Rotation in deg (degrees) '''<nowiki>(text | link | image)</nowiki> |
|'''Rotation in deg (degrees) '''<nowiki>(text | link | image)</nowiki> |
||
|0 |
|0 |
||
| − | |transform: rotate(-30deg) |
+ | |''transform: rotate(-30deg)'' |
| |
| |
||
|} |
|} |
||
Revision as of 23:30, 6 April 2018
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 ";" sign.
- Format: parameter: value; parameter2: value;
Common parameters:
Parameter |
Effect |
Default Value |
Examples |
Reference |
|---|---|---|---|---|
| color | Define color (text | link) | white | Simple colors: color: black
HEX colors: color: #4286f4 RGB colors: color: rgb(216, 34, 34) RGB colors with custom transparency: color: rgba(216, 34, 34, 0.5) |
Pick any color |
| font-size | Define font size in % (text | link) | 500% | font-size: 1000% | |
| font-weight | Make text bold(er) (text | link) | normal | Simple: font-weight: bold
Precise (100-900 with 100 steps): font-weight: 900 |
|
| background | Set background color (text | link) | none | Simple colors: color: black
HEX colors: color: #4286f4 RGB colors: color: rgb(216, 34, 34) RGB colors with custom transparency: color: rgba(216, 34, 34, 0.5) |
Pick any color |
| border | Set border (text | link | image) | none | vw - flexible units: border: 0.5vw solid black
px - inflexible units: border: 10px |
All border variations |
| opacity | Define opacity (transparency) (text | link | image) | 1 | opacity: 0.5 | |
| top
left |
Change position by changing offset from top and left edge (text | link | image) | 50% | top: 25%; left: -10% | |
| transform: scale() | Scaling (text | link | image) | 1 | transform: scale(3) | |
| transform: rotate() | Rotation in deg (degrees) (text | link | image) | 0 | transform: rotate(-30deg) |
Partial styling
You can style parts of a text by wrapping any part in <span> tag an using the above parameters:
E.g.: This is <span style="background: black; color: gold">my text</span>