Bortas
Hey gang!
I'm working on my character page... again... (still?!). I'm using my slightly modified version of Kallak's character page. I'd like to place an overlay over a few specific characters, either a skull and cross bones image, or a "RIP" text overlay, to indicate dead characters. Any ideas? I've been scouring the web for the last few hours, and everything I find demands some change in the HTML. wompwomp.
"The page":http://morwindl.obsidianportal.com/characters
The general code:
@
.character-search-area {opacity:0.2; left:14px; top:6px;}
.character-search-area:hover {opacity:0.8;}
.character-index .character-info .tags-list, .character-index .character-list-item .game-content-image, .character-index .character-list-item .character-info .right-side-fade-out,.character-index .character-info div:first-of-type div:first-of-type {display:none !important;}
.character-index .character-list-item-container {position:relative !important; width:163px !important; height:163px !important; display:inline; clear:none !important; color:transparent; margin-bottom:6px; margin-left:3px; margin-right:3px;}
.character-index .character-list ul {padding-left:27px;padding-right:1px;}
.character-index.campaign-public-layout .character-list-item .character-info, .character-index .character-list li {padding:0px !important;}
.character-index .character-list-item.gm-only .character-info {border:5px solid !important; border-color: #CD853F #B22222 #8B0000 #A0522D !important;}
.character-index .character-list-item.npc .character-info {border:3px solid; border-color: #808080 #2F4F4F #000000 #696969; opacity:1;}
.character-index .character-list-item .character-info {text-align:center !important; background-size:163px, 163px; background-repeat:no-repeat; height:163px !important; width:163px !important; border:3px solid; border-color: #388DFC #1279FF #006EFF #2483FF; opacity:.5;}
.character-index .character-list-item .character-info:hover {opacity:.8;}
.character-index.campaign-public-layout .character-list-item h4.character-name {border-bottom:0px !important;}
.character-index.campaign-public-layout .character-list-item h4.character-name a {color:#dadada !important; text-decoration:none; position:absolute !important; bottom:0px !important; left:0px !important; width:163px; padding-top:138px; padding-bottom:3px; padding-left:3px; padding-right:3px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #555555;}
.character-index .character-list-item .icon-edit {text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #555555; color:#dadada; opacity:.3; position:relative; top:-5px; left:5px;}
@
The dead NPC code: @.game-content-image[title="Emril Rillash"] + .character-info {background-image:url('https://db4sgowjqfwig.cloudfront.net/images/2466308/Emril.jpg'); border:7px solid !important; border-color: #000000 #696969 #808080 #2F4F4F !important;}
@
I would think the changes I would need would be in the small above block of code, but... man, I feel like a CSS noob.
Thanks for any advice,
-bort
"Morwindl":http://morwindl.obsidianportal.com
Comments
Aha! Finally figured it out!
@
.game-content-image[title=/*exact chracter name*/] + .character-info a:before {content: url(/*url to overlay image*/); clear: right; display: block;}
@
You can see an example on "my character page":https://morwindl.obsidianportal.com/characters which highlights six significant deaths.
Next up: figure out an image that universally means 'retired'. For now, retired characters are simply faded out until I figure this one out.
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
Just trying to help out.