We switched Servers - please check your changes/user Accounts since 24 July 2019

 Actions

User

Cryscryb2

From Dragon Mania Legends Wiki

Administrator Tag.png

To reach me, please leave a message on my <Talk> page as I do not give out personal information such as email, thanks! :)



CRYS'S PROFILE

Freyja Dragon


Reusable Styles (Dev In-progress, page to come)

The following are a series of reusable styles that can be placed in any wiki page or template to automatically style various elements...

Element classes are preconfigured groups of reusable styles that in some cases may be layered to create shapes and other visual effects.

  1. Identify the text or link you want to convert to a button or tab.
  2. Place between the span tags <span class="">Your Text</span>.
  3. Add the desired classes between the quotes, separated by spaces.

Note: Base classes are required, other styles indicated in the table may be layered on top as follows:
↓ The following table scrolls right → on mobile

Text in a Span Base +Size +Shape +Color +Modifier =Code Result
<span class="">?</span> dmlbtn sz-sm
sz-med
sz-lg
(none = rectangle)
style-cir
style-tab
style-tab-lt
style-tab-rt
blue
green
orange
red
gray
lt-blue
uppercase
lowercase
capitalize
<span class="dmlbtn sz-sm blue">?</span> ?
<span class="">Connect</span> dmlbtn sz-med style-tab green uppercase <span class="dmlbtn sz-med style-tab uppercase green">Connect</span> Connect

Button Classes

Use sz-sm buttons and tabs for examples of interactive elements as you describe them within the flow of text, like in a paragraph. For example: Click the X button to close the dialog. Small buttons do not have margins that affect the spacing of paragraphs and should be treated as any other word, with a space occurring both before and after the word.

Square & Rectangle Buttons

↓ The following table scrolls right → on mobile

Sample(s) Code Notes
? <span class="dmlbtn sz-sm blue">?</span> Replace the text and the classes for color and modifiers as needed.
& <span class="dmlbtn sz-sm green">&</span>
! <span class="dmlbtn sz-sm orange">!</span>
X <span class="dmlbtn sz-sm red">X</span>
X <span class="dmlbtn sz-sm gray">X</span>
  Check   <span class="dmlbtn sz-sm uppercase blue">&nbsp;Check&nbsp;</span></code> Spaces can be added before and after words using the html code for a non-breaking space: &nbsp;&nbsp;
Elements <span class="dmlbtn sz-sm uppercase green">[[Elements]]</span></code> Buttons can be regular, non-linked text, or can contain MediaWiki page or external links.
Elements <span class="dmlbtn sz-sm uppercase orange">[[Elements]]</span></code>
Elements <span class="dmlbtn sz-sm uppercase red">[[Elements]]</span></code>
Elements <span class="dmlbtn sz-sm uppercase gray">[[Elements]]</span></code>
Social
all dragons
Delete delete
<span class="dmlbtn sz-sm uppercase green">Social</span>
<span class="dmlbtn sz-sm capitalize orange">all dragons</span>
<span class="dmlbtn sz-sm lowercase red">Delete</span>
Note: The "capitalize" class makes each word begin with a capital letter, use the class "uppercase" to put all letters in uppercase.

Round Buttons

↓ The following table scrolls right → on mobile

Sample(s) Code Notes
? <span class="dmlbtn sz-sm style-cir blue">?</span> Replace the text and the classes for color and modifiers as needed.
x2 <span class="dmlbtn sz-sm style-cir lt-blue">x2</span> Replace the text and the classes for color and modifiers as needed.
& <span class="dmlbtn sz-sm style-cir green">&</span>
! <span class="dmlbtn sz-sm style-cir orange">!</span>
X <span class="dmlbtn sz-sm style-cir red">X</span>
X <span class="dmlbtn sz-sm style-cir gray">X</span>

Tabs

↓ The following table scrolls right → on mobile

