Custom adventure log background colour
So what I am trying to do is use a .tag on an appropriate adventure log to change the background colour of said adventure log. I am trying to encourage players to write up more recaps "in character" and would like some method of auto styling each character adventure log to adjust to each particular character. So something like this:
ul.tags-list.inline-list.small-list a.tag-link[data-tag="journalA"] would then change the background colour of the two adventure log parts:
.adventure-log-show .post-header-container
body.campaign-public-layout .post-section.post-main
For test purposes I have a default white background and just trying to change it to say light grey. I can get more fancy once I get initial code working.
Not sure if this can be handled by just .css of needs to jump into javascript?
Anyone have nay suggestions or examples from existing campaigns where this has been done? Much appreciated.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Pretty sure you can skip the arcane malfeasance of javascript on this one and instead rely on good old straight forward never-not-confusing CSS. I'll spin up a mockup on my testbench site and see if I can get it working, pretty sure it can be keyed the way you want.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
Hmm, not as easy as I'd hoped. In wiki pages and adventure logs, the tag data is included as a somewhat fairly deeply nested child of the page that it corresponds to, which is different than how characters (and presumably items) are handled. In order to work around this, we need a way to select the parent selector by identifying the tag data that the child contains.
By default, CSS doesn't directly support doing this. That said, the :has selector, which is not supported fully as of yet by all browsers, may work.
I'll let you know what I find.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
So, somewhat unshockingly, :has has some limitations. I managed to get it to work in the Adventure Log List page, as well as for the header of the individual adventure log pages. The issue is getting it to work on the content that doesn't have the tag embedded in it directly.
For my testing, I used red.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
The issue now is that the other portions of the page that you'd actually like to customize don't have that tag associated within them, as it's a child of the first section and not any of the others.
Ironically this issue goes away entirely if you want to use wiki pages as journal pages for the players, since they consist of one main section with an embedded tag as a child element. For that situation :has works perfectly.
Example:
body.campaign-public-layout .post-section.post-main:has(a.tag-link[data-tag="this_be_a_tag"]) {background-color: red;}
Does this:
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
It's ALIVE! Now I know what it feels like to be ... something!
Here you go, you'll need to change the tag name and styling to match what you want.
.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="this_be_a_tag"]) {background-color: red;}
.post-header-container:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="this_be_a_tag"]) {background-color: red;}
.post-header-container:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="this_be_a_tag"]) + .row > .small-12.columns > * {background-color: red;}
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
You can see it in action here: https://abersade-testbed.obsidianportal.com/adventure-log/are-we-testings-targeting-adventure-logs-with-tags-now
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub
Woohoo, thanks Abersade. I got busy with work and life so I was finally able to check back to this thread and try it out. Works great! Now I just need to get this new campaign up and running, then get the players to post! :)
Glad to hear it.
GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub