Character Page Customization

Keryth987
Keryth987

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:

Phoenix Rising Character Page

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; }

 

Comments

  • Keryth987
    Keryth987
    Posts: 949

    No one at all? I really need help with this one guys,

    PLEASE :)

  • Johnprime
    Johnprime
    Posts: 252 edited October 2016

    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.

    Post edited by Johnprime on

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • Keryth987
    Keryth987
    Posts: 949

    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

  • Johnprime
    Johnprime
    Posts: 252

    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

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • cgregory
    cgregory
    Posts: 777

    Do you mean like this?

    image

     

    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;

        top: -200px;

        position: relative;

        padding-top: 200px;

        z-index: -1;

    }

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Keryth987
    Keryth987
    Posts: 949

    Yes. Yes I do

     

  • Keryth987
    Keryth987
    Posts: 949

    Page looks right but nothing works on it now :(

    Here's my code


    /*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;top: -200px; position: relative; padding-top: 200px; z-index: -1;}} .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; }
    /*Set up scaling animation on hover for Character Page*/
    .character-list-item:hover {-webkit-transform:scale(1.05,1.05);-moz-transform:scale(1.05,1.05);-o-transform:scale(1.05,1.05);-ms-transform:scale(1.05,1.05);transform:scale(1.05,1.05);}

     

  • cgregory
    cgregory
    Posts: 777 edited October 2016

    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
    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 777

    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!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Keryth987
    Keryth987
    Posts: 949

    Thanks so much. That fixed it

Sign In or Register to comment.

January 2022
Lakes of Blood and Ash

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

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

Discussions