Sample(s) Code Notes
Elements <span class="dmlbtn sz-sm style-tab uppercase blue">[[Elements]]</span> Top tab.
Elements <span class="dmlbtn sz-sm style-tab uppercase green">[[Elements]]</span>
Elements <span class="dmlbtn sz-sm style-tab uppercase orange">[[Elements]]</span>
Elements <span class="dmlbtn sz-sm style-tab uppercase red">[[Elements]]</span>
Elements <span class="dmlbtn sz-sm style-tab uppercase gray">[[Elements]]</span> Use gray for inactive or unavailable items only.
? <span class="dmlbtn sz-sm style-tab-rt uppercase blue">?</span> style-tab-rt Use for right-oriented tabs.
+ <span class="dmlbtn sz-sm style-tab-rt uppercase green">+</span>
! <span class="dmlbtn sz-sm style-tab-rt uppercase orange">!</span>
X <span class="dmlbtn sz-sm style-tab-rt uppercase red">X</span>
X <span class="dmlbtn sz-sm style-tab-rt uppercase gray">X</span> Use for inactive or unavailable items only.
    ? <span class="dmlbtn sz-sm style-tab-lt uppercase blue">?</span> style-tab-lt Use for left-oriented tabs.
    + <span class="dmlbtn sz-sm style-tab-lt uppercase green">+</span>
    ! <span class="dmlbtn sz-sm style-tab-lt uppercase orange">!</span>
    X <span class="dmlbtn sz-sm style-tab-lt uppercase red">X</span>
    X <span class="dmlbtn sz-sm style-tab-lt uppercase gray">X</span> Use for inactive or unavailable items only.

Do's and Dont's

The example below is spaced nicely and is easy to read:

Good Good Code Example
Click the X button to close the dialog. Click the <span class="dmlbtn sz-sm red">X</span> button to close the dialog.
Click the ? button to close the dialog. Click the <span class="dmlbtn sz-sm style-tab-lt blue">?</span> button to close the dialog.

The example below appears crowded and difficult to read because the spaces were left out before and after the button span:

Bad Bad Code Example
Click theXbutton to close the dialog. Click the<span class="dmlbtn sz-sm red">X</span>button to close the dialog.
Click the?button to close the dialog. Click the<span class="dmlbtn sz-sm style-tab-lt blue">?</span>button to close the dialog.

Elements for Wiki Staff

The elements below intended for use primarily by DML Wiki staff who may adjust the look and feel of site pages

Square\Rectangle Buttons - Medium & Large

Note: Medium sized buttons generally are for use only on widgets and the main page (for use by admins).

Sample(s) Code Notes
? & ! X X <span class="dmlbtn sz-med blue">?</span> Replace the text and the classes for color and modifiers as needed.
Elements Social
all dragons
Delete delete
<span class="dmlbtn sz-med uppercase blue">[[Elements]]</span>
<span class="dmlbtn sz-med capitalize orange">all dragons</span>
<span class="dmlbtn sz-med lowercase red">Delete</span>
Note: The "capitalize" class makes each word begin with a capital letter, use the class "uppercase" to put all letters in uppercase.
? & ! X X <span class="dmlbtn sz-lg blue">?</span> Replace the text and the classes for color and modifiers as needed.
Elements Social
all dragons
Delete delete
<span class="dmlbtn sz-lg uppercase blue">[[Elements]]</span>
<span class="dmlbtn sz-lg capitalize orange">all dragons</span>
<span class="dmlbtn sz-lg lowercase red">Delete</span>
Note: The "capitalize" class makes each word begin with a capital letter, use the class "uppercase" to put all letters in uppercase.


Round Buttons - Medium & Large

