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

Changes: Styling

Back to page
Edit
(Created page with "Following parameters can be used in the Style field to customize decorations in your dungeon:")
Tag: Visual edit
 
No edit summary
Tag: Visual edit
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
Following parameters can be used in the Style field to customize decorations in your dungeon:
 +
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
  +
!<nowiki><span></nowiki>
  +
|-
  +
|
  +
==== color ====
  +
|'''Define color '''<nowiki>(text | link)</nowiki>
  +
|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)''
  +
|[https://www.w3schools.com/cssref/css_colors.asp CSS colors]
  +
  +
[https://htmlcolorcodes.com/color-picker/ Pick any color]
  +
|Yes
  +
|-
  +
|
  +
==== font-size ====
  +
|'''Define font size in % '''<nowiki>(text | link) </nowiki>
  +
|500% (100% for partial editing)
  +
|''font-size: 1000%''
  +
|
  +
|Yes
  +
|-
  +
|
  +
==== font-weight ====
  +
|'''Make text bold(er) '''<nowiki>(text | link)</nowiki>
  +
|normal
  +
|'''Simple: '''''font-weight: bold''
  +
  +
'''Precise (100-900 with 100 steps): '''''font-weight: 900''
  +
|
  +
|Yes
  +
|-
  +
|
  +
==== 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>
  +
|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)''
  +
|[https://htmlcolorcodes.com/color-picker/ Pick any color]
  +
|Yes
  +
|-
  +
|
  +
==== border ====
  +
|'''Set border '''<nowiki>(text | link | image)</nowiki>
  +
|none
  +
|'''''vw'' - flexible units: '''''border: 0.5vw solid black''
  +
  +
'''px - inflexible units: '''''border: 10px''
  +
|[https://www.quackit.com/html/codes/html_borders.cfm All border variations]
  +
|Partial
  +
|-
  +
|
  +
==== opacity ====
  +
|'''Define opacity (transparency) '''<nowiki>(text | link | image)</nowiki>
  +
|1
  +
|''opacity: 0.5''
  +
|
  +
|Yes
  +
|-
  +
|
  +
==== top ====
  +
  +
==== left ====
  +
|'''Change position by changing offset from top and left edge '''<nowiki>(text | link | image)</nowiki>
  +
|50%
  +
|''top: 25%; left: -10%''
  +
|
  +
|No
  +
|-
  +
|
  +
==== transform: scale() ====
  +
|'''Scaling '''<nowiki>(text | link | image)</nowiki>
  +
|1
  +
|''transform: scale(3)''
  +
|
  +
|No
  +
|-
  +
|
  +
==== transform: rotate() ====
  +
|'''Rotation in deg (degrees) '''<nowiki>(text | link | image)</nowiki>
  +
|0
  +
|''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.