Custom Characters Layout

thaen · February 1

We just pushed a new feature that enables custom crafting of the layout of the Characters page. You can create different groups of Characters with whatever headings you want. And actually, it takes HTML, so I imagine some of you can go really crazy with how you want to change it up.

The help page for the feature has the details, and a good Example at the bottom.

Let us know if you find any issues or have any questions!

ElMuggs · February 1

OMG OMG OMG! I can think of a million things I can do with this!

I have one question though - in the example you have


".pc:not(.tag-dead)"

To stop Dead PCs/NPCs showing up in the wrong place.

However could you advise what the code would be to use to AND/OR operations to combine two or more classes?

Eg in my case I would like to combine both the 'Pets' and Minions' tag into one group which would require a OR operator..

Then I'd need to add these 'new' groups to the :not( line to stop them showing up as duplicate entries - but everything I've tried so far just stops the code from working.

thaen · February 1

@ElMuggs, happy to!

The data-filter takes a standard CSS selector.

Let's say we have "tag-pets" and "tag-minions" as our classes.

If we want to AND them, so that the characters in the group have both the "pets" tag AND the "minions" tag, then we would do ".tag-pets.tag-minions" (notice no spaces). And if you wanted to exclude the "dead" tagged ones, I think it would be ".tag-pets.tag-minions:not(.tag-dead)".

If we want to OR them, so that the characters in the group have either the "pets" tag OR the "minions" tag, then we would do ".tag-pets, .tag-minions" (notice the comma separation). And if you wanted to exclude the "dead" tagged ones, I think it would be ".tag-pets:not(.tag-dead), .tag-minions:not(.tag-dead)".

I'm just going off of memory and didn't test those CSS selectors, so I might be wrong, but try it out and see if that gets you what you're looking for. And let me know if not, and I'll take a closer look.

thaen · February 1

Oh, to exclude the "pets" and "minions" from the other lines. Say you don't want the pets and minions and deads to show up in the PCs section. You would do ".pc:not(.tag-dead):not(.tag-pets):not(.tag-minions)".

So that says to give you characters that have the "pc" class and not the "dead" class and not the "pets" class and not the "minions" class.

Again, not tested, so let me know if that doesn't work, and I can look closer.

ElMuggs · February 1

So I still haven't figured out advanced grouping but I've been able to hack together a much cleaner character list using the new features! :)

One awesome perk of this system is that it makes it possible to hide away all those 'minor NPC's' to stop them cluttering up the list :)

thaen · February 1

@ElMuggs, your character page looks awesome!

Which advanced grouping are you needing help with?

I see the "MINIONS, PETS, and SUMMONS" section has 2 groups ... ".tag-summon" and ".tag-pet". If you wanted to put those in the same group, so they sort alphabetically together, you would make the data-filter=".tag-summon, .tag-pet". Let me know if that doesn't work.

Keryth987 · February 2

Ok, this is a nice addition. Looks quite useful

ElMuggs · February 3

Okay, I've managed to go back and now I fully understand the syntax operators it all works PERFECTLY now! :D

I especially love how seamless it is with all the search and filters - and that it makes it possible to insert extra HTML wrapping code into these panels.

As a side-note I'd love to see OP apply this customisation code to the Items filter at some point - I know it's not under official development anymore but it's really great even 'as is' for a big/complex campaign.

Here's the backend code if anyone's interested in seeing how more 'complex' layouts work:


&lt;div class="character-list"&gt;&lt;div class="secondary-heading"&gt;
COUNCIL OF DREAD
&lt;/div&gt;
&lt;div class="content-list" data-filter=".tag-cod"&gt;
 &lt;ul class="large-block-grid-2 small-block-grid-1"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="secondary-heading"&gt;
THE NEW DREADLORDS
&lt;/div&gt;
&lt;div class="content-list" data-filter=".tag-ndl"&gt;
 &lt;ul class="large-block-grid-2 small-block-grid-1"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="secondary-heading"&gt;
