Obsidian Portal
Menu
Sign In / Create Account
JavaScript is currently disabled. Obsidian Portal has a lot of really cool features that use JavaScript. You should check them out. We think you'll have a much more enjoyable experience.
Home
Campaigns
Games Nearby
Plans
Community
Help
Resources
13th Age
Author:
Yithian
Slug:
thirteenth_age
Type:
GameCharacter
System:
13th Age
DST Source Code
HTML Template
<div class="avatar"> <span class="dsf dsf_avatar_image readonly"></span> </div> <!-- row --> <div class="basic_info"> <div class="name_class"> <div class="name"> <span class="thirteenth_age_label">Name:</span> <span class="dsf dsf_name"></span> </div> <div class="player"> <span class="thirteenth_age_label">Player</span> <span class="dsf dsf_player"></span> </div> <div class="campaaign"> <span class="thirteenth_age_label">Campaign</span> <span class="dsf dsf_campaign"></span> </div> </div> <div class="race_level"> <div class="class"> <span class="thirteenth_age_label">Class:</span> <span class="dsf dsf_class"></span> </div> <div class="race"> <span class="thirteenth_age_label">Race:</span> <span class="dsf dsf_race"></span> </div> <div class="level"> <span class="thirteenth_age_label">Level:</span> <span class="dsf dsf_level"></span> </div> </div> </div> <!-- row --> <div class="abilities"> <div class="ability_score_names"> <span class="angle"> </span> <span class="ability_score_name">STR</span> <span class="ability_score_name">CON</span> <span class="ability_score_name">DEX</span> <span class="ability_score_name">INT</span> <span class="ability_score_name">WIS</span> <span class="ability_score_name">CHA</span> </div> <div class="ability_scores"> <span class="angle">Score</span> <span class="dsf ability_score_score dsf_str"></span> <span class="dsf ability_score_score dsf_con"></span> <span class="dsf ability_score_score dsf_dex"></span> <span class="dsf ability_score_score dsf_int"></span> <span class="dsf ability_score_score dsf_wis"></span> <span class="dsf ability_score_score dsf_cha"></span> </div> <div class="ability_modifiers"> <span class="angle">Mod</span> <span class="dsf ability_score_modifier dsf_str_modifier"></span> <span class="dsf ability_score_modifier dsf_con_modifier"></span> <span class="dsf ability_score_modifier dsf_dex_modifier"></span> <span class="dsf ability_score_modifier dsf_int_modifier"></span> <span class="dsf ability_score_modifier dsf_wis_modifier"></span> <span class="dsf ability_score_modifier dsf_cha_modifier"></span> </div> <div class="ability_modifiers_plus_level"> <span class="angle">Mod + Level</span> <span class="dsf ability_score_modifier_plus_level dsf_str_modifier_plus_level"></span> <span class="dsf ability_score_modifier_plus_level dsf_con_modifier_plus_level"></span> <span class="dsf ability_score_modifier_plus_level dsf_dex_modifier_plus_level"></span> <span class="dsf ability_score_modifier_plus_level dsf_int_modifier_plus_level"></span> <span class="dsf ability_score_modifier_plus_level dsf_wis_modifier_plus_level"></span> <span class="dsf ability_score_modifier_plus_level dsf_cha_modifier_plus_level"></span> </div> </div> <!-- row --> <div class="derived_stats"> <div class="defenses"> <div class="stat ac"> <span class="thirteenth_age_label stat_name">AC</span> <span class="dsf stat_score dsf_ac"></span> </div> <div class="stat pd"> <span class="thirteenth_age_label stat_name">PD</span> <span class="dsf stat_score dsf_pd"></span> </div> <div class="stat md"> <span class="thirteenth_age_label stat_name">MD</span> <span class="dsf stat_score dsf_md"></span> </div> </div> <div class="health_stats"> <div class="stat hp"> <span class="thirteenth_age_label stat_name">HP</span> <span class="dsf stat_score dsf_current_hp"></span> / <span class="dsf stat_score dsf_max_hp"></span> </div> <div class="stat recoveries"> <span class="thirteenth_age_label stat_name">Recoveries</span> <span class="dsf stat_score dsf_current_recoveries"></span> / <span class="dsf stat_score dsf_max_recoveries"></span> </div> <div class="stat recovery_roll"> <span class="thirteenth_age_label stat_name">Recovery Roll</span> <span class="dsf stat_score dsf_recovery_roll"></span> </div> </div> </div> <div class="combat_stats"> <div> <span class="thirteenth_age_label">Melee Attack</span> <span class="thirteenth_age_label">Hit</span> <span class="thirteenth_age_label">Miss</span> </div> <div class="melee_attack1"> <span class="dsf dsf_melee_attack1"></span> <span class="dsf dsf_melee_hit1"></span> <span class="dsf dsf_melee_miss1"></span> </div> <div class="melee_attack2"> <span class="dsf dsf_melee_attack2"></span> <span class="dsf dsf_melee_hit2"></span> <span class="dsf dsf_melee_miss2"></span> </div> <div> <span class="thirteenth_age_label">Ranged Attack</span> <span class="thirteenth_age_label">Hit</span> <span class="thirteenth_age_label">Miss</span> </div> <div class="ranged_attack1"> <span class="dsf dsf_ranged_attack1"></span> <span class="dsf dsf_ranged_hit1"></span> <span class="dsf dsf_ranged_miss1"></span> </div> <div class="ranged_attack2"> <span class="dsf dsf_ranged_attack2"></span> <span class="dsf dsf_ranged_hit2"></span> <span class="dsf dsf_ranged_miss2"></span> </div> </div> <div class="columns"> <!-- column --> <div class="column1"> <div class="one_unique_thing"> <h3>One Unique Thing</h3> <span class="dsf dsf_one_unique_thing"></span> </div> <div class="icon_relationships"> <h3>Icon Relationships</h3> <div class="icon_relationship"> <span class="dsf dsf_icon_relationship1"></span> </div> <div class="icon_relationship"> <span class="dsf dsf_icon_relationship2"></span> </div> <div class="icon_relationship"> <span class="dsf dsf_icon_relationship3"></span> </div> <div class="icon_relationship"> <span class="dsf dsf_icon_relationship4"></span> </div> </div> <div class="backgrounds"> <h3>Backgrounds</h3> <div class="background background1"> <span class="dsf dsf_background1"></span> </div> <div class="background background2"> <span class="dsf dsf_background2"></span> </div> <div class="background background3"> <span class="dsf dsf_background3"></span> </div> <div class="background background4"> <span class="dsf dsf_background4"></span> </div> <div class="background background5"> <span class="dsf dsf_background5"></span> </div> <div class="background background6"> <span class="dsf dsf_background6"></span> </div> </div> <div class="talents"> <h3>Talents</h3> <div class="talent talent1"> <span class="dsf dsf_talent1"></span> </div> <div class="talent talent2"> <span class="dsf dsf_talent2"></span> </div> <div class="talent talent3"> <span class="dsf dsf_talent3"></span> </div> <div class="talent talent4"> <span class="dsf dsf_talent4"></span> </div> <div class="talent talent5"> <span class="dsf dsf_talent5"></span> </div> </div> <div class="class_features"> <h3>Class Features</h3> <div class="class_feature class_feature01"> <span class="dsf dsf_class_feature01"></span> </div> <div class="class_feature class_feature02"> <span class="dsf dsf_class_feature02"></span> </div> <div class="class_feature class_feature03"> <span class="dsf dsf_class_feature03"></span> </div> <div class="class_feature class_feature04"> <span class="dsf dsf_class_feature04"></span> </div> <div class="class_feature class_feature05"> <span class="dsf dsf_class_feature05"></span> </div> <div class="class_feature class_feature06"> <span class="dsf dsf_class_feature06"></span> </div> <div class="class_feature class_feature07"> <span class="dsf dsf_class_feature07"></span> </div> <div class="class_feature class_feature08"> <span class="dsf dsf_class_feature08"></span> </div> <div class="class_feature class_feature09"> <span class="dsf dsf_class_feature09"></span> </div> <div class="class_feature class_feature10"> <span class="dsf dsf_class_feature10"></span> </div> </div> </div> <!-- column --> <div class="column2"> <div class="racial_power"> <h3>Racial Power</h3> <span class="dsf dsf_racial_power"></span> </div> <div class="powers_spells"> <h3>Powers & Spells</h3> <div class="power power01"> <span class="dsf dsf_power01"></span> </div> <div class="power power02"> <span class="dsf dsf_power02"></span> </div> <div class="power power03"> <span class="dsf dsf_power03"></span> </div> <div class="power power04"> <span class="dsf dsf_power04"></span> </div> <div class="power power05"> <span class="dsf dsf_power05"></span> </div> <div class="power power06"> <span class="dsf dsf_power06"></span> </div> <div class="power power07"> <span class="dsf dsf_power07"></span> </div> <div class="power power08"> <span class="dsf dsf_power08"></span> </div> <div class="power power09"> <span class="dsf dsf_power09"></span> </div> <div class="power power10"> <span class="dsf dsf_power10"></span> </div> <div class="power power11"> <span class="dsf dsf_power11"></span> </div> <div class="power power12"> <span class="dsf dsf_power12"></span> </div> <div class="power power13"> <span class="dsf dsf_power13"></span> </div> </div> <div class="feats"> <h3>Feats</h3> <div class="feat feat01"> <span class="dsf dsf_feat01"></span> </div> <div class="feat feat02"> <span class="dsf dsf_feat02"></span> </div> <div class="feat feat03"> <span class="dsf dsf_feat03"></span> </div> <div class="feat feat04"> <span class="dsf dsf_feat04"></span> </div> <div class="feat feat05"> <span class="dsf dsf_feat05"></span> </div> <div class="feat feat06"> <span class="dsf dsf_feat06"></span> </div> <div class="feat feat07"> <span class="dsf dsf_feat07"></span> </div> <div class="feat feat08"> <span class="dsf dsf_feat08"></span> </div> <div class="feat feat09"> <span class="dsf dsf_feat09"></span> </div> <div class="feat feat10"> <span class="dsf dsf_feat10"></span> </div> <div class="feat feat11"> <span class="dsf dsf_feat11"></span> </div> </div> <div class="equipment"> <h3>Equipment</h3> <div class="item item1"> <span class="dsf dsf_item1"></span> </div> <div class="item item2"> <span class="dsf dsf_item2"></span> </div> <div class="item item3"> <span class="dsf dsf_item3"></span> </div> <div class="item item4"> <span class="dsf dsf_item4"></span> </div> <div class="item item5"> <span class="dsf dsf_item5"></span> </div> <div class="item item6"> <span class="dsf dsf_item6"></span> </div> </div> <div class="magic_items"> <h3>Magic Items</h3> <div class="magic_item magic_item01"> <span class="dsf dsf_magic_item01"></span> </div> <div class="magic_item magic_item02"> <span class="dsf dsf_magic_item02"></span> </div> <div class="magic_item magic_item03"> <span class="dsf dsf_magic_item03"></span> </div> <div class="magic_item magic_item04"> <span class="dsf dsf_magic_item04"></span> </div> <div class="magic_item magic_item05"> <span class="dsf dsf_magic_item05"></span> </div> <div class="magic_item magic_item06"> <span class="dsf dsf_magic_item06"></span> </div> <div class="magic_item magic_item07"> <span class="dsf dsf_magic_item07"></span> </div> <div class="magic_item magic_item08"> <span class="dsf dsf_magic_item08"></span> </div> <div class="magic_item magic_item09"> <span class="dsf dsf_magic_item09"></span> </div> <div class="magic_item magic_item10"> <span class="dsf dsf_magic_item10"></span> </div> <div class="magic_item magic_item11"> <span class="dsf dsf_magic_item11"></span> </div> <div class="magic_item magic_item12"> <span class="dsf dsf_magic_item12"></span> </div> </div> <div class="incremental_advances"> <h3>Incremental Advances</h3> <div class="advance"> Ability Score Bonus <span class="dsf dsf_incremental_ability_score_bonus checkbox"></span> </div> <div class="advance"> Icon Relationship Point <span class="dsf dsf_incremental_icon_relationship checkbox"></span> </div> <div class="advance"> Extra Magic Item <span class="dsf dsf_extra_magic_item checkbox"></span> </div> <div class="advance"> Feat <span class="dsf dsf_incremental_feat checkbox"></span> </div> <div class="advance"> Hit Points <span class="dsf dsf_incremental_hit_points checkbox"></span> </div> <div class="advance"> Skills <span class="dsf dsf_incremental_skills checkbox"></span> </div> <div class="advance"> Power/Spell <span class="dsf dsf_incremental_power1 checkbox"></span> <span class="dsf dsf_incremental_power2 checkbox"></span> <span class="dsf dsf_incremental_power3 checkbox"></span> <span class="dsf dsf_incremental_power4 checkbox"></span> </div> </div> </div> </div> <!-- all alone --> <div class="description"> <h3>Character Description</h3> <span class="dsf dsf_description"></span> </div> <div class="bio"> <h3>Character Bio</h3> <span class="dsf dsf_bio"></span> </div> <!-- footer --> <div class="author_info"> Created by <span class="dsf dsf_dst_author"></span> </div>
CSS
/**************************** * This is the CSS for the DST. * Copy and paste this directly into the CSS textarea on obsidianportal.com *****************************/ /* global styling */ .ds_thirteenth_age .thirteenth_age_label, .ds_thirteenth_age h3 { font-family: "New Century Schoolbook", serif; } .ds_thirteenth_age .thirteenth_age_label { font-weight: bold; } .ds_thirteenth_age h3 { text-decoration: underline; } .ds_thirteenth_age .angle { transform-origin: right; transform: rotate(20deg); } /*********************** * basic info ***********************/ /* layout */ .ds_thirteenth_age .basic_info { margin-bottom: 2em; } .ds_thirteenth_age .name_class { display: inline-block; float: left; margin-right: 8em; } /* styling */ .ds_thirteenth_age .avatar { float: right; max-height: 400px; max-width: 200px; border-top: 1px solid grey; border-left: 1px solid grey; border-bottom: 1px solid grey; } /*********************** * ability scores ***********************/ /* layout */ .ds_thirteenth_age .abilities { margin-bottom: 3em; } .ds_thirteenth_age .abilities div { clear: left; } .ds_thirteenth_age .abilities span { float: left; } .ds_thirteenth_age .abilities span:first-of-type { text-align: left; width: 6em; } .ds_thirteenth_age .abilities span:not(first-of-type) { text-align: center; width: 3em; } /* styling */ .ds_thirteenth_age .abilities span { border-right: 1px solid grey; border-bottom: 1px solid grey; } .ds_thirteenth_age .abilities span:first-of-type { border-right: none; } .ds_thirteenth_age .abilities span:last-of-type { border-right: none; } .ds_thirteenth_age .abilities .ability_score_names span:first-of-type { border-bottom: none; } .ds_thirteenth_age .abilities .ability_modifiers_plus_level span { border-bottom: none; } .ds_thirteenth_age .abilities span:first-of-type { text-align: right; } .ds_thirteenth_age .abilities .ability_score_name { font-weight: bold; } .ds_thirteenth_age .ability_modifiers { color: darkgrey; } /*********************** * derived stats (including health) ***********************/ /* layout */ .ds_thirteenth_age .derived_stats { margin-bottom: 2em; } .ds_thirteenth_age .defenses, .ds_thirteenth_age .health_stats { display: inline-block; vertical-align: top; margin-right: 3em; } .ds_thirteenth_age .defenses div { clear: both; } .ds_thirteenth_age .defenses span { float: left; min-width: 3em; } .ds_thirteenth_age .health_stats span:first-of-type { float: left; min-width: 8em; } /* styling */ .ds_thirteenth_age .derived_stats { padding-top: 10px; border-top: 2px dashed grey; } /********************** * attack scores *********************/ /* layout */ .ds_thirteenth_age .combat_stats { margin-bottom: 2em; } .ds_thirteenth_age .combat_stats div { clear: left; } .ds_thirteenth_age .combat_stats span { float: left; min-width: 8em; } /********************** * remaining crunch **********************/ /* layout */ .ds_thirteenth_age .column1, .ds_thirteenth_age .column2 { display: inline-block; float: left; width: 20em; margin-bottom: 1em; } .ds_thirteenth_age .column1 { margin-right: 3em; } .ds_thirteenth_age .column1 h3, .ds_thirteenth_age .column2 h3 { margin-top: 2em; } /* styling */ .ds_thirteenth_age .columns { margin-top: 10px; border-top: 2px dashed grey; } /********************* * character description *********************/ /* layout */ .ds_thirteenth_age .description { clear: both; } /* styling */ .ds_thirteenth_age .description { padding-top: 10px; padding-bottom: 20px; border-top: 2px dashed grey; } /********************* * character bio *********************/ /* layout */ .ds_thirteenth_age .bio { clear: both; } /* styling */ .ds_thirteenth_age .bio { padding-top: 10px; } /********************* * footer *********************/ /* layout */ .ds_thirteenth_age .author_info { clear: both; } /* styling */ .ds_thirteenth_age .author_info { padding-top: 10px; border-top: 2px dashed grey; font-size: 75%; }
Javascript
Submit Notes
added a field for a character description
Back