Sample(s) Code Notes
? <span class="dmlbtn sz-med style-cir blue">?</span> Replace the text and the classes for color and modifiers as needed.
x2 <span class="dmlbtn sz-med style-cir lt-blue">x2</span> Replace the text and the classes for color and modifiers as needed.
& <span class="dmlbtn sz-med style-cir green">&</span>
! <span class="dmlbtn sz-med style-cir orange">!</span>
X <span class="dmlbtn sz-med style-cir red">X</span>
X <span class="dmlbtn sz-med style-cir gray">X</span>
? <span class="dmlbtn sz-lg style-cir blue">?</span> Replace the text and the classes for color and modifiers as needed.
x2 <span class="dmlbtn sz-lg style-cir lt-blue">x2</span> Replace the text and the classes for color and modifiers as needed.
& <span class="dmlbtn sz-lg style-cir green">&</span>
! <span class="dmlbtn sz-lg style-cir orange">!</span>
X <span class="dmlbtn sz-lg style-cir red">X</span>
X <span class="dmlbtn sz-lg style-cir gray">X</span>


Tabs - Medium & Large Sized

Note: Medium sized tabs generally are for use only on widgets and the main page (for use by admins).

Sample(s) Code Notes
Elements <span class="dmlbtn sz-med style-tab uppercase blue">[[Elements]]</span> Top tab.
Elements <span class="dmlbtn sz-med style-tab uppercase green">[[Elements]]</span>
Elements <span class="dmlbtn sz-med style-tab uppercase orange">[[Elements]]</span>
Elements <span class="dmlbtn sz-med style-tab uppercase red">[[Elements]]</span>
Elements <span class="dmlbtn sz-med style-tab uppercase gray">[[Elements]]</span> Use gray for inactive or unavailable items only.
? <span class="dmlbtn sz-med style-tab-rt uppercase blue">?</span> style-tab-rt Use for right-oriented tabs.
+ <span class="dmlbtn sz-med style-tab-rt uppercase green">+</span>
! <span class="dmlbtn sz-med style-tab-rt uppercase orange">!</span>
X <span class="dmlbtn sz-med style-tab-rt uppercase red">#</span>
X <span class="dmlbtn sz-med style-tab-rt uppercase gray">X</span> Use for inactive or unavailable items only.
    ? <span class="dmlbtn sz-med style-tab-lt uppercase blue">?</span> style-tab-lt Use for left-oriented tabs.
    + <span class="dmlbtn sz-med style-tab-lt uppercase green">+</span>
    ! <span class="dmlbtn sz-med style-tab-lt uppercase orange">!</span>
    X <span class="dmlbtn sz-med style-tab-lt uppercase red">#</span>
    X <span class="dmlbtn sz-med style-tab-lt uppercase gray">X</span> Use for inactive or unavailable items only.
Elements <span class="dmlbtn sz-lg style-tab uppercase blue">[[Elements]]</span> Top tab.
Elements <span class="dmlbtn sz-lg style-tab uppercase green">[[Elements]]</span>
Elements <span class="dmlbtn sz-lg style-tab uppercase orange">[[Elements]]</span>
Elements <span class="dmlbtn sz-lg style-tab uppercase red">[[Elements]]</span>
Elements <span class="dmlbtn sz-lg style-tab uppercase gray">[[Elements]]</span> Use gray for inactive or unavailable items only.
? <span class="dmlbtn sz-lg style-tab-rt uppercase blue">?</span> style-tab-rt Use for right-oriented tabs.
+ <span class="dmlbtn sz-lg style-tab-rt uppercase green">+</span>
! <span class="dmlbtn sz-lg style-tab-rt uppercase orange">!</span>
X <span class="dmlbtn sz-lg style-tab-rt uppercase red">#</span>
X <span class="dmlbtn sz-lg style-tab-rt uppercase gray">X</span> Use for inactive or unavailable items only.
    ? <span class="dmlbtn sz-lg style-tab-lt uppercase blue">?</span> style-tab-lt Use for left-oriented tabs.
    + <span class="dmlbtn sz-lg style-tab-lt uppercase green">+</span>
    ! <span class="dmlbtn sz-lg style-tab-lt uppercase orange">!</span>
    X <span class="dmlbtn sz-lg style-tab-lt uppercase red">#</span>
    X <span class="dmlbtn sz-lg style-tab-lt uppercase gray">X</span> Use for inactive or unavailable items only.

DML Wiki & Font Awesome Icons

