Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

Dungeon World DST

Author: GM_Matt

Slug: dwdst

System: Dungeon World

DST Source Code

HTML Template

   <div class="basic_info dwdst">
		<div class="dwdst_container">
			<div class="dwdst_header">
				<div class="dwdst_name"><span class="dsf dsf_name"></span></div>
				<div class="dwdst_meta">
					<div>Player: <span class="dsf dsf_player"></span></div>
				
					<div>Campaign: <span class="dsf dsf_campaign"></span></div>
					
					<div>DST Author: <span class="dsf dsf_dst_author"></span></div>
					
				</div>
				<div class="dwdst_clear"></div>
			</div>
				
		<div class="dwdst_field_container"><div class="dwdst_field_label">Description</div><div class="dwdst_field"><span class="dsf dsf_look"></span></div></div>
		
		<div class="dwdst_clear"></div>
		
		<div class="dwdst_stat_container">
			<div class="dwdst_stat_score"><div class="dwdst_stat_label">Strength</div><span class="dsf dsf_strength"></span></div>
			<div class="dwdst_stat_debility">Weak: <span class="dsf dsf_weak checkbox"></span></div>
			<div class="dwdst_stat_mod"><span class="dsf dsf_str"></span><div class="dwdst_stat_label">STR</div></div>
		</div>
		
		<div class="dwdst_stat_container">
			<div class="dwdst_stat_score"><div class="dwdst_stat_label">Dexterity</div><span class="dsf dsf_dexterity"></span></div>
			<div class="dwdst_stat_debility">Shaky: <span class="dsf dsf_shaky checkbox"></span></div>
			<div class="dwdst_stat_mod"><span class="dsf dsf_dex"></span><div class="dwdst_stat_label">DEX</div></div>
		</div>
		
		<div class="dwdst_stat_container">
			<div class="dwdst_stat_score"><div class="dwdst_stat_label">Constitution</div><span class="dsf dsf_constitution"></span></div>
			<div class="dwdst_stat_debility">Sick: <span class="dsf dsf_sick checkbox"></span></div>
			<div class="dwdst_stat_mod"><span class="dsf dsf_con"></span><div class="dwdst_stat_label">CON</div></div>
		</div>
		
		<div class="dwdst_stat_container">
			<div class="dwdst_stat_score"><div class="dwdst_stat_label">Intelligence</div><span class="dsf dsf_intelligence"></span></div>
			<div class="dwdst_stat_debility">Stunned: <span class="dsf dsf_stunned checkbox"></span></div>
			<div class="dwdst_stat_mod"><span class="dsf dsf_int"></span><div class="dwdst_stat_label">INT</div></div>
		</div>
		
		<div class="dwdst_stat_container">
			<div class="dwdst_stat_score"><div class="dwdst_stat_label">Wisdom</div><span class="dsf dsf_wisdom"></span></div>
			<div class="dwdst_stat_debility">Confused: <span class="dsf dsf_confused checkbox"></span></div>
			<div class="dwdst_stat_mod"><span class="dsf dsf_wis"></span><div class="dwdst_stat_label">WIS</div></div>
		</div>
		
		<div class="dwdst_stat_container">
			<div class="dwdst_stat_score"><div class="dwdst_stat_label">Charisma</div><span class="dsf dsf_charisma"></span></div>
			<div class="dwdst_stat_debility">Scarred: <span class="dsf dsf_scarred checkbox"></span></div>
			<div class="dwdst_stat_mod"><span class="dsf dsf_cha"></span><div class="dwdst_stat_label">CHA</div></div>
		</div>
		
		<div class="dwdst_clear"></div>
		
		<div class="dwdst_combatstats_container">
			<div class="dwdst_combatstats_label">Damage</div>
			<div class="dwdst_combatstats_field"><span class="dsf dsf_damage"></span></div>
			<div class="dwdst_combatstats_flourish">&nbsp;</div>
		</div>
		
		<div class="dwdst_combatstats_container">
			<div class="dwdst_combatstats_label">Armor</div>
			<div class="dwdst_combatstats_field"><span class="dsf dsf_armor"></span></div>
			<div class="dwdst_combatstats_flourish">&nbsp;</div>
		</div>
		
		<div class="dwdst_combatstats_container">
			<div class="dwdst_combatstats_label">HP</div>
			<div class="dwdst_combatstats_field dwdst_hp"><span class="dsf dsf_hp_current"></span><hr /><span class="dsf dsf_hp_max"></span></div>
			<div class="dwdst_combatstats_flourish">&nbsp;</div>
		</div>
		
		<div class="dwdst_clear"></div>
		
		
		<div class="dwdst_field_container"><div class="dwdst_field_label">Alignment</div><div class="dwdst_field"><span class="dsf dsf_alignment"></span></div></div>
		
		<div class="dwdst_clear"></div>
		
		<div class="dwdst_field_container"><div class="dwdst_field_label">Race</div><div class="dwdst_field"><span class="dsf dsf_race"></span></div></div>
		
		<div class="dwdst_clear"></div>
		
		<div class="dwdst_field_container"><div class="dwdst_field_label">Bonds</div><div class="dwdst_field"><span class="dsf dsf_bonds"></span></div></div>
		
		<div class="dwdst_clear"></div>
		
		<div class="dwdst_field_container"><div class="dwdst_field_label">Starting Moves</div><div class="dwdst_field"><span class="dsf dsf_starting_moves"></span></div></div>
		
		<div class="dwdst_clear"></div>
		
		<div class="dwdst_field_container"><div class="dwdst_field_label">Gear</div><div class="dwdst_field">
			<div class="dwdst_load_container"><div>Load</div><span class="dsf dsf_load"></span>/<span class="dsf dsf_maxload"></span></div>
			
			<div class="dwdst_load_container"><div>Coins</div><span class="dsf dsf_coins"></span></div>
			
			<div class="dwdst_load_container"><div>Rations</div><span class="dsf dsf_rations"></span></div>
		
		<span class="dsf dsf_gear"></span></div></div>
		
		<div class="dwdst_clear"></div>
		
		<div class="dwdst_field_container"><div class="dwdst_field_label">Advanced Moves</div><div class="dwdst_field"><span class="dsf dsf_advanced_moves"></span></div></div>
		
		<div class="dwdst_clear"></div>
		
		<div class="dwdst_field_container"><div class="dwdst_field_label">Bio</div><div class="dwdst_field"><span class="dsf dsf_bio"></span></div></div>
		
		<div class="dwdst_clear"></div>
	</div>
	</div>

