Do, working on a new Campaign idea, and trying to customize the Character Page to match the stylization of the rest of the site.
Here's what I have so far:
And for reference, the NPC Page
The main issue right now, is extending the background to incorporate the Characters Banner.
For additional reference heres the CSS I'm using for the Character page right now
/*CHARACTER PAGE CUSTOMIZATION*/
.character-name.title {position:relative; margin-left:auto; margin-right:auto; width:95%;font-family:'Audiowide';font-weight:normal; text-align:center;}
.character-show .main-content section{background-color:white !important;}
.character-show .bio h6, .character-show .tagline + div h6 {display:none;}
.character-index.campaign-public-layout .character-list-item .character-info div, .item-index.campaign-public-layout .character-list-item .character-info div {font-size:small; font-style: italic; color: white;}
.character-list-item { position:relative;top:10px; background: linear-gradient(23deg, #2f0be0 0%, #000000 100%); font-family:'Times New Roman'; }
.item-name.title {font-family:'Audiowide';}
.right-side-fade-out {display:none;}
.tags-list {color:transparent;}
.character-info h4.character-name.title a {color:lightBlue;}
.character-info h4.item-name.title a {color:lightBlue;}
.character-info h4.character-name.title a:hover {color:blue; }
.character-info h4.item-name.title a:hover {color:red; }
.character-info ul li a.tag-link {display:none;position:relative;left:-20px; color:blue;}
.character-list-item-container {position:relative !important; width:33.33% !important;height:135px !important;display:inline; clear:none !important; color:transparent;}
.character-quick-search {background-color:transparent !important;}
#quick_search {display:none;opacity:0.5;}
.postfix {display:none;opacity:0.5;}
.show-tag-check-list{display:none;}
.character-list {BACKGROUND-IMAGE:url(https://db4sgowjqfwig.cloudfront.net/campaigns/101742/assets/386781/Phoenix_Rising_Background.jpg); }
.character-list {border: 15px solid transparent; border-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/101742/assets/421366/Phoenix_Rising_Background_Combo.jpg) 15 15 15 15 round;} .collapsed.collapsable-nav-row .main-content-container {width: 35%; left: 5.06em; padding-left: 0em; background-color: white;}
.character-quick-search h4 {display:none;}
.character-quick-search::before {content: "Characters";vertical-align: middle; display: table-cell;background-image:url(https://db4sgowjqfwig.cloudfront.net/assets/310662/Sci-Fi-SciFi-Banner.jpg?1395840263);width:1000px;height:110px;font-size:xx-large;font-family:'Audiowide';color:royalblue !important;font-weight:bold;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 0px 0px 4px black;text-align:center;}
.character-index.campaign-public-layout .character-list-item img.game-content-image { border:1px Solid Blue; border-radius:45%;}
.character-index.campaign-public-layout .character-list-item { padding:5px; padding-bottom:14px; background:none; background-image: url(//db4sgowjqfwig.cloudfront.net/campaigns/101742/assets/439835/Earth-From-Space.jpg); border-radius:6px; border:1px solid blue; border-top-left-radius:50px; border-bottom-left-radius:50px; }
.character-index.campaign-public-layout .character-list-item .character-info div {color:lightBlue; }
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
No one at all? I really need help with this one guys,
PLEASE :)
Sorry, I'm not really understanding what you're looking for. You want the Characters banner from the page at this link, http://phoenix-rising-1.obsidianportal.com/characters to be above the page at this link, https://phoenix-rising-1.obsidianportal.com/wikis/dramatis-persoane?
Guess I'm being a little dense at this but if you could explain it a little more I might be able to help.
Johnprime
Where the west is really wild!
The Valley of Life
What I want is the background that is currently behind the Characters (Test 1, Test 2, etc) to continue until it is behind the banner that Says Characters, same as the page looks on the Dramatis Personae page
So the white background with the shadowed logos that is behind the four thumbnails of the characters to extend from the characters banner down through where the thumbnails are?
From this div section (<div class="character-quick-search">) through to this one (<div class="character-list">)?
If I've got this right, going to have to think about it a little first!
Johnprime
Where the west is really wild!
The Valley of Life
Do you mean like this?
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Yes. Yes I do
Page looks right but nothing works on it now :(
Here's my code
I'll take a look tomorrow, once i am on an actual computer rather than just an ipad.
I'm wondering if the z-index is causing the issue.Maybe instead of changing the z index of the character list, changing the z index of the character banner is the better idea
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Yeah, it is the z-index: -1 that is causing the unresponsiveness. Delete that and instead add z-index:1 to the character search area class.
Basically the -1 cause it to go behind the transparent main content area, so you couldn't click links. So instead we want to bring the character search area forward instead of pushing the character list area backward.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Thanks so much. That fixed it