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!
Obsidian Portal Developer
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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
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.
DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023!
@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.
Obsidian Portal Developer
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.
Obsidian Portal Developer
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 :)
DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023!
@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.
Obsidian Portal Developer
Ok, this is a nice addition. Looks quite useful
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:
Which results in This Custom Character PageDM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023!
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 ...
Obsidian Portal Developer
@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.
Obsidian Portal Developer
Wow that's fantastic news! Thank you I will have to start fiddling with it :)
DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023!
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?
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
@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:
Obsidian Portal Developer
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:
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 :)
DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023!
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.
@ 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.@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:
With just this:
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.
Obsidian Portal Developer
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.Huzzah!!
Glad the explaining helped!
Obsidian Portal Developer
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?
@Keryth987, short answer ... this should do it.
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!
Obsidian Portal Developer
Well, if I just put the above code in my CSS, isnt it going to hide all the headings for everything?
@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?
Obsidian Portal Developer
See? My CSS comprehension is minimal. That worked perfectly. Thanks
Huzzah!!
Obsidian Portal Developer
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
@LucasValenti, thanks for letting us know! And nice work on the Characters page, looks great!
Obsidian Portal Developer
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>
<div class="Knight Protector" data-filter=".kp"><ul class="large-block-grid-2 small-block-grid-1"></ul>
</div></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
@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.
Obsidian Portal Developer
@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/
Also "Group Shit List" HA!!!
Obsidian Portal Developer