Home › Discussions › Campaign Portal Building › Border colour based on character tags - Campaign Portal Building Discussions on Obsidian Portal Community Forums
Border colour based on character tags
Is it possible to apply custom CSS styles to character listings based on their tags, or some workaround to achieve the same effect?
This is my character page: https://bloodandstone.obsidianportal.com/characters
Currently I've got the various noble houses in my game sorted by using different unicode whitespace charactres in front of their names. That works fine for keeping things in order, but what I'd really like to do is have a custom border colour for each group, to make the distinction more obvious. Is there any way to do this?
This is my character page: https://bloodandstone.obsidianportal.com/characters
Currently I've got the various noble houses in my game sorted by using different unicode whitespace charactres in front of their names. That works fine for keeping things in order, but what I'd really like to do is have a custom border colour for each group, to make the distinction more obvious. Is there any way to do this?
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
@.game-content-image[title="EXACT CHARACTER NAME"] + .character-info {
border-color: blue; /* what color border should be */
border:4px solid; /* how bold border should be */
}@
And for each character you want to change the border of, you do an entry exactly like above. Fun, huh? ;-)
I really hope someone else answers with a far more elegant solution..., but I doubt it exists without having to access database information, which CSS doesn't do.
In the "Tales of..." campaign I'm working on below, you can see we put a yellow border around PCs, to make them stand out from NPCs, and it is only one CSS statement. But as far as CSS and character page, you have 3 options: PC, NPC and GM only.
-bort
"Morwindl":https://morwindl.obsidianportal.com - first and only campaign I've DM'd (first experience with CSS)
"Tales of...":https://talesof.obsidianportal.com - campaign I'm helping a friend design the layout for
Campaign of the Year - 2018
(I'm, uh, asking for a friend. Yeah, that's it. I totally won't steal it. Much.) ;-)
Ptolus, City by the Spire - 2016 Campaign of the Year
"Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life." - - Kevin Smith
This is what I use.
/* TAGS */
/* Color Coded Tagging */
/* use these lines to change the font color and background color*/
/* data-tag= is the tag (case sensitive), background-color: is the "bubble" color around the tag text, color: is the color of the tag text */
.campaign-public-layout #content a[data-tag="player"] {background-color: #365BCE;color: #ffffff;-webkit-border-radius:1000px;border-radius:1000px;padding:0.1875em 0.625em 0.25em;font-size:0.875em;}
.campaign-public-layout #content a[data-tag="captured"] {background-color: #f9bd37;color: #ffffff;-webkit-border-radius:1000px;border-radius:1000px;padding:0.1875em 0.625em 0.25em;font-size:0.875em;}
.campaign-public-layout #content a[data-tag="enemy"] {background-color: #c60f13 ;color: #ffffff;-webkit-border-radius:1000px;border-radius:1000px;padding:0.1875em 0.625em 0.25em;font-size:0.875em;}
.campaign-public-layout #content a[data-tag="deceased"] {background-color: #2E2E2E;color: #E6E6E6;-webkit-border-radius:1000px;border-radius:1000px;padding:0.1875em 0.625em 0.25em;font-size:0.875em;}
.campaign-public-layout #content a[data-tag="ally"] {background-color: #0B0B61;color: #F5F6CE;-webkit-border-radius:1000px;border-radius:1000px;padding:0.1875em 0.625em 0.25em;font-size:0.875em;}
.campaign-public-layout #content a[data-tag="ARC"] {background-color: #0B0B61;color: #F5F6CE;-webkit-border-radius:1000px;border-radius:1000px;padding:0.1875em 0.625em 0.25em;font-size:0.875em;}
.campaign-public-layout #content a[data-tag="Durnskald"] {background-color: #000000;color: #FF0000;-webkit-border-radius:1000px;border-radius:1000px;padding:0.1875em 0.625em 0.25em;font-size:0.875em;}
.campaign-public-layout #content a[data-tag="Tsochar"] {background-color: #8000FF;color: #01DFA5;-webkit-border-radius:1000px;border-radius:1000px;padding:0.1875em 0.625em 0.25em;font-size:0.875em;}
This page is what it looks like: https://rise-of-the-durnskald.obsidianportal.com/characters
If you don't want the bubble of color around the tag, omit the "background-color: #0B0B61;" part.
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
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
Here is some code that I remember Basileus using to alter the text color of the actual tags:
@.character-index.campaign-public-layout #content a[data-tag="PC"] {color: springgreen; font-weight: bold;}
.character-index.campaign-public-layout #content a[data-tag="Deceased"] {color: firebrick; font-weight: bold;}@
There maybe a way to use parts of this code, combined with your code to isolate specific groups classified by their TAGS, rather than their image name. Play around with it a bit to see what you could create.
-bort
"Morwindl":https://morwindl.obsidianportal.com - first and only campaign I've DM'd (first experience with CSS)
"Tales of...":https://talesof.obsidianportal.com - campaign I'm helping a friend design the layout for
Campaign of the Year - 2018
Ended up using Bortas' method to manually apply borders to each character, had the desired effect, even if it was a little tedious : https://bloodandstone.obsidianportal.com/characters
But now I've got another question on the matter: the borders seem to render on a layer below the character portraits on both browsers I've tried. Is there anyway to change that? I'd like the borders over the portrait if possible, but it's hardly a huge issue.
I pastebinned my CSS in case it helps any. http://pastebin.com/PLVJFrsy
Looks like I need to build myself a testing campaign to fiddle with some concepts like this. I'll get back to everyone soon if I manage to find some kind of solution to this that doesn't require writing up CSS for every single character that a campaign has (since I view that solution as very poorly setup due to the level of clutter this will generate in the CSS file which will in time have an impact on page load times).