DML Wiki and also Font Awesome (web icons) can be easily added to buttons by adding simple shortcut codes.
NOTE:[editing of this section in progress...]

DML Wiki Icon Use

↓ The following table scrolls right → on mobile

Sample(s) Code Notes
skip all 35 Gems Icon.png <span class="dmlbtn sz-sm green uppercase"> skip all 35 {{i|Gems}}</span>
skip all 35 Gems Icon.png <span class="dmlbtn sz-med green uppercase"> skip all 35 {{i|Gems}}</span>
skip all 35 Gems Icon.png <span class="dmlbtn sz-lg green uppercase"> skip all 35 {{i|Gems}}</span>
   4 Enchantment Ticket Icon.png    <span class="dmlbtn sz-med green"> 4 {{i|Enchantment Ticket}}</span>
  Fusion     32Enchanted Trinkets Icon.png <span class="dmlbtn sz-med green uppercase">&nbsp;Fusion&nbsp;&nbsp;32{{i|Enchanted Trinkets}}</span> Spaces (wider than a typical space, as well as extra spaces) can be added using &nbsp;
ENCHANT  1.5M Gold Icon.png <span class="dmlbtn sz-med green uppercase">ENCHANT&nbsp;&nbsp;1.5M {{i|Gold}}</span> Spaces (wider than a typical space, as well as extra spaces) can be added using &nbsp;
AR Icon.png <span class="dmlbtn sz-med orange">{{i|AR}}</span>

Font Awesome Icons

↓ The following table scrolls right → on mobile

Sample(s) Code Notes
 BACK <span class="dmlbtn sz-med blue"><i class="fas fa-chevron-left"></i>&nbsp;BACK</span>
FORWARD  <span class="dmlbtn sz-med blue">FORWARD&nbsp;<i class="fas fa-chevron-right"></i></span>
 FOLD UP <span class="dmlbtn sz-med blue"><i class="fas fa-chevron-up"></i>&nbsp;FOLD UP</span>
UNFOLD  <span class="dmlbtn sz-med blue">UNFOLD&nbsp;<i class="fas fa-chevron-down"></i></span>
ANDROID  <span class="dmlbtn sz-med green">ANDROID&nbsp;<i class="fab fa-android"></i></span> Spaces (wider than a typical space as well as extra spaces) can be added using &nbsp;
iOS  <span class="dmlbtn sz-med green">iOS&nbsp;<i class="fab fa-apple"></i></span>
WINDOWS  <span class="dmlbtn sz-med green">WINDOWS&nbsp;<i class="fab fa-windows"></i></span>
 TRASH <span class="dmlbtn sz-med red"><i class="fas fa-trash-alt"></i>&nbsp;TRASH</span>
<span class="dmlbtn sz-med green flip"><i class="fas fa-search"></i></span> Note: If an icon is oriented the wrong way, the class "flip" can be added for horizontal flip and/or "flip-vert" for vertical flip.
<span class="dmlbtn sz-med green"><i class="fas fa-ellipsis-h"></i></span>
<span class="dmlbtn sz-med blue"><i class="fas fa-cog"></i></span>
<span class="dmlbtn sz-med orange"><i class="fas fa-eject"></i></span>
<span class="dmlbtn sz-med orange"><i class="fas fa-eject flip-vert"></i></span>

Combined Use

↓ The following table scrolls right → on mobile

Sample(s) Code Notes
  15,000 Gold Icon.png <span class="dmlbtn sz-med green uppercase"><i class="fas fa-redo-alt flip flip-vert"></i>&nbsp;&nbsp;15,000 {{i|Gold}}</span> The class "flip" can be added for horizontal flip, use "flip-vert" for vertical flip.

Homepage Elements

Item Code Description
     
