Dungeon Sandbox Wiki
Don't have an account?
Register
Register

Changes: Styling

Back to page
Edit
No edit summary
Tag: Visual edit
No edit summary
Tag: Visual edit
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
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.
  
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.
  +
⚫
* Multiple parameters must be seperated with ";" sign.
  
  +
== '''Important notes''' ==
  ⚫
* Multiple parameters must be separated with semicolon (";").
 
* Format: '''parameter: value; parameter2: value;'''
  
* Format: '''parameter: value; parameter2: value;'''
   
−
== '''Common parameters:''' ==
 +
== Common parameters: ==
 
{| class="article-table"
  
{| class="article-table"
 
!
  
!
−
== Parameter ==
 +
Parameter
 
!
  
!
  +
Definition
−
== Effect ==
  
 
!
  
!
−
== Default Value ==
 +
Default Value
 
!
  
!
−
== Examples ==
 +
Examples
 
!
  
!
−
== Reference ==
 +
Reference
  +
!<nowiki><span></nowiki>
 
|-
  
|-
  +
|
−
|color
  
  +
==== color ====
 
|'''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://www.w3schools.com/cssref/css_colors.asp CSS colors]
  +
  +
[https://htmlcolorcodes.com/color-picker/ Pick any color]
  +
|Yes
 
|-
  
|-
  +
|
−
|font-size
 +
==== font-size ====
 
|'''Define font size in % '''<nowiki>(text | link) </nowiki>
  
|'''Define font size in % '''<nowiki>(text | link) </nowiki>
  +
|500% (100% for partial editing)
−
|500%
  
−
|font-size: 1000%
 +
|''font-size: 1000%''
 
|
  
|
  +
|Yes
 
|-
  
|-
  +
|
−
|font-weight
 +
==== font-weight ====
 
|'''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''
 
|
  
|
  +
|Yes
 
|-
  
|-
  +
|
⚫
|background
  
  +
==== text-shadow ====
  +
|<nowiki>Add shadow to a text (text | link)</nowiki>
  +
|none
  +
|text-shadow: 0.1vw 0.1vw black
  +
|[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp Learn more]
  +
|Yes
  +
|-
  +
|
  ⚫
==== background ====
 
|'''Set background color '''<nowiki>(text | link)</nowiki>
  
|'''Set background color '''<nowiki>(text | link)</nowiki>
 
|none
  
|none
−
|'''Simple colors: '''color: black
 +
|'''Simple colors: '''''background: black''
−
'''HEX colors: '''color: #4286f4
 +
'''HEX colors: '''''background: #4286f4''
   
−
'''RGB colors: '''color: rgb(216, 34, 34)
 +
'''RGB colors: '''''background: rgb(216, 34, 34)''
   
−
'''RGB colors with custom transparency: '''color: rgba(216, 34, 34, 0.5)
 +
'''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
 
|-
  
|-
  +
|
−
|border
  
  +
==== border ====
 
|'''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]
  +
|Partial
 
|-
  
|-
  +
|
−
|opacity
 +
==== opacity ====
 
|'''Define opacity (transparency) '''<nowiki>(text | link | image)</nowiki>
  
|'''Define opacity (transparency) '''<nowiki>(text | link | image)</nowiki>
 
|1
  
|1
−
|opacity: 0.5
 +
|''opacity: 0.5''
 
|
  
|
  +
|Yes
 
|-
  
|-
−
|top
 +
|
  +
==== top ====
−
left
  
  +
  +
==== left ====
 
|'''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%''
 
|
  
|
  +
|No
 
|-
  
|-
  +
|
−
|transform: scale()
 +
==== transform: scale() ====
 
|'''Scaling '''<nowiki>(text | link | image)</nowiki>
  
|'''Scaling '''<nowiki>(text | link | image)</nowiki>
 
|1
  
|1
−
|transform: scale(3)
 +
|''transform: scale(3)''
 
|
  
|
  +
|No
 
|-
  
|-
  +
|
−
|transform: rotate()
 +
==== transform: rotate() ====
 
|'''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)''
  +
|
  +
|No
  +
|}
  +
  +
== Partial styling ==
  +
You can style parts of a text by wrapping any part in '''<nowiki><span></nowiki>''' tag ''OR additional tags (see below)'' and using the above parameters ('''''see <nowiki><span> column in table above</nowiki>'''''):
  +
  +
'''E.g.:''' ''This is <nowiki><span style="background: black; color: gold">my text</span></nowiki>''
  +
  +
=== Additional tags: ===
  +
{| class="article-table"
  +
!
  +
Tag
  +
!Definition
  +
!Examples
  +
|-
  +
|
  +
==== <nowiki><b></nowiki> ====
  +
|'''Bold text'''
  +
|<nowiki><b>Bold text</b></nowiki>
  +
|-
  +
|
  +
==== <nowiki><i></nowiki> ====
  +
|'''Italic text'''
  +
|<nowiki><i>Italic text</i></nowiki>
  +
|-
  +
|
  +
==== <a> ====
  +
|'''Link'''
  +
|<a href="http://baben.co" style="color: pink">Website</a>
  +
|-
 
|
  
|
  +
==== <nowiki><hr></nowiki> ====
  +
|'''Horizontal line'''
  +
|Text<nowiki><hr style="border: 1vw solid blue"></nowiki>Another paragraph
 
|}
  
|}

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

Pick any color

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
Community content is available under CC-BY-SA unless otherwise noted.