No edit summary Tag: Visual edit |
No edit summary Tag: Visual edit |
||
(One intermediate revision by the same user not shown) | |||
Line 29: | Line 29: | ||
'''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:// |
+ | |[https://www.w3schools.com/cssref/css_colors.asp CSS colors] |
+ | |||
+ | [https://htmlcolorcodes.com/color-picker/ Pick any color] |
||
|Yes |
|Yes |
||
|- |
|- |
||
Line 62: | Line 64: | ||
|'''Set background color '''<nowiki>(text | link)</nowiki> |
|'''Set background color '''<nowiki>(text | link)</nowiki> |
||
|none |
|none |
||
− | |'''Simple colors: ''''' |
+ | |'''Simple colors: '''''background: black'' |
− | '''HEX colors: ''''' |
+ | '''HEX colors: '''''background: #4286f4'' |
− | '''RGB colors: ''''' |
+ | '''RGB colors: '''''background: rgb(216, 34, 34)'' |
− | '''RGB colors with custom transparency: ''''' |
+ | '''RGB colors with custom transparency: '''''background: rgba(216, 34, 34, 0.5)'' |
|[https://htmlcolorcodes.com/color-picker/ Pick any color] |
|[https://htmlcolorcodes.com/color-picker/ Pick any color] |
||
|Yes |
|Yes |
Latest revision as of 14:15, 23 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 semicolon (";").
- Format: parameter: value; parameter2: value;
Common parameters:[]
Parameter |
Definition |
Default Value |
Examples |
Reference |
<span> |
---|---|---|---|---|---|
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) |
CSS colors | Yes |
font-size[] |
Define font size in % (text | link) | 500% (100% for partial editing) | font-size: 1000% | Yes | |
font-weight[] |
Make text bold(er) (text | link) | normal | Simple: font-weight: bold
Precise (100-900 with 100 steps): font-weight: 900 |
Yes | |
text-shadow[] |
Add shadow to a text (text | link) | none | text-shadow: 0.1vw 0.1vw black | Learn more | Yes |
background[] |
Set background color (text | link) | none | Simple colors: background: black
HEX colors: background: #4286f4 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 | |
top[]left[] |
Change position by changing offset from top and left edge (text | link | image) | 50% | top: 25%; left: -10% | No | |
transform: scale()[] |
Scaling (text | link | image) | 1 | transform: scale(3) | 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 <span> tag OR additional tags (see below) and using the above parameters (see <span> column in table above):
E.g.: This is <span style="background: black; color: gold">my text</span>
Additional tags:[]
Tag |
Definition | Examples |
---|---|---|
<b>[] |
Bold text | <b>Bold text</b> |
<i>[] |
Italic text | <i>Italic text</i> |
<a>[] |
Link | <a href="http://baben.co" style="color: pink">Website</a> |
<hr>[] |
Horizontal line | Text<hr style="border: 1vw solid blue">Another paragraph |