SIDE-QUEST PLAYER CHARACTERS
&lt;/div&gt;
&lt;div class="content-list" data-filter=".tag-guestpc:not(.tag-ndl)"&gt;
 &lt;ul class="large-block-grid-2 small-block-grid-1"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="secondary-heading"&gt;
MINIONS, PETS and SUMMONS
&lt;/div&gt;
&lt;div class="content-list" data-filter=".tag-summon, .tag-pet"&gt;
 &lt;ul class="large-block-grid-2 small-block-grid-1"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="secondary-heading"&gt;
ENEMIES OF THE COUNCIL OF DREAD
&lt;/div&gt;
&lt;div class="content-list" data-filter=".tag-bbeg:not(.tag-dreadlord), .tag-tatyana"&gt;
 &lt;ul class="large-block-grid-2 small-block-grid-1"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="secondary-heading"&gt;
OTHER DREADLORDS
&lt;/div&gt;
&lt;div class="content-list" data-filter=".tag-dreadlord:not(.tag-cod):not(.tag-ndl)"&gt;
 &lt;ul class="large-block-grid-2 small-block-grid-1"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="secondary-heading"&gt;
  NON-PLAYER CHARACTERS
&lt;/div&gt;
&lt;div class="content-list" data-filter=".tag-npc:not(.tag-dreadlord):not(.tag-rip):not(.tag-tatyana)"&gt;
  &lt;ul class="large-block-grid-2 small-block-grid-1"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="secondary-heading"&gt;
ADDED TO THE DEADBOOK
&lt;/div&gt;
&lt;div class="content-list" data-filter=".tag-rip"&gt;
  &lt;ul class="large-block-grid-2 small-block-grid-1"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;

Which results in This Custom Character Page

thaen · February 3

HUZZAH!! : )

As a side-note I'd love to see OP apply this customisation code to the Items filter at some point - I know it's not under official development anymore but it's really great even 'as is' for a big/complex campaign.

Hmm ... interesting ...

thaen · February 5

@ElMuggs

As a side-note I'd love to see OP apply this customisation code to the Items filter at some point

Check out the new "Custom Items Layout" section in Campaign Settings Advanced right under the "Custom Characters Layout".

The standard Items layout is unhelpfully simple, so the "Insert Sample" for "Custom Items Layout" has a little more complexity to it, creating an "OWNED" and "UNOWNED" section of items, and shows how you could use some of the classes deeper into the Items tiles if you wanted to group using those instead. And that same technique would work on the Characters data-filter as well.

I know it's not under official development anymore but it's really great even 'as is' for a big/complex campaign.

We've been working to get it up to par with the Characters section. The last changes were just made last week, so we've now removed that note about it not being polished.

The last changes were that some of the classes in the Items pages used the word "characters" since some of the original code was copied from the Characters section. Those classes now say "contents" instead of "characters" or "items" so that CSS can be written to style both the same way, or you could use the body level classes to differentiate if you wanted Items and Characters to be styled differently.

We also updated all of the existing Custom CSS to use the new "contents" classes where they used to use the "characters" classes.

We're still going to leave it as an optional section to turn on to keep the initial view of a Campaign simpler, but it's a fully functioning and actively developed part of the system now.

ElMuggs · February 6

Wow that's fantastic news! Thank you I will have to start fiddling with it :)

Abersade · February 9

This is exactly what I was looking for. I used it to make my already confusing game even more confusing! https://streamofkairos.obsidianportal.com/characters

I asked this in the other quasi-related thread: Is it possible to use this with tags that have spaces in them?

thaen · February 9

@Abersade

Nice!!

I asked this in the other quasi-related thread: Is it possible to use this with tags that have spaces in them?

Definitely. It's just using standard css. So ANY css you want to use to filter the Character tiles by will work. And all the tags are applied as classes to the Character tiles. Here's a screenshot (from your Campaign) where I've circled the tag (with spaces) and then the corresponding css class for that tag that is on the Character tile:

ElMuggs · February 10

FYI a little tip - if you need a specific tag for layout and don't want it to appear in other places you can make it invisible by using CSS.

eg to hide the NDL tag used to separate the 'New Dreadlords' group I added this code:


.campaign-public-layout #content .content-list a[data-tag="NDL"]
{display:none;}

You'll notice the NDL tag appears in the filter - but not in the list of tags under the characters names.

I've also done a first pass at sorting out the Items list so now everything is ordered by rarity :)

Enjay · February 11

I have a question about this feature - specifically about whether it is possible to customise the appearance of the headings for each group.

Before editing my character page, things looked like this:

After adding groups, the headings look like this:

i.e. the blue background, yellow text etc has gone (it's still in the general site custom CSS, but is now ignored).

Is there a way to have my new groups use my old group heading appearance? If so, how?

Thanks.

Enjay · February 11

@ ElMuggs That's a useful tip, thanks.

Just a minor point of note. I have made all my character group tags start with 00 to make them easy to find when entering tags. (You can see that in my previous post above.) This, of course, means that they get listed as the first tag on the characters page. So, when they are hidden, the comma after the tag still gets shown:

You can see it there just after the tag symbol.

It's not a big deal, and things look much better with the tags hidden (in fact, I think I even like the comma) but I thought I'd point it out.

Of course, this doesn't happen with the first NPC because his name in his tag gets sorted before 00.

thaen · February 11

@Enjay

The current Custom CSS is being ignored because the css classes ".pc-list-header" and ".npc-list-header" are not on your new "secondary-heading" sections.

You could add those classes into your new Custom Characters Layout, but it looks like you want this look on all of the sections, so you can make a more general css block that will cover all of the sections.

To do that, you would replace these from your current Custom CSS:


/*changes the secondary list header above all of the player character entries on the characters page. */

.secondary-heading.pc-list-header{
   background-color: #1C5799;
   color: #FAD300 !important;
   font-weight: bold;
   text-shadow: 2px 2px #443800;
}


/*changes the secondary list header above all of the non-player character entries on the characters page. */

.secondary-heading.npc-list-header{
   background-color: #1C5799;
   color: #FAD300 !important;
   font-weight: bold;
   text-shadow: 2px 2px #443800;
}

With just this:


/*changes the secondary list header above all of the sections on the characters page. */

.character-index.campaign-public-layout .secondary-heading{
   background-color: #1C5799;
   color: #FAD300;
   font-weight: bold;
   text-shadow: 2px 2px #443800;
}

Notice you don't need the "!important" any more since the css selector is specific enough to override the default css selector.

Let me know if that doesn't fix it for you.

Enjay · February 11

Works like a charm! Thank you so much.

And thanks for explaining why it was doing what it did. I figured it was probably something along those lines but I'm not familiar enough with things to have identified it myself.

thaen · February 12

Huzzah!!

Glad the explaining helped!

Keryth987 · March 17

Two questions.

I'm trying to use the search filter to show JUST my PC's for a PC only screen. However I have two things I need to fix

1) It shows ALL my headings, even though the NPCs are hidden. I'm using the new Custom Character stuff so is there a way to hide the Headings when a Search filter is going?

2) Is there a way to hide the Filter box when USING a filter?

thaen · March 18

@Keryth987, short answer ... this should do it.


.character-index.campaign-public-layout.filter-pc .main-content .highlight-container,
.character-index.campaign-public-layout.filter-pc .main-content .content-search-area,
.character-index.campaign-public-layout.filter-pc .main-content .secondary-heading:not(.pc-list-header) {
  display: none;
}

Long answer ...

When you access the Characters Index page with a preset filter, the system will put a body class indicating which filter the page was loaded with.

For example, if you visit:

https://wrathofthehighborne.obsidianportal.com/characters?filters=pc

The body will have a class of "filter-pc". So, you can key off of that class to hide stuff you don't want visible. (See the ".filter-pc" referenced in the CSS above.)

The ".not(pc-list-header)" line tells it to hide all of the ".secondary-heading" divs that you created, except for the one that has ".pc-list-header".

Let me know if you run into any issues!

Keryth987 · March 20

Well, if I just put the above code in my CSS, isnt it going to hide all the headings for everything?

thaen · March 20

