Character Page Customization

Keryth987
Keryth987
edited March 2014 in Campaign Portal Building
OK, thanks to ImmortalDM and Thorvaldr, I'm customizing the Character Page on my newest campaign site (I need help, the campaign is like 1-2 yrs away).

Anyhow, how does one change the background for JUST the Character page? The main one, that lists all the characters?

Here is what I have so far - "The Furthest Stars Character Page":https://the-furthest-stars.obsidianportal.com/characters

Trying to get a background behind the character listings

Also, need to REMOVE the Search Bar and it's junk (except for the button to create a new character, of course)

And finally, is it possible to add content to the top of the page? Using this code on msot of my pages to provide the title and uniformity between the pages would really be nice

Characters

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/
"Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

Comments

  • GamingMegaverse
    GamingMegaverse
    Posts: 3,001
    Love Flash "Queen did my soundtrack" Gordon

    Just trying to help out.

  • twiggyleaf
    twiggyleaf
    Posts: 2,013
    And I love that deep blue colour!

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Keryth987
    Keryth987
    Posts: 1,047
    Thanks KillerVP, though those are only place-holder characters so I can get everything the way I want. They'll be there for a while though, which is why I had some fun with them.

    Thanks Twigs. I fell in love with the color scheme. Just seems right.

    However, I still need to solve the issues I mentioned above. Anyone got any suggestions?

    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/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • Keryth987
    Keryth987
    Posts: 1,047
    Thanks to ImmortalDM, TolsimirWolfblood, Basileus, and Thorvaldr, I'm customizing the Character Page on my newest campaign site and have MOSTLY what I want. This is all based off of the customization info from Thorvaldr's tutorial, CSS code shared with me by ImmortalDM and a modification of the Border Styling created by TolsimirWolfblood and Basileus.

    Here's the 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 {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 {display:none;background-color:transparent !important;}
    #quick_search {display:none;opacity:0.5;}
    .postfix {opacity:0.5;}
    .character-quick-search h4 {display:none;font-weight:bolder; font-size:150%; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5), -1px -1px 0px rgba(0, 0, 0, 0.5);}
    /show-tag-checklist {display:none;font-weight:bolder; font-size:150%; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5), -1px -1px 0px rgba(0, 0, 0, 0.5);}
    .dynamic_sheet_container {overflow: visible;}
    .character-list { BACKGROUND-IMAGE:url(http://cdn.obsidianportal.com/assets/198888/background1a.jpg); }
    .character-list {border: 15px solid transparent; border-image:url(https://db4sgowjqfwig.cloudfront.net/assets/310038/background.png?1395679981) 12 12 12 12 round;} .collapsed.collapsable-nav-row .main-content-container {width: 35%; left: 5.06em; padding-left: 0em; background-color: white}

    And here is what it looks like - "The Furthest Stars Character Page":https://the-furthest-stars.obsidianportal.com/characters

    Still trying to add content to the top of the page. Using this code on most of my pages to provide the title and uniformity between the pages would really be nice

    Characters

    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/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • Keryth987
    Keryth987
    Posts: 1,047
    Further modifications have been done and I've ALMOST got what I want.

    Here's the 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-quick-search h4 {background-image:url(https://db4sgowjqfwig.cloudfront.net/assets/310662/Sci-Fi-SciFi-Banner.jpg?1395840263);width:885px;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;}
    .dynamic_sheet_container {overflow: visible;}
    .character-list {BACKGROUND-IMAGE:url(http://cdn.obsidianportal.com/assets/198888/background1a.jpg); }
    .character-list {border: 15px solid transparent; border-image:url(https://db4sgowjqfwig.cloudfront.net/assets/310038/background.png?1395679981) 12 12 12 12 round;} .collapsed.collapsable-nav-row .main-content-container {width: 35%; left: 5.06em; padding-left: 0em; background-color: white}

    The thing now, is changing the text that is shown. Anyone know how to overwrite "Character Quick Search" with simply "Characters" and also, how to move it down a line in the display so it is centered from the top?

    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/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • Basileus
    Basileus
    Posts: 585 edited March 2014
    Looking good.

    To vertically center the text try this CSS (or rather, add these properties to the line you already have with these selectors):

    @.character-quick-search h4 {vertical-align: middle; display: table-cell;}@

    ---

    Technically, you can't affect content with CSS. However, you can sort of fake it with pseudo selectors. Essentially hide the existing element by replacing the .character-quick-search h4 settings with this:

    @.character-quick-search h4 {visibility: hidden;}@

    Then you can dynamically create a pseudo element before it that says "Characters" with this:

    @.character-quick-search::before {content: "Characters";}@

    Then format that with the appropriate styling to make it look/fit like you want.

    EDIT: Don't use h4::before because IE doesn't play well with filters on a single element.

    ALSO EDIT: It should also be noted that this sort of thing is considered naughty in terms of design versus content principles.
    Post edited by Basileus on
  • Keryth987
    Keryth987
    Posts: 1,047 edited March 2014
    Basileus, you are the man!. Works wonderfully.

    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/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/
    Post edited by Keryth987 on

Sign In or Register to comment.

May 2024
The World of Elurah

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

Categories