Dozerfleet rating system/How to convert the DRS template to HTML

The following is a guide on how to convert the DRS templates on this wiki into an HTML widget that is resource-dependent on a CSS file, for use of the DRS on non-wiki sites and on wikis that don't use MediaWiki syntax.

CSS
Here's how to make an HTML/CSS resource-dependent implementation for DRS in plain, plain-with-border, white-on-black, and gold-on-black.

We'll start by storing the CSS data inside a separate file dubbed "drsratings.css":

/*--The following defines the style data for DRS labels.--*/

div.drs { margin-top:10px; padding:5px; font-size:; display:inline; border-radius:0!important; font-family:Impact,Arial; }

.drs-width-control { width:32px; }

/*--White Text-on-Black--*/ .drs-wob { background:black; color:white; border:2px solid white; }

/*--Black Text-on-Transparent-or-White with Black Border--*/ .drs-bwb { border:2px solid black; }

/*--Gold Text-on-Black with Gold Border--*/

.drs-gob { background:black; color:gold; border:2px solid gold; }

HTML
To reference the above file, your HTML should include in its head:

@import url('drsratings.css');

Customize the URL import setting according to the CSS file's exact location.

And to then assign a 32px-width DRS gold-on-black image of the 13-Up rating:

13 &uarr;