@Keryth987, it should only hide the "not" pc-list-header headings, and only when you visit the page with the filter set in the query string of the url.

What happened when you tried it?

Keryth987 · March 22

See? My CSS comprehension is minimal. That worked perfectly. Thanks

thaen · March 22

Huzzah!!

LucasValenti · March 24

I just wanted to stop by to thank you guys for adding this feature. I've got so many NPCs and this has made it so much easier to parse through the list and break it up into more digestible pieces!

Here's a look at what I've been able to do with it!

https://elurah.obsidianportal.com/characters

thaen · March 26

@LucasValenti, thanks for letting us know! And nice work on the Characters page, looks great!

Leonidas300 · April 16

This looks to be a great feature and one on my wishlist from about 13 years ago. Anyway, long story short is that I need some help with this. I've never been even an average coder but at one point I had a semi grasp of HTML and was coming along on CSS but since the pandemic I have not done anything coding wise and have lost my "skills".

I wanted to do this on one of my smaller pages because once i see how it works I'll be able to get it.

This is the character page:

https://metzgoreween.obsidianportal.com/characters

The characters Aeryn Stokeworth and Shukiku have been tagged via the portal tag system and html of

<div class="Deceased" data-filter=".tag-Dead"><ul class="large-block-grid-2 small-block-grid-1"></ul>

</div>

has been put into the character discription field.

My issue is that i cannot get the characters to move into the section they are supposed to be in.

This is the html in the custom character layout:

<div class="secondary-heading">PLAYER CHARACTERS</div>

<div class="content-list" data-filter=".pc"><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"><ul class="large-block-grid-2 small-block-grid-1"></ul>

</div>

<div class="secondary-heading">KNIGHT PROTECTOR</div>

<div class="Knight Protector" data-filter=".kp"><ul class="large-block-grid-2 small-block-grid-1"></ul>

</div>

<div class="secondary-heading">DECEASED</div>

<div class="Deceased" data-filter=".tag-Dead"><ul class="large-block-grid-2 small-block-grid-1"></ul>

</div>

this is some CSS I took from this thread:

/*changes the secondary list header above all of the sections on the characters page. */

.character-index.campaign-public-layout .secondary-heading{

background-color: #1C5799;

color: #FAD300;

font-weight: bold;

text-shadow: 2px 2px #443800;

}

any help would be much appreciated

I believe i need to use CSS to point the charaters to the section under the headers but F if I know how or even if that assumption has merit.

thaen · April 16

@Leonidas300,

You're really close!

Change this:

data-filter=".kp"

to this:

data-filter=".tag-knight-protector"

And then also change this:

data-filter=".tag-Dead"

to this (it's only a capitalization change):

data-filter=".tag-dead"

The way to find these is to right click on the Character tile, choose Inspect, and then look for the "li" with the "content-list-item-container" class. The other classes at that same level will be the ones that you can filter on, like "npc", "pc", and the "tag-" classes. Here's a screenshot of Aeryn with the important part highlighted. Note the "npc" and "tag-knight-protector" classes:

Note that these changes will only duplicate the Character tile to those other sections. The Character will show up in both the NPC and the KNIGHT PROTECTOR sections. To have the Character only show up in one section, you'll need to exclude it from the other sections using the ":not( ... )" on the classes you want to exclude from the PC and NPC sections. Feel free to ask for more help if that's something you want to do and I'm not being clear.

Leonidas300 · April 17

@Thaen - man thank you that did the trick, I was even able to already implement it on my main current campaign (where it cleans stuff up nicely)

https://amanifestationofchaosextinctionevent.obsidianportal.com/characters

THanks again!

@Leonidas300

https://amanifestationofchaosextinctionevent.obsidianportal.com/

thaen · April 17

@Leonidas300, looks awesome! Huzzah!!

Also "Group Shit List" HA!!!

Custom Characters Layout

Comments

April 2024
Season of Strife

Howdy, Stranger!

Discussions

Categories

Forum

Information

Custom Characters Layout

Comments

April 2024 Season of Strife

Howdy, Stranger!

Discussions

Categories

Forum

Information

April 2024
Season of Strife