CSS

/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */
.dwdst html, .dwdst body, .dwdst div, .dwdst span, .dwdst object, .dwdst iframe,.dwdst h1, .dwdst h2, .dwdst h3, .dwdst h4, .dwdst h5, .dwdst h6, .dwdst p, .dwdst blockquote, .dwdst pre,.dwdst abbr, .dwdst address, .dwdst cite, .dwdst code,.dwdst del, .dwdst dfn, .dwdst em, .dwdst img, .dwdst ins, .dwdst kbd, .dwdst q, .dwdst samp,.dwdst small, .dwdst strong, .dwdst sub, .dwdst sup, .dwdst var,.dwdst b, .dwdst i,.dwdst dl, .dwdst dt, .dwdst dd, .dwdst ol, .dwdst ul, .dwdst li,.dwdst fieldset, .dwdst form, .dwdst label, .dwdst legend,.dwdst table, .dwdst caption, .dwdst tbody, .dwdst tfoot, .dwdst thead, .dwdst tr, .dwdst th, .dwdst td,.dwdst article, .dwdst aside, .dwdst canvas, .dwdst details, .dwdst figcaption, .dwdst figure,.dwdst footer, .dwdst header, .dwdst hgroup, .dwdst menu, .dwdst nav, .dwdst section, .dwdst summary,.dwdst time, .dwdst mark, .dwdst audio, .dwdst video {    margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}
.dwdst body {    line-height:1;}
.dwdst article,.dwdst aside,.dwdst details,.dwdst figcaption,.dwdst figure,.dwdst footer,.dwdst header,.dwdst hgroup,.dwdst menu,.dwdst nav,.dwdst section {    display:block;}
.dwdst nav ul {    list-style:none;}
.dwdst blockquote, .dwdst q {    quotes:none;}
.dwdst blockquote:before, .dwdst blockquote:after,.dwdst q:before, .dwdst q:after {    content:'';    content:none;}
.dwdst a {    margin:0;    padding:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}
/* change colours to suit your needs */.dwdst ins {    background-color:#ff9;    color:#000;    text-decoration:none;}
/* change colours to suit your needs */.dwdst mark {    background-color:#ff9;    color:#000;    font-style:italic;    font-weight:bold;}
.dwdst del {    text-decoration: line-through;}
.dwdst abbr[title], .dwdst dfn[title] {    border-bottom:1px dotted;    cursor:help;}
.dwdst table {    border-collapse:collapse;    border-spacing:0;}
/* change border colour to suit your needs */.dwdst hr {    display:block;    height:1px;    border:0;    border-top:1px solid #cccccc;    margin:1em 0;    padding:0;}
.dwdst input, .dwdst select {    vertical-align:middle;}
	
/* End Reset	*/
	
.dwdst a:link, .dwdst a:hover, .dwdst a:active, .dwdst a:visited {color: #fff; text-decoration: none;}

.dwdst .dwdst_container {border: 1px #333 solid; margin: 0; color: #333;}

.dwdst .dwdst_header {color: #fff; background: #333; padding: 10px;}

.dwdst .dwdst_name {font-size: 3em; font-weight: bold; text-transform: uppercase;}

.dwdst .dwdst_meta {font-size: .7em;}
.dwdst .dwdst_meta div {float: left; margin-right: 15px;}
.dwdst .dwdst_meta  span {font-style: italic;}

.dwdst .dwdst_field_container { margin: 2px;}
.dwdst .dwdst_field_label {padding: 10px; background: #333; color: #fff; width: 135px; margin-top: 20px; margin-right: -12px; z-index: 5; font-weight: bold;}
.dwdst .dwdst_field {float: left; background: #f3f3f3; border: 5px #333 solid; padding: 10px; margin: 0 2px 2px 0; width: 650px; z-index: 2; font-weight: bold; font-size: .8em;}
.dwdst .dwdst_field_label:after {width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #333;
	position: absolute;
	content: ""; left: 166px; margin-top: -11px; z-index: 1;}

.dwdst .dwdst_stat_container {float: left; border: 5px #333 solid; margin: 2px; width: 100px;}
.dwdst .dwdst_stat_label {font-size: .3em;}
.dwdst .dwdst_stat_score {background: #eaeaea; font-size: 2em; font-weight: bold; padding: 10px; text-align: center;}
.dwdst .dwdst_stat_debility {background: #333; color: #fff; font-style: italic; padding: 5px;}
.dwdst .dwdst_stat_debility span {float: right;}
.dwdst .dwdst_stat_mod {background: #f3f3f3; font-size: 2em; font-weight: bold; padding: 10px; text-align: center;}

.dwdst .dwdst_combatstats_container {float: left; margin :2px;}
.dwdst .dwdst_combatstats_container  hr{height: 5px; background: #333; border: 0; margin: 0; padding: 0;}

.dwdst .dwdst_combatstats_label {padding: 10px; background: #333; color: #fff; width: 85px; float: left; margin-top: 20px; margin-right: -12px; z-index: 5; font-weight: bold;}
.dwdst .dwdst_combatstats_field {float: left; border: 5px #333 solid; height: 65px; width: 75px; background: #f3f3f3; font-size: 2em; font-weight: bold; text-align: center; padding-top: 13px;}
.dwdst .dwdst_hp {font-size: 1.5em; padding: 3px 0 10px 0;}
.dwdst .dwdst_combatstats_flourish {padding: 10px; background: #333; float: left; width: 25px; margin-top: 20px;}

.dwdst .dwdst_load_container {border: 5px #333 solid; float: right; margin: 5px; height: 50px; width: 50px; font-size: .8em; font-weight: bold; text-align: center; background: #eaeaea;}

.dwdst .dwdst_load_container>div{background: #333; color: #fff; padding: 2px; margin-bottom: 5px;}

.dwdst .dwdst_clear {clear:both;}

Javascript

Back

Dungeon World DST

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account