Character Page Customization

Keryth987
Keryth987
edited February 2015 in Campaign Portal Building
OK, I've started vigorous work on a new campaign setting, one I plan to pitch to my Gaming group down the line. Anyhow, as is normal here, it is highly customized.
My dilemma is this, I've customized the default Characters page quite a bit, but it still doesn;t completely match up wiht the formatting I'm using everywhere else.

Main site is here: "Phoenix Rising":https://phoenix-rising-1.obsidianportal.com/

Character page is here:
"Phoenix Rising Character Page":https://phoenix-rising-1.obsidianportal.com/characters

All I'm really trying to do is figure a way to put the same border around the Character page itself that I use throughout the rest of the site.

All help greatly appreciated. Thanks


Keelah Se'lai,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
"2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/

Comments

  • Unknown
    For the Character Pages the selector you're looking for is:

    .character-show .main-content section {
    /* STYLE DETAILS HERE */
    }

    For the actual listing page you want to target this:

    .main-content .character-list {
    /* STYLE DETAILS HERE */
    }

    At least I am fairly certain that is what you want, haven't tested it at all.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • Keryth987
    Keryth987
    Posts: 1,047
    After some code borrowing(Thanks Tohorvaldir, ImmortalDM, and KillerVP among others) and alot of trial and error, I mostly/sorta have what I wanted.


    Character page as it now stands is here:
    "Phoenix Rising Character Page":https://phoenix-rising-1.obsidianportal.com/characters

    And here is my crazy CSS 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:30px; 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:white;}
    .character-info h4.item-name.title a {color:white;}
    .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:125px !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) 12 12 12 12 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;}


    If anyone knows of an easier way to do this, or has suggestions how to continue to match this page with the rest, please let me know.

    Thanks


    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/

Sign In or Register to comment.

March 2024
Wrath of the Highborn

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