Custom sorted "Items" list
hello all. i have recently been learning some CSS to customize my upcoming campaign. https://cityofshadows-2.obsidianportal.com/dashboard
I have recently discovered a way to sort the characters list so I can break them into needed groups. That code is here:
<div class="secondary-heading">
MAIN CHARACTERS
</div>
<div class="content-list" data-filter=".pc:not(.tag-deceased)">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
SUPPORTING CHARACTERS
</div>
<div class="content-list" data-filter=".npc:not(.tag-blackwood,.tag-deceased,.tag-farrington,.tag-vanished,.tag-mei-lian,.tag-new,.tag-officials,.tag-triad)">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
NEW CHARACTERS
</div>
<div class="content-list" data-filter=".tag-new">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
BLACKWOOD FAMILY & ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-blackwood">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
MEI LIAN ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-mei-lian">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
FARRINGTON FAMILY & ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-farrington">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
BROWN ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-brown">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
GANNON ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-gannon">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
SINGAPORE OFFICIALS
</div>
<div class="content-list" data-filter=".tag-officials">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
TRIAD MEMBERS
</div>
<div class="content-list" data-filter=".tag-triad">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
MISSING PERSONS
</div>
<div class="content-list" data-filter=".tag-vanished">
<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-deceased">
<ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
https://cityofshadows-2.obsidianportal.com/characters
My next goal is to create a similar layout for Items. However, I can change the headings, but I can not seem to get it to sort in any fashion other than "Author code" or no "Author code". I would like to be able to sort items into "Personal Items" and everything else, but would further like to sort the everything else into categories in that same section. I used tags to do this in my character section, but can not seem to do the same in the Items list. In fact if I remove the author tag syntax, it displays nothing at all. I would prefer that the author tag was completely ignored, whether in the on or off states, and it did all sorting by tags.
If anyone can help me with a snippet of code that will get the job started, I can modify as needed.
Also I would like to tell everyone here how much i have learned for these threads. Because of your contributions here, my campaign pages have become more and more aesthetically pleasing, and I have had great feedback from my players.
Any assistance will be greatly appreciated..
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
If you want divide and subdivide, you'll probably want to use multiple tags. For example, tagging all the personal items of a character with the character name and also for each item type. Then just filter the categories with multiple tags, so that it would need both the *character* tag and then the *item type* tag to filter in. I.e. tagging a sword with both *Steven* and *Weapon*.
Edit: forgot the important bit. If I am remembering correctly, you'd just need to add .tag-steven.tag-weapon (no spaces) as your data filter and it would require both tags to appear.Thanks Lucas,
While this is helpful, and on the surface exactly what I need. The problem is I can not seem to work out the syntax for the .tag function along side the :data-filter=":has(.content-list-item:not([data-author])) or :has(.content-list-item[data-author]). It seems there should be a data filter for the .tag, for items, but for characters it has this sort of syntax data-filter=".pc:not(.tag-deceased)" If I remove the data-author function, I get no results at all on the list, so it must be present to see any results.
If I can figure out how to chain the data-author syntax with the tag syntax this will work great. That is the issue i ma having, getting the CSS code to recognize both the author tag and the .tag syntax together.
ah, okay, I see the confusion, now. Let's have a look at mine:
standard stuff. the .pc:not(.tag-) filter is there because .pc filters it to only player characters. This is a tag that is automatically applied to any character entry that is created as a PC. The not: filter is there to exclude tags I don't want to appear. in this case the tags used for the other 2 campaigns on my site.
Compared to:
Here's the data-filter is just set to only include the "Aranthor" tag. without a .pc or .npc prefix, it means it doesn't care whether it's a player character or an npc, as long as it has the Aranthor tag, it gets thrown into this content-list. This is all probably stuff you know, just covering bases to make sure we're all on the same page. Lastly, let's have a look at my item page:
As you can see, it should be formatted exactly the same as the character. You just need to make sure you're adding it into the correct field. Make sure the items are tagged, of course. Just to be sure, you're not trying to format your item layout in the Custom Characters Layout field, correct? There is a separate field blow it exclusive to formatting the items page titled Custom Items Layout.
Otherwise, the HTML formatting should be identical...excluding the .pc and .npc prefix tag, as far as I am aware there is no such similar auto-tagging for item filtering.
Here are my Character and Item pages for reference:https://elurah.obsidianportal.com/characters
https://elurah.obsidianportal.com/items
Thank you Lucas!
With the info you provided, I was able to make the basic list sorting work. I appreciate your help. I am in fact , working in the Custom Items Layout field. If you don't mind, can you send me your CSS code for your items list, so I can explore further? You have some complexity here I would like to better understand.
I appreciate your help
Awesome, glad to hear you got it working out. And I'm always happy to share my code with others. I've actually got a fair bit of CSS on the characters page, but I'll try to stick to the more relevant stuff. Here we go:
This targets the headings for both the Character and Item pages for styling. Font, size, color, shadows, etc.
This targets any entry on the item page that has the Uncommon tag and adds a border to it. I have one of these for every rarity (uncommon, rare, very rare, legendary, artifact) so that when I tag an item with a rarity tag, it automatically adds the appropriate colored border. Just a nice bit of visual language. I also have basically the same code for the characters to color their borders based on campaign.
This just gets rid of the little description fade out gradient in the character/item boxes.
Hides tags. Just, all of them, everywhere. I use them more as a tool than anything, so I don't want a list of these weird tags showing up on things.
Targets both character and item boxes and sets a maximum width and then spaces them evenly. It's also just a visual touch, because it offsets the boxes a bit from the title header, making it a bit easier when scrolling to find a title and then the subsections of items it contains.
Edit: Did you mean CSS, or the HTML for the Custom Items Layout? The Items layout HTML I shared previously is literally the entirety of it, just repeated with different headings and tags. All of the other effects are done in my CSS. Always happy to talk shop, feel free to hop onto the OP Discord: https://discord.gg/EkhD6GETI've got a fair bit more, but those are the main ones I have for the Items section. If there's something specific you are curious about, just let me know and I can go over it because I've, uh, got a lot of CSS.