It is done - we hope you like our new style.
Please remember to make use of the Manual of Style and Code of Conduct during your stay on the wiki.

 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! :) Cryscryb2 (talk) 21:10, 30 October 2019 (UTC)

Horizontal

Hatching Event.png

VIP Status Icon.png

This is an event title example

Time goes here

Feeding Event.png

VIP Status Icon.png

This is a longer event title example

Time goes here




Vertical

Hatching Event.png

VIP Status Icon.png

This is an event title that goes below but can't overflow because overflow turns into ellipses

Time goes here

Feeding Event.png

VIP Status Icon.png

This is an event title that goes below but can't overflow because overflow turns into ellipses
Time goes here





CRYS'S PROFILE

Freyja Dragon


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

These styles are not yet complete and should not yet be used throughout the site, unless it is for testing purposes only. All of the styles listed will be templated at a later date to unify their look and feel as well as for easier use. This will also prevent the use of inline styles (styles added in-page) as these cause maintenance issues. Styles will instead be controlled globally across the wiki to minimize maintenance when colors or styles change in-game. This means when a color or shape changes, it is changed once in one place (by the CSS caretaker) and it cascades across the site. Or, if the button templates (once created) change, they are changed once in one place (by the Template caretaker) and it cascades across the site... maintenance magic! :)


The following are a series of reusable styles that can be placed in any wiki page or template to automatically style various elements. The elements contain now images aside from icons and are fully generated by CSS, which means each button is translatable instead of fixed in a single language via an image. The purpose is that implementation of this will be simplified and will eventually allow the whole site (aside from ads and screenshot items) to be translated into any language and re-used across languages if/when page translations are implemented, without having to multiply the overhead of images. This also shortens page load times and reduces the need to re-upload images when in-game styles change. One tweak to the global styles will cascade and effect all items as desired to greatly reduce maintenance.

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.

Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues. Please also do not use sz-medium or sz-large buttons in paragraph text. Please do not use the styles until they are templated to prevent maintenance issues.

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-sm
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-sm style-tab green uppercase <span class="dmlbtn sz-sm 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. Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues.

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

Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues. ↓ 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

Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues. ↓ 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

Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues. 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. Please do not use sz-sm and sz-lg buttons in paragraph text, they are intended for use in the homepage, widgets and other special layouts. Please also do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues.

(Removed medium and large buttons for now)

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...] Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues. Please also do not use sz-medium or sz-large styles for buttons that occur inside of a paragraph, use sz-sm instead.

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> This is the correct size of button to use within paragraphs of text (inline).
   4 Enchantment Ticket Icon.png    <span class="dmlbtn sz-sm green"> 4 {{i|Enchantment Ticket}}</span>
  Fusion     32Enchanted Trinkets Icon.png <span class="dmlbtn sz-sm 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-sm 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-sm orange">{{i|AR}}</span>

Font Awesome Icons

Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues. ↓ The following table scrolls right → on mobile

Sample(s) Code Notes
 BACK <span class="dmlbtn sz-sm blue"><i class="fas fa-chevron-left"></i>&nbsp;BACK</span>
FORWARD  <span class="dmlbtn sz-sm blue">FORWARD&nbsp;<i class="fas fa-chevron-right"></i></span>
 FOLD UP <span class="dmlbtn sz-sm blue"><i class="fas fa-chevron-up"></i>&nbsp;FOLD UP</span>
UNFOLD  <span class="dmlbtn sz-sm blue">UNFOLD&nbsp;<i class="fas fa-chevron-down"></i></span>
ANDROID  <span class="dmlbtn sz-sm 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-sm green">iOS&nbsp;<i class="fab fa-apple"></i></span>
WINDOWS  <span class="dmlbtn sz-sm green">WINDOWS&nbsp;<i class="fab fa-windows"></i></span>
 TRASH <span class="dmlbtn sz-sm red"><i class="fas fa-trash-alt"></i>&nbsp;TRASH</span>
<span class="dmlbtn sz-sm 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-sm green"><i class="fas fa-ellipsis-h"></i></span>
<span class="dmlbtn sz-sm blue"><i class="fas fa-cog"></i></span>
<span class="dmlbtn sz-sm orange"><i class="fas fa-eject"></i></span>
<span class="dmlbtn sz-sm orange"><i class="fas fa-eject flip-vert"></i></span>

Combined Use

Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues. ↓ The following table scrolls right → on mobile

Sample(s) Code Notes
  15,000 Gold Icon.png <span class="dmlbtn sz-sm 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

Please do not add in-line styles to buttons (styles in the body of a page) as styles for buttons should be controlled globally to prevent maintenance issues.

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).

Wiki Gameplay Elements category (pages + categories included)