<div class="orange-box"> Orange box (goes behind a white box).
Note: Divs are used for, spans are used for...
Example
<div class="white-inner">Example</div> Goes inside orange-box div.
Example
<div class="orange-box"><div class="white-inner">Example</div></div> Combines white-inner with orange-box to make a styled main page content box by placing the white-inner inside of the orange-box.
Example
Centered
<span class="dml-banner criss-cross">Example</span>
<span class="dml-banner criss-cross center">Example</span>
Draws banners from CSS code. Font sizes can be overridden by placing style="font-size:2em;" on the span.
E.g. <span class="dml-banner criss-cross" style="font-size:0.5em">Example</span>
Note: the banner will automatically stretch to the width of the parent container, so it needs to be placed inside of a column or other element.
Example
Example
<div class="orange-box">
<span class="dml-banner criss-cross">Example</span>
<div class="white-inner">Example</div>
</div>
Combines white-inner with orange-box to make a styled main page content box by placing the white-inner inside of the orange-box.

Miscellaneous (to be sorted and organized later)

Item Code Example Notes
Reference This is some test-text to style</ref><references/> [1]
  1. This is some test-text to style
Note <span class="note">'''Note''': This does something similar without needing an reference anchor</span> Note: This does something similar without needing an reference anchor
Note Box <div class="note-box" style="width:65%">This is a box for notes on a light background</div>
This is a box for notes on a light background
  • Bulleted list item
  • Bulleted list item
  • Bulleted list item
Is only meant for use on divs
Table scroll <div class="scroll-all">Table</div> Wrap tables in this to make them scroll on mobile.
Table min+max widths style="/* mobile */ width:100%; /* non */ max-width:600px;" Use this for DOTW/DOTM and other collapsible tables, not that these tables often also need <div class="scroll-all">
Float img column right <div class="float-r" style="max-width:30%">[[File:Game Updates.png]]</div>
Game Updates.png
This is some content to flow around the other content and see how it looks with the class in use. This looks like nothing but it resizes the image proportionally to width of screen. Do NOT set an image size for this.
Float an image right and set a max-width at the same time. This also adds margin-left and bottom to pad from content! Adjust width as appropriate for content!
Float img column left <div class="float-l" style="max-width:50%">[[File:Game Updates.png]]</div>
Game Updates.png
This is some content to flow around the other content and see how it looks with the class in use. This looks like nothing but it resizes the image proportionally to width of screen. Do NOT set an image size for this.
Float an image right and set a max-width at the same time. This also adds margin-right and bottom to pad from content! Adjust width as appropriate for content!
Hide on mobile <div class="float-r nomobile-640" style="max-width:30%">[[File:DLC Notification.jpg]]</div>
DLC Notification.jpg
This is some content to flow around the other content and see how it looks. When the screen is 640 px wide or less, this image will be hidden. Other classes are: nomobile (hide at 960 or less), nomobile-500, nomobile-400, nomobile-320.
Float an image right and set a max-width at the same time. This also adds margin-right and bottom to pad from content! Adjust width as appropriate for content!



Stuff to Fix Later (too many colors, hard to read)

This is just a placeholder for Crys to determine a different way to indicate event type. Perhaps a first cell 30px wide can have the background color and the rest can be normal style. Only a touch of the color is required to indicate event, not the entire table. This would make a little tab or flag-like first column to indicate event type (whole table colored isn't needed and poses an accessibility issue).

Event Position Time Period
Something Tier 1 3 June 2019 10 June 2019
Something Level 6 16 February 2018 26 February 2018
Something Tier 9 3 June 2019 10 June 2019
Something Level 6 16 February 2018 26 February 2018
Something Tier 9 3 June 2019 10 June 2019
Something Level 6 16 February 2018 26 February 2018
Something Tier 9 3 June 2019 10 June 2019
Something Level 6 16 February 2018 26 February 2018
Something Tier 9 3 June 2019 10 June 2019
Something Level 6 16 February 2018 26 February 2018
Something Tier 9 3 June 2019 10 June 2019
Something Level 6 16 February 2018 26 February 2018
Something Tier 9 3 June 2019 10 June 2019
Something Level 6 16 February 2018 26 February 2018
Something Level 6 16 February 2018 26 February 2018

Wiki Gameplay Elements category (pages + categories included)