Custom Characters Layout

thaen
thaen

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

Comments

  • ElMuggs
    ElMuggs
    Posts: 61

    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.

    DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023! 

  • thaen
    thaen
    Posts: 1,075 edited 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.

    Post edited by thaen on

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 1,075

    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

  • ElMuggs
    ElMuggs
    Posts: 61

    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! 

  • thaen
    thaen
    Posts: 1,075

    @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

  • Keryth987
    Keryth987
    Posts: 1,047

    Ok, this is a nice addition. Looks quite useful

  • ElMuggs
    ElMuggs
    Posts: 61 edited 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:


    <div class="character-list"><div class="secondary-heading">
    COUNCIL OF DREAD
    </div>
    <div class="content-list" data-filter=".tag-cod">
    <ul class="large-block-grid-2 small-block-grid-1"></ul>
    </div>
    <div class="secondary-heading">
    THE NEW DREADLORDS
    </div>
    <div class="content-list" data-filter=".tag-ndl">
    <ul class="large-block-grid-2 small-block-grid-1"></ul>
    </div>
    <div class="secondary-heading">
    SIDE-QUEST PLAYER CHARACTERS
    </div>
    <div class="content-list" data-filter=".tag-guestpc:not(.tag-ndl)">
    <ul class="large-block-grid-2 small-block-grid-1"></ul>
    </div>
    <div class="secondary-heading">
    MINIONS, PETS and SUMMONS
    </div>
    <div class="content-list" data-filter=".tag-summon, .tag-pet">
    <ul class="large-block-grid-2 small-block-grid-1"></ul>
    </div>
    <div class="secondary-heading">
    ENEMIES OF THE COUNCIL OF DREAD
    </div>
    <div class="content-list" data-filter=".tag-bbeg:not(.tag-dreadlord), .tag-tatyana">
    <ul class="large-block-grid-2 small-block-grid-1"></ul>
    </div>
    <div class="secondary-heading">
    OTHER DREADLORDS
    </div>
    <div class="content-list" data-filter=".tag-dreadlord:not(.tag-cod):not(.tag-ndl)">
    <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=".tag-npc:not(.tag-dreadlord):not(.tag-rip):not(.tag-tatyana)">
    <ul class="large-block-grid-2 small-block-grid-1"></ul>
    </div>
    <div class="secondary-heading">
    ADDED TO THE DEADBOOK
    </div>
    <div class="content-list" data-filter=".tag-rip">
    <ul class="large-block-grid-2 small-block-grid-1"></ul>
    </div>
    </div>
    Which results in This Custom Character Page

     

    Post edited by ElMuggs on

    DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023! 

  • thaen
    thaen
    Posts: 1,075

    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

  • thaen
    thaen
    Posts: 1,075

    @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

  • ElMuggs
    ElMuggs
    Posts: 61

    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! 

  • Abersade
    Abersade
    Posts: 420 edited 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?

    Post edited by Abersade on

    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

  • thaen
    thaen
    Posts: 1,075

    @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

  • ElMuggs
    ElMuggs
    Posts: 61 edited 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 :)

    Post edited by ElMuggs on

    DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023! 

  • Enjay
    Enjay
    Posts: 14

    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
    Enjay
    Posts: 14 edited 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.
    Post edited by Enjay on
  • thaen
    thaen
    Posts: 1,075

    @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.

    Obsidian Portal Developer

  • Enjay
    Enjay
    Posts: 14 edited 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.
    Post edited by Enjay on
  • thaen
    thaen
    Posts: 1,075

    Huzzah!!

    Glad the explaining helped!

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 1,047

    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
    thaen
    Posts: 1,075

    @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!

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 1,047

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

  • thaen
    thaen
    Posts: 1,075

    @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

  • Keryth987
    Keryth987
    Posts: 1,047

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

     

  • thaen
    thaen
    Posts: 1,075

    Huzzah!!

    Obsidian Portal Developer

  • LucasValenti
    LucasValenti
    Posts: 1

    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
    thaen
    Posts: 1,075

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

    Obsidian Portal Developer

  • Leonidas300
    Leonidas300
    Posts: 275 edited 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>



    <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

     

    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.
    Post edited by Leonidas300 on
  • thaen
    thaen
    Posts: 1,075 edited 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:

    image

     

    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.

    Post edited by thaen on

    Obsidian Portal Developer

  • Leonidas300
    Leonidas300
    Posts: 275

    @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
    thaen
    Posts: 1,075 edited April 17
    @Leonidas300, looks awesome! Huzzah!!

    Also "Group Shit List" HA!!!

    Post edited by thaen on

    Obsidian Portal Developer

Sign In or Register to comment.

April 2024
Season of Strife

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions