Customizing the Campaign Characters Page

The Characters Page can display Characters grouped by Player Characters and Non-Player Characters, but what if you want different groupings with different headings? We've got you covered.

Note: Customizable Characters Page is an Ascendant feature, requiring an Ascendant membership.

Required Technical Knowledge

Customizing the Characters Page requires an understanding of some of the basic building blocks of web design - specifically HTML and CSS. You don't need to be an expert, but you will need to be able to use these tools to create groupings labeled with class names so as to be targeted by CSS for styling (both our rules and any that you might create in your custom CSS input field).

Getting Started

To begin customizing your campaign's Characters Page, click on the "Settings" tab in the left-hand navigation menu. From this page, click to the "Advanced" area and locate the "Custom Characters Layout" input field. HTML placed into this field will replace the standard Characters Page layout once you have clicked the "Save" button. If the field is empty when saving, the campaign site will return to using the standard layout. Located just beneath the input area are buttons to "Insert Sample" and "Reset" the field.

The Insert Sample

Intended as a way to offer users something of a jumping off point, the "Insert Sample" button fills the "Custom Characters Layout" input field with a default HTML code block that replicates the standard Obsidian Portal Characters Page layout. This is particularly useful for users with less experience who are just starting out, or for those who only wish to make minor modifications.

The Reset Button

At its core, the "Custom Characters Layout" input field works like something of a toggle switch when saved. If the field is empty, then the standard layout is used. However, if there is content inside, then that is displayed as the campaign's Character Page layout instead. Having the "Reset" button ensures that the process of getting back to the standard campaign navigation (if desired) is quick and easy.

Proper Layout Structure

While the custom layout that you create will be wholly yours, it will be placed into the middle of Obsidian Portal's campaign site structure. This means that in order for your custom layout to work correctly, there are some structural considerations that need to be observed. Of particular importance are the following class assignments:

Necessary Classes

Class	Usage
content-list	The element with this class denotes a group of Characters. The system will append all of the Characters in the group to the "ul" child element of this parent element. Typically a div.
data-filter	Add this attribute to the element with the "content-list" class to tell the system which Characters to include in this group. This takes a css path, and Characters can be shown in multiple groups at the same time, so use the ":not()" css pseudo class if you want to exclude Characters with a common class.

Example

You might want to have a Character group for the Player Characters' mounts or companions, so you could tag those characters as "pc-mounts" and create a group to show those. Or some long running Campaigns have a number of deceased Characters that can clutter up the Character groups. If you were to tag those deceased Characters with the tag "dead", this is a layout that would put them all in the "Deceased" group and keep them out of the other groups. Note the ":not(.tag-dead)" to filter them out of the other groups.

<div class="secondary-heading">
  PLAYER CHARACTERS
</div>
<div class="content-list" data-filter=".pc:not(.tag-dead)">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  NON-PLAYER CHARACTERS
</div>
<div class="content-list" data-filter=".npc:not(.tag-dead)">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  DECEASED CHARACTERS
</div>
<div class="content-list" data-filter=".tag-dead">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>