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

Fantasy A.G.E. - Simple

Slug: fage_simple

System: Fantasy Age

DST Source Code

Note: This is the latest, unapproved DST code. Only the DST author can use an unapproved DST, and even then only they can see it. If it's a new DST, then it's invisible to everyone else. If modifying a previously approved DST, then everyone else uses the most recent approved version.

HTML Template

<div class="wrapper csx">

	<div class="uicontainer">

		<div class="formatBar">
			<button type="button" class="boldButton" title="Bold (Ctrl+B)"></button>
			<button type="button" class="italicButton" title="Italic (Ctrl+I)"></button>
			<button type="button" class="underlineButton" title="Underline (Ctrl+U)"></button>
			<button type="button" class="indentButton" title="Indent (Ctrl+Tab)"></button>
		</div>

		<div class="tipBox">
			<div class="corner topLeft"></div>
			<div class="corner topRight"></div>
			<div class="corner bottomLeft"></div>
			<div class="corner bottomRight"></div>
			<div class="contentBox">
				<div class="tipArea edit"></div>
			</div>
		</div>

	</div>

	<!-- Main Character Sheet Page Background Div -->
	<div class="content">

		<!-- General Character Information 724pxw -->
		<div class="top" style="">

			<span class="linefield dsf dsf_name readonly" style="width:232px;text-align:left;"></span
			><span class="boxfield box51 dsf dsf_level" style="top:2px;"></span
			><span class="linefield dsf dsf_class" style="width:120px;"></span
			><span class="boxfield box51 dsf dsf_xp" style="top:2px;"></span>

			<div class="labelrow" style="white-space:nowrap;">
				<span class="lable" style="width:232px;text-align:left;">Character Name</span
				><span class="lable w51" style="margin-left:2px;">Level</span
				><span class="lable" style="width:120px;">Class</span
				><span class="lable w51" style="margin-left:1px;">Total XP</span>
			</div>

			<span class="linefield dsf dsf_race" style="width:142px;text-align:left;"></span
			><span class="linefield dsf dsf_age" style="width:38px;"></span
			><span class="linefield dsf dsf_gender" style="width:38px;"></span
			><span class="linefield dsf dsf_height" style="width:38px;"></span
			><span class="linefield dsf dsf_weight" style="width:38px;"></span>
			<span class="linefield dsf dsf_background" style="width:142px;text-align:left;"></span>

			<div class="labelrow" style="white-space:nowrap;">
				<span class="lable" style="width:142px;text-align:left;">Race</span
				><span class="lable" style="width:38px;">Age</span
				><span class="lable" style="width:38px;">Gender</span
				><span class="lable" style="width:38px;">Height</span
				><span class="lable" style="width:38px;">Weight</span>
				<span class="lable" style="width:142px;text-align:left;">Background</span>
			</div>
		</div>

		<!-- Crunch Page -->
		<div class="main page page_crunch">

			<!-- Column One -->
			<div class="column">

				<!-- Ability Scores Block -->
				<div class="section" style="min-height:178px;left:0px;">
					<div class="header">ABILITY SCORES</div>
					<!-- Accuracy -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_accuracy"></span>
						<span class="readonly check dsf dsf_accuracy_primary"></span>
						<span class="valtitle">Accuracy</span>
					</div>
					<div class="lable listhead">Accuracy Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_accuracyFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_accuracyFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_accuracyFocus fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_accuracyFocuses readonly hidden"></span>
					</ul>
					<!-- Communication -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_communication"></span>
						<span class="readonly check dsf dsf_communication_primary"></span>
						<span class="valtitle">Communication</span>
					</div>
					<div class="lable listhead">Communication Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_communicationFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_communicationFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_communicationFocus fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_communicationFocuses readonly hidden"></span>
					</ul>
					<!-- Constitution -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_constitution"></span>
						<span class="readonly check dsf dsf_constitution_primary"></span>
						<span class="valtitle">Constitution</span>
					</div>
					<div class="lable listhead">Constitution Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_constitutionFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_constitutionFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_constitutionFocuses fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_constitutionFocuses readonly hidden"></span>
					</ul>
					<!-- Dexterity -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_dexterity"></span>
						<span class="readonly check dsf dsf_dexterity_primary"></span>
						<span class="valtitle">Dexterity</span>
					</div>
					<div class="lable listhead">Dexterity Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_dexterityFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_dexterityFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_dexterityFocus fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_dexterityFocuses readonly hidden"></span>
					</ul>
					<!-- Fighting -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_fighting"></span>
						<span class="readonly check dsf dsf_fighting_primary"></span>
						<span class="valtitle">Fighting</span>
					</div>
					<div class="lable listhead">Fighting Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_fightingFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_fightingFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_fightingFocus fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_fightingFocuses readonly hidden"></span>
					</ul>
					<!-- Intelligence -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_intelligence"></span>
						<span class="readonly check dsf dsf_intelligence_primary"></span>
						<span class="valtitle">Intelligence</span>
					</div>
					<div class="lable listhead">Intelligence Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_intelligenceFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_intelligenceFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_intelligenceFocus fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_intelligenceFocuses readonly hidden"></span>
					</ul>
					<!-- Perception -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_perception"></span>
						<span class="readonly check dsf dsf_perception_primary"></span>
						<span class="valtitle">Perception</span>
					</div>
					<div class="lable listhead">Perception Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_perceptionFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_perceptionFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_perceptionFocus fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_perceptionFocuses readonly hidden"></span>
					</ul>
					<!-- Strength -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_strength"></span>
						<span class="readonly check dsf dsf_strength_primary"></span>
						<span class="valtitle">Strength</span>
					</div>
					<div class="lable listhead">Strength Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_strengthFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_strengthFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_strengthFocus fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_strengthFocuses readonly hidden"></span>
					</ul>
					<!-- Willpower -->
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_willpower"></span>
						<span class="readonly check dsf dsf_willpower_primary"></span>
						<span class="valtitle">Willpower</span>
					</div>
					<div class="lable listhead">Willpower Focuses
						<span class="interface trash"></span>
						<span class="interface add addto_willpowerFocuses" title="Add Focus"></span>
					</div>
					<ul class="group list list_willpowerFocuses">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_willpowerFocus fullcolumn singlerow" defaultString="Focus">Focus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_willpowerFocuses readonly hidden"></span>
					</ul>
				</div>

			</div><div class="column gutter">
			<!-- Column Two -->

				<!-- Attacks Block -->
				<div class="section" style="min-height:97px;left:0px;min-height:74px\9">
					<div class="header">ATTACKS</div>

					<div class="lable listhead">Attack
						<span class="interface trash"></span>
						<span class="interface add addto_attacks" title="Add Attack"></span>
					</div>
					<ul class="group list list_attacks">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_type fullcolumn singlerow headeredit" defaultString="Attack Type">Attack Type</span>
							<div class="labelrow" style="margin-top:5px;">
								<div class="lable w51 attackbox">Attack D6</div>
								<div class="lable w24 right">Misc</div>
								<div class="lable w24 right">Abil</div>
								<div class="lable w24 right">Enh</div>
								<div class="lable w24 right">Wpn</div>
							</div>
							<div class="valbar">
								<span class="edit boxfield box51 attackbox dslf dslf_attack_hit_dice"></span>
								<span class="edit boxfield right dslf dslf_attack_hit_misc"></span>
								<span class="edit boxfield right dslf dslf_attack_hit_ability"></span>
								<span class="edit boxfield right dslf dslf_attack_hit_enhancement"></span>
								<span class="edit boxfield right dslf dslf_attack_hit_weapon"></span>
							</div>
							<div class="labelrow">
								<div class="lable w51 attackbox">Damage D6</div>
								<div class="lable w24 right">Misc</div>
								<div class="lable w24 right">Abil</div>
								<div class="lable w24 right">Enh</div>
								<div class="lable w24 right">Wpn</div>
							</div>
							<div class="valbar">
								<span class="edit boxfield box51 attackbox dslf dslf_attack_damage_dice"></span>
								<span class="edit boxfield right dslf dslf_attack_damage_misc"></span>
								<span class="edit boxfield right dslf dslf_attack_damage_ability"></span>
								<span class="edit boxfield right dslf dslf_attack_damage_enhancement"></span>
								<span class="edit boxfield right dslf dslf_attack_damage_weapon"></span>
							</div>
							<div class="labelrow">
								<div class="lable">Range</div>
								<div class="lable w51 right">Long</div>
								<div class="lable w51 right">Short</div>
							</div>
							<div class="valbar">
								<span class="edit boxfield box51 right dslf dslf_attack_range_long"></span>
								<span class="edit boxfield box51 right dslf dslf_attack_range_short"></span>
							</div>
							<div class="labelrow">
								<div class="lable">Notes</div>
							</div>
							<div class="textblock">
								<span class="edit fullcolumn dslf dslf_attack_notes"></span>
							</div>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_attacks readonly hidden"></span>
					</ul>
				</div>

				<!-- Spells Block -->
				<div class="section" style="min-height:97px;left:0px;min-height:74px\9">
					<div class="header">SPELLS</div>

					<div class="lable listhead">Spell
						<span class="interface trash"></span>
						<span class="interface add addto_spells" title="Add Spell"></span>
					</div>
					<ul class="group list list_spells">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_spell_name fullcolumn singlerow headeredit" defaultString="Spell Name">Spell Name</span>
							<span class="tip dslf dslf_spell_text"></span>
							<span class="edit dslf dslf_spell_arcana fullcolumn singlerow" defaultString="Arcana">Arcana</span>
							<div class="labelrow" style="margin-top:5px;">
								<div class="lable w51">MP Cost</div>
								<div class="lable w51">TN</div>
								<div class="lable w51">Cast Time</div>
								<div class="lable w51">Duration</div>
							</div>
							<div class="valbar">
								<span class="edit boxfield box51 dslf dslf_spell_mp_cost"></span>
								<span class="edit boxfield box51 dslf dslf_spell_tn"></span>
								<span class="edit boxfield box51 dslf dslf_spell_time"></span>
								<span class="edit boxfield box51 dslf dslf_spell_duration"></span>
							</div>
							<div class="labelrow">
								<div class="lable">Effect</div>
							</div>
							<div class="textblock">
								<span class="edit fullcolumn dslf dslf_spell_effect"></span>
							</div>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_spells readonly hidden"></span>
					</ul>
				</div>

			</div><div class="column gutter">
			<!-- Column Three -->

				<!-- Defense / Armor Block -->
				<div class="section" style="min-height:60px;">
					<div class="header">DEFENSE / ARMOR</div>
					<div class="labelrow" style="white-space:nowrap;">
						<span class="lable w51">Defense</span>
						<span class="lable w51">Armor</span>
						<span class="lable w51">Penalty</span>
					</div>
					<span class="boxfield box51 dsf dsf_defense"></span>
					<span class="boxfield box51 dsf dsf_armor"></span>
					<span class="boxfield box51 dsf dsf_penalty"></span>
					<div class="labelrow">
						<div class="lable">Equipped Armor</div>
					</div>
					<div class="textblock">
						<span class="edit fullcolumn dsf dsf_equipped_armor"></span>
					</div>
				</div>

				<!-- Hit Points Block -->
				<div class="section" style="min-height:60px;">
					<div class="header">HIT POINTS</div>
					<div class="labelrow" style="white-space:nowrap;">
						<span class="lable w51">Current</span>
						<span class="lable w51">Max HP</span>
					</div>
					<span class="boxfield box51 dsf dsf_hit_points_current"></span>
					<span class="boxfield box51 dsf dsf_hit_points"></span>
				</div>

				<!-- Magic Points Block -->
				<div class="section" style="min-height:60px;">
					<div class="header">MAGIC POINTS</div>
					<div class="labelrow" style="white-space:nowrap;">
						<span class="lable w51">Current</span>
						<span class="lable w51">Max MP</span>
					</div>
					<span class="boxfield box51 dsf dsf_magic_points_current"></span>
					<span class="boxfield box51 dsf dsf_magic_points"></span>
				</div>

				<!-- Movement Speeds Block -->
				<div class="section" style="min-height:70px;left:0px;min-height:50px\9">
					<div class="header">MOVEMENT</div>
					<div class="labelrow">
						<span class="lable w28">Speed</span>
						<span class="lable w24 right">Move</span>
						<span class="lable w24 right">Chrg</span>
						<span class="lable w24 right">Run</span>
					</div>
					<div class="valbar">
						<span class="boxfield box28 dsf dsf_speed"></span>
						<span class="valtitle">Speed</span>
						<span class="boxfield right dsf dsf_speed_move"></span>
						<span class="boxfield right dsf dsf_speed_charge"></span>
						<span class="boxfield right dsf dsf_speed_run"></span>
					</div>
				</div>

				<!-- Racial Features Block -->
				<div class="section" style="min-height:42px;left:0px;min-height:40px\9">
					<div class="header">RACE FEATURES</div>

					<div class="lable listhead">Feature
						<span class="interface trash"></span>
						<span class="interface add addto_raceFeature" title="Add Feature"></span>
					</div>
					<ul class="group list list_raceFeature">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_mod fullcolumn singlerow" defaultString="Feature">Feature</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_raceFeature readonly hidden"></span>
					</ul>
				</div>

				<!-- Class Features Block -->
				<div class="section" style="min-height:42px;left:0px;min-height:40px\9">
					<div class="header">CLASS FEATURES</div>

					<div class="lable listhead">Feature
						<span class="interface trash"></span>
						<span class="interface add addto_classFeature" title="Add Feature"></span>
					</div>
					<ul class="group list list_classFeature">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_mod fullcolumn singlerow" defaultString="Feature">Feature</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_classFeature readonly hidden"></span>
					</ul>
				</div>

				<!-- Weapon Groups Block -->
				<div class="section" style="min-height:42px;left:0px;min-height:40px\9">
					<div class="header">WEAPON GROUPS</div>

					<div class="lable listhead">Weapon Group
						<span class="interface trash"></span>
						<span class="interface add addto_classWeaponGroup" title="Add Weapon Group"></span>
					</div>
					<ul class="group list list_classWeaponGroup">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_mod fullcolumn singlerow" defaultString="Weapon Group">Weapon Group</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_classWeaponGroup readonly hidden"></span>
					</ul>
				</div>

				<!-- Talents Block -->
				<div class="section" style="min-height:42px;left:0px;min-height:40px\9">
					<div class="header">TALENTS</div>

					<div class="lable listhead">Talent
						<span class="interface trash"></span>
						<span class="interface add addto_talents" title="Add Talent"></span>
					</div>
					<ul class="group list list_talents">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_mod fullcolumn singlerow" defaultString="Talent (Degree)">Talent (Degree)</span>
							<span class="link_address dslf dslf_link"></span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_talents readonly hidden"></span>
					</ul>
				</div>

				<!-- Specializations Block -->
				<div class="section" style="min-height:42px;left:0px;min-height:40px\9">
					<div class="header">SPECIALIZATIONS</div>

					<div class="lable listhead">Specialization
						<span class="interface trash"></span>
						<span class="interface add addto_specializations" title="Add Specialization"></span>
					</div>
					<ul class="group list list_specializations">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_mod fullcolumn singlerow" defaultString="Specialization (Degree)">Specialization (Degree)</span>
							<span class="link_address dslf dslf_link"></span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_specializations readonly hidden"></span>
					</ul>
				</div>

				<!-- Coin Block -->
				<div class="section" style="min-height:60px;">
					<div class="header">COIN</div>
					<div class="labelrow" style="white-space:nowrap;">
						<span class="lable w51">Gold</span>
						<span class="lable w51">Silver</span>
						<span class="lable w51">Copper</span>
					</div>
					<span class="boxfield box51 dsf dsf_coin_gold"></span>
					<span class="boxfield box51 dsf dsf_coin_silver"></span>
					<span class="boxfield box51 dsf dsf_coin_copper"></span>
				</div>

				<!-- Equipment Block -->
				<div class="section" style="min-height:142px;left:0px;min-height:122px\9">
					<div class="header">EQUIPMENT</div>

					<div class="lable listhead">Item
						<span class="interface trash"></span>
						<span class="interface add addto_items" title="Add Item"></span>
					</div>
					<ul class="group list list_items">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_mod fullcolumn singlerow" defaultString="Item">Item</span>
							<span class="link_address dslf dslf_link"></span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_items readonly hidden"></span>
					</ul>
				</div>

			</div>

		</div>

		<!-- Fluff Page -->
		<div class="main page page_fluff" style="min-height:400px;margin-bottom:-4px;">

			<div class="column">

				<div style="margin:0px 4px 4px 4px;">
					<span style="display:inline-block;width:234px;margin-left:6px;">
						<span class="dsf dsf_avatar_image readonly" style="width:234px"></span>
					</span>
				</div>

				<!-- Backgrounds Block -->
				<div class="section" style="min-height:44px;left:0px;min-height:35px\9">
					<div class="header">BACKGROUNDS</div>

					<div class="lable listhead">Background
						<span class="interface trash"></span>
						<span class="interface add addto_backgrounds" title="Add Background"></span>
					</div>
					<ul class="group list list_backgrounds">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_mod fullcolumn singlerow" defaultString="Background">Background</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_backgrounds readonly hidden"></span>
					</ul>
				</div>

				<!-- Languages Block -->
				<div class="section" style="min-height:44px;left:0px;min-height:35px\9">
					<div class="header">LANGUAGES KNOWN</div>

					<div class="lable listhead">Language
						<span class="interface trash"></span>
						<span class="interface add addto_languages" title="Add Language"></span>
					</div>
					<ul class="group list list_languages">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_mod fullcolumn singlerow" defaultString="Feature">Language</span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_languages readonly hidden"></span>
					</ul>
				</div>

			</div><div class="column double gutter">

				<span class="dsf dsf_bio readonly" style="font-size:9pt;"></span>

				<!-- Notes Block -->
				<div class="section doublecolumn" style="min-height:70px;">
					<div class="header">NOTES</div>

					<div class="lable listhead doublecolumn">Note
						<span class="interface trash"></span>
						<span class="interface add addto_notes" title="Add Note"></span>
					</div>
					<ul class="group list doublecolumn list_notes">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_note doublecolumn singlerow" defaultString="Note">Note</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden"></span>
						<span class="dsf dsf_notes readonly hidden"></span>
					</ul>
				</div>

		</div>

	</div>

	<!-- Page Tabs -->
	<div style="text-align:right;position:relative;">

		<div style="position:absolute;left:10px;top:10px;text-align:left;font-size:9pt;">
			Character By <span class="dsf dsf_player readonly"></span><br/>
			Sheet By <span class="dsf dsf_dst_author readonly"></span>
		</div>

		<span class="tabs" style="display:inline-block;position:relative;width:296px;height:71px;">
			<a class="tab crunch tab_crunch" style="left:24px;top:0px;">Crunch</a>
			<a class="tab fluff tab_fluff" style="right:17px;top:0px;">Misc</a>
		</span>

	</div>

