Dozerfleet Rating System/How to create TVPG-style ratings

In addition to the MPAA and Comic Genesis, DRS takes heavy inspiration from the TV Content Parental Guidelines rating system used on US television. The following tutorial gives code on how to implement a widget on your web pages that allows you to display TVPG system ratings for TV shows on your TV-themed site, without the need to use images.

MediaWiki syntax
This is an imitation of the TV Content Parental Guidelines system, using MediaWiki. The source code for that template on this site looks like this:

Making an HTML widget
To convert to an HTML widget for non-MediaWiki, you would start by copying the following codes.

CSS
This is the basic CSS that you would need for this rating system to be displayed on an HTML page that is not MediaWiki-based. Bear in mind that you may wish to add a  tag to the   line based on your size requirements. Likewise adjust the font scales on the sub-elements according to your specific needs.

.comicgenesisrating { border-radius:0!important; font-weight:bold; display:table; font-weight:bold; font-family:Arial; }

.cg-web-header { font-size:70%; text-align:center; display:table-cell; font-weight:bold; padding-top:2px; padding-bottom:1px; padding-left:4px; padding-right:4px; }

.cg-row { display:table-row; }

.cg-rating-region { text-align:center; display:table-cell; font-weight:bold; padding-top:1px; padding-bottom:1px; padding-left:4px; padding-right:4px; }

.tvpg-explain { font-size:50%; text-align:center; font-weight:bold; }

White-on-black text version
If you want the version of white text on a black background, you would want this code:

.cg-wob { background:black; color:white; border:2px solid white; }

HTML
This is a sample of what your HTML may wind up looking like:

TV   14 DLSV

Note that unlike the MediaWiki widget, the HTML widget includes a field for including additional content flags. This is achieved in MedaiWiki by including a break line after the main rating and including a span with 50% font size. The HTML widget also uses DIV pseudo-tables instead of actual table elements, per modern style etiquette.