Help with Overlays?

edited January 2015 in Campaign Portal Building
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":
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-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:[title="Emril Rillash"] + .character-info {background-image:url(''); 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,


  • billy_blackerby
    Posts: 12
    I would propose just using a .png library locally and then saving out the updated jpg to your site. For instance I've got some prison bars that I am going to overlay on some characters and then just update their character image on the site. Seems simpler/faster than having to maintain all that custom CSS.
  • Bortas
    Posts: 645
    I would, but I'm even worse than graphics than I am with code!

    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": 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.

  • GamingMegaverse
    Posts: 2,908
    Nice work Bortas!

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.



Sign In or Register to comment.

Campaign of the Month
September 2021

D&D 3.0: Tales from Mystara

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

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