</div>

CSS

/* Component Includes */

@import url(https://chainsawxiv.github.io/DST/common/css/csx_dd4e_common.css);

/* Parchment Sheet Customization */

div.ds_fage_simple .content{
	color:black;
	border-bottom:1px solid #AAAAAA;
	padding-bottom:0px;
}

div.ds_fage_simple .section.doublecolumn{
	width:484px;
}

div.ds_fage_simple .boxfield{
	border:1px solid #AAAAAA;
}

div.ds_fage_simple .box28{
	border:1px solid #AAAAAA;
}

div.ds_fage_simple .box51{
	border:1px solid #AAAAAA;
}

div.ds_fage_simple .linefield{
	border-color:#CCCCCC;
}


div.ds_fage_simple h1,h2,h3,h4{
	color:red;
}

div.ds_fage_simple .top{

}

div.ds_fage_simple .header{
	background-color:#999999;
	color:white;
}

div.ds_fage_simple .valbar{
	background-color:#DDDDDD;
	color:black;
}

div.ds_fage_simple .headeredit{
	font-weight:bold;
}

/* This is extracted from .csx.valbar */
div.ds_fage_simple .textblock{
	background-color:#DDDDDD;
	color:black;
	position:relative;
	height:100%;
	width:236px;
	margin-left:2px;
	margin-bottom:2px;
	padding-bottom:2px;
	font-size:9pt;
	vertical-align:top;
}

div.ds_fage_simple .lable{
	color:#888888;
}

div.ds_fage_simple a{
	text-decoration:none;
}

/* Optional Link Styles */

div.ds_fage_simple .link_address{
	display:none;
}

div.ds_fage_simple .link_active{
	color:#7766AA;
}

div.ds_fage_simple .link_active:hover{
	color:#AA88DD;
}

div.ds_fage_simple .list li.item{
	border-bottom:1px solid #CCCCCC;
	border-radius:0px;
}

div.ds_fage_simple .list.doublecolumn{
	width:474px;
}

div.ds_fage_simple .tab.tab_crunch,
div.ds_fage_simple .tab.tab_fluff{
	font-family:arial;
	text-align:center;
	vertical-align:middle;
	border:1px solid #CCCCCC;
	border-top:none;
	border-bottom-right-radius:4px;
	border-bottom-left-radius:4px;
	padding-top:15px;
	height:30px;
	background-color:#EEEEEE;
	font-weight:bold;
	width:125px;
	position:absolute;
}

div.ds_fage_simple .tab.tab_crunch.active,
div.ds_fage_simple .tab.tab_fluff.active{
		background-color:white;
		padding-top:16px;
		margin-top:-1px;
}

div.ds_fage_simple .boxfield{
	width:22px;
	height:14px;
}

div.ds_fage_simple .box28{
	width:26px;
}

div.ds_fage_simple .box51{
	width:49px;
}

div.ds_fage_simple .labelrow{
	margin-top:2px;
}

div.ds_fage_simple .listhead{
	margin-top:1px;
}

div.ds_fage_simple .listhead.doublecolumn{
	width:474px;
}

div.ds_fage_simple .dsf.fullcolumn,
div.ds_fage_simple .edit.fullcolumn{
	width:237px;
	padding-bottom:4px;
}

div.ds_fage_simple.editable  .dsf.fullcolumn,
div.ds_fage_simple.editable  .edit.fullcolumn{
	width:211px;
}

div.ds_fage_simple.editable .dsf.doublecolumn,
div.ds_fage_simple.editable .edit.doublecolumn{
	width:422px;
}

div.ds_fage_simple .column.double{
	width:484px;
}

.csx .tipBox .contentBox{
	background: white;
}

.csx .tipBox .contentBox .tipArea,
.csx .tipBox .contentBox .tipArea:hover{
	color:#000000;
}

/* Checks Interface */

.csx .check{
	position:relative;
	bottom:3px;
	margin:0px 3px 4px 0px;
}

.csx .check .checkMark{
	display:inline-block;
	width:12px;
	height:12px;
}

.editable .csx .checkMark{
	cursor:pointer;
}

.csx .check .checkBorder{
	display:inline-block;
	height:12px;
	width:12px;
}

.csx .check .checkOff{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/lphillips_exalted_sidereal/images/check-0.png');
	background-size:10px;
	background-position:1px 2px;
	background-repeat:no-repeat;
}

.editable .csx .check .checkOff:hover{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/lphillips_exalted_sidereal/images/check-0.png');
	background-size:10px;
	background-position:1px 2px;
	background-repeat:no-repeat;
}

.csx .check .checkOn{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/lphillips_exalted_sidereal/images/check-1.png');
	background-size:10px;
	background-position:1px 2px;
	background-repeat:no-repeat;
}

.editable .csx .check .checkOn:hover{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/lphillips_exalted_sidereal/images/check-1.png');
	background-size:10px;
	background-position:1px 2px;
	background-repeat:no-repeat;
}

.csx .check.autobalance .checkMark{
	background-position: 1px 3px;
	position: relative;
	left: 2px;
}

Javascript

// Global Options
csx_opts = {
	'setupCallback': function(item){fage_simple_setup(item);},
	'uiContainer': function(){return document;},
	'defaultFieldValue':'',
	'imagePath':'https://chainsawxiv.github.io/DST/common/images/',
	'preloadFiles':[
		'add.png',
		'add_hover.png',
		'balance.png',
		'balance_hover.png',
		'bold_active.png',
		'bold_hover.png',
		'bullet.png',
		'fb_back_bottom.png',
		'fb_back_main.png',
		'fb_back_top.png',
		'grab.png',
		'grab_hover.png',
		'indent.png',
		'indent_active.png',
		'indent_hover.png',
		'italic.png',
		'italic_active.png',
		'italic_hover.png',
		'tip.png',
		'tip_hover.png',
		'trash.png',
		'trash_active.png',
		'trash_hover.png',
		'underline.png',
		'underline_active.png',
		'underline_hover.png',
		'../../sheets/lphillips_exalted_sidereal/images/check-0.png',
		'../../sheets/lphillips_exalted_sidereal/images/check-1.png',
	],
};

// Pre-Load Configuration
function fage_simple_dataPreLoad(opts){
	aisleten.characters.jeditablePlaceholder = csx_opts.defaultFieldValue;
}

// Master Startup
function fage_simple_dataPostLoad(data){

	csx_opts.defaultContext = document.getElementById(data.containerId);
	csx_opts.uiContainer = csx_opts.defaultContext.querySelector('.uicontainer');
	csx_opts.isEditable = data.isEditable;

	// Force user off of management page when not editing
	if (!csx_opts.isEditable && localStorage[ 'lastPage' ] == 'manage' )
		localStorage[ 'lastPage' ] = 'crunch';

	// Include the shared script file
	var includes = document.createElement('script');
	includes.type = 'text/javascript';
	includes.src = 'https://chainsawxiv.github.io/DST/common/js/csx_dd4e_common.js';
	includes.onload = function(){

		// Fix container properties
		csx_firstParentWithClass(csx_opts.defaultContext,'dynamic_sheet_container').style.overflow = 'visible';
		
		// Set up the editing interface
		csx_opts.setupCallback();
		
	};
	document.body.appendChild(includes);
	
	// Preload rollover images 
	// Deferred to prevent blocking
	window.setTimeout(function(){
		if (document.images){
			for (var i = 0; i < csx_opts.preloadFiles.length; i++){
				var img = new Image();
				img.src = csx_opts.imagePath + csx_opts.preloadFiles[i];
			}
		}
	},500);
	
}

// Setup After Script Load
function fage_simple_setup(context){

	// Provide default context
	if (context == undefined)
		context = csx_opts.defaultContext;
	
	// Do setup for interfaces
	csx_check(context);
	csx_edit(context);
	csx_tip(context);
	csx_list(context);
	csx_tab(context);

}

// Shutdown Before Save
function fage_simple_dataPreSave(){

	// Default the context if not set
	var context = csx_opts.defaultContext;

	// Bake everything down to its field values
	var checks = context.querySelectorAll('.check');
	for (var i = 0; i < checks.length; i++)
		checks[i].unrender();

	var edits = context.querySelectorAll('.dsf:not(.readonly),.edit');
	for (var i = 0; i < edits.length; i++)
		edits[i].unrender();

	var lists = context.querySelectorAll('.list');
	for (var i = 0; i < lists.length; i++)
		lists[i].unrender();

}

// From: https://github.com/ChainsawXIV/DST/blob/master/common/js/csx_check.js
function csx_check(context){

	// Default the context if not set
	if (!context) context = document;

	// Convert each check field
	var checkFields = context.querySelectorAll('.check');
	for (var i = 0; i < checkFields.length; i++){

		var field = checkFields[i];

		// Gets the field value from the embedded image or the text
		field.value = function(){

			// Return the cached value if it exists
			if(this.valueCache != null)
				return this.valueCache;

			// Get the value from the text content, cache, and return
			var value = parseInt(this.innerHTML);
			if ( this.innerHTML == '' ){
				if ( this.className.match( 'checkDefaultOn' ) )
					value = 1;
				else
					value = 0;
			}
			this.valueCache = value;
			return value;

		};

		// Converts the associated span element's contents to a pips image
		field.render = function(){

			// Replace the contents with the appropriate check image
			var status = (this.value()) ? 'checkOn' : 'checkOff';
			var mark = document.createElement('div');
			mark.className = 'checkMark ' + status;
			var border = document.createElement('div');
			border.className = 'checkBorder';
			this.innerHTML = '';
			mark.appendChild(border);
			this.appendChild(mark);

			// Activate the check
			this.activate();

		};

		// Converts the associated span element's contents to a text value
		field.unrender = function(){

			// Replace the contents with the appropriate value string
			this.innerHTML = this.value();

		};

		// Assigns clickability to a pips image element
		field.activate = function(){

			// Only enable if editing
			if (!csx_opts.isEditable)
				return;

			// Activate the element's pips interface
			this.addEventListener('click', this.click, false);

			// Set the element's alt text
			if (!this.title)
				this.title = 'Click to toggle';

		};

		// Click event handler for the pips interface
		field.click = function(){

			// Flip the value of the field
			if(this.value() == 1)
				this.valueCache = 0;
			else
				this.valueCache = 1;

			// Rerender the field
			this.render();

			// Call the onUpdate event
			this.onUpdate();

		};

		// On Update event function, typicaly overriden
		field.onUpdate = function(){

		}

		// Render the field
		field.render();

	}

}

Back

Fantasy A.G.E. - Simple

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account