Cookies help us deliver our services. By using our services, you agree to our use of cookies. More information

We are currently changing the style and appearance of the wiki to a single, fluid/responsive theme that stretches, shrinks and reflows the content across different device sizes. This means no more switching between different desktop or mobile themes. Also, some things have moved and the text sizes and placement of things may look misaligned or a bit odd until we are finished. We are working hard on it - promise.
Please report issues in the Forum

 Actions

User

Cryscryb2

From Dragon Mania Legends Wiki

Moderator 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! :)


This is some content to fit in a box and then scroll when it overflows so I can test out various solutions to the no scroll bar in iOS that lets users know when there is more content. When scrollbars are hidden without a down arrow or cut-off content to tell that there is more, users will have no idea to scroll! This is annoying when content fits perfectly and there is no indication on iOS that there is more content (e.g., mainpage slider does this for events which is not ideal).

Header text Header text Header text
Example Example Example
Example Example Example
Example Example Example

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

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!


Examples

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