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

13th Age

Author: Yithian

Slug: thirteenth_age

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">&nbsp;</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 &amp; 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

Back

13th Age

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account