Consistent backgrounds across pages and in gm only

edited December 2018 in Campaign Portal Building

I've been on OP for a long time and run several campaigns, but am finally trying my hand at customizing a few campaigns I'm currently running. is what I'm working on at the moment. I've managed to copy and paste a few CCS codes that are helping to bring it together, but with no experience in CCS or HTML, I'm kind of stuck. I'm trying to get the same parchment background to appear for my GM only sections (which is unreadable to me with the page background I have) and for items. I've tried searching the forums, but I am honestly not experienced enough to really lock it down the way I'd like. Is there a kind of formulaic way I could apply it to all these different areas of a campaign? My players so far like it, and I really do too. Any help would be huge!

Post edited by Conan_Lybarian on


  • SkidAce
    Posts: 830

    My custom background is on all of my pages I think.  See if this helps any.

    .post-section, .campaign-landing-page-container {background-image: url(; padding: 5px; border:3px solid black;}
    hr {color: #1e90ff; background: #1e90ff; height: 2px; }


  • Conan_Lybarian
    Posts: 240

    Not sure why- but it's not taking for mine. I'll keep at it though. Thanks!

  • Kallak
    Posts: 1,090

    Double check to make sure you don't have another setting that's conflicting.

    All the best,
    - Kallak
  • Conan_Lybarian
    Posts: 240

    I cleared the other Ccs lines to be sure. That works for the landing page, but isn't on any others. I'll keep trying though. 

  • Conan_Lybarian
    Posts: 240

    Ack! Now my old code is leaving my front page messed up! Maybe I just should leave it plain for all the trouble I'm putting myself through.

  • Abersade
    Posts: 324

    This thread is sort of related, you may want to check it out. Should hit up all of the correct classes to target at the very least.



  • Conan_Lybarian
    Posts: 240

    Thanks! I've been fiddling with it and am pretty happy with it now. To be honest, I think I actually used part of your code to solve my problem! Now I just need to set npc backgrounds. I'm also playing with font styles, but that seems to be a different can of worms!

  • Krothos
    Posts: 230

    I want to extend this thread a bit further. I want all the pages to have the same look and feel. Using the code below, I have the Front Page, Adventure Log, Wiki, Characters, and Maps using my custom look. What are the object names to extend this to the Dashboard, Forum, Calendar, Media Library, and Settings?

    /* Hide the campaign's title text when banner present */
    .campaign-public-layout #campaign-summary-row .campaign-title { display: none }

    /* Auto-scale the campaign's banner image to its container */
    .campaign-banner-image { background-size: 100%; background-repeat: no-repeat }

    /* Set smaller size and position on banner image */
    .campaign-public-layout #banner-container .campaign-banner-image {
    position: absolute;
    bottom: 37px;
    right: 0px;
    height: 130px;
    width: 312px; /* Set proportional to your own banner at 110px height */
    padding-bottom: 0px }

    /* Set color Last Update and Play Status */
    .stat-label { color: #472d12 }

    /* Remove player's ability to edit wiki pages */
    .campaign-member .icon-edit { display: none }
    .campaign-game-master .icon-edit { display: inline }

    /* Remove 2nd container line */
    .campaign-public-layout .main-content .highlight-container { display: none }

    /* Landing and mage page transparency */
    .campaign-landing-show .campaign-landing-page-container { background-color: #fbfae7 }

    /* Adventure Log Summary page transparency */
    .adventure-log-index .adventure-log-post { background-color: #fbfae7 }
    .adventure-log-index .overflow-fade-out { display: none }
    .adventure-log-index .date-column { background-color: #fbfae7; color: #472d12 }
    .adventure-log-index .adventure-log-new-container { background-color: #fbfae7 }

    /* Individual Adventure Log page transparency */
    .adventure-log-show .post-header-container { background-color: #fbfae7 }
    .adventure-log-show .post-main { background-color: #fbfae7 }
    .adventure-log-show .post-comments { background-color: #fbfae7 }
    .adventure-log-index .post-date { background-color: #fbfae7 }
    .adventure-log-show .post-date { background-color: #fbfae7; color: #472d12 }
    .sidebar-last-updated {color: #472d12 } { background-color: #fbfae7 }

    /* Wiki page transparency */
    body.campaign-public-layout { background-color: #fbfae7 }
    body.campaign-public-layout { background-color: #fbfae7 }

    /* Character/Item pages transparency */
    .character-show .main-content section { background-color: #fbfae7 }
    .character-index.campaign-public-layout .character-list-item { background-color: #fbfae7 }
    .character-index.campaign-public-layout .character-quick-search { background-color: #fbfae7 }



  • Conan_Lybarian
    Posts: 240

    @Krathos- I'm not proficient by any means, but I think the code for the pages/items you want is going to be different. I think they're considered back office or sort of admin pages for you campaign and so have different functions than regular pages. Someone else will have to confirm that, but I would do some searching and see if anyone has posted code for it in the past on the CSS forums.

  • Abersade
    Posts: 324

    The CSS to target the "back end" pages is indeed different. I'd venture to guess that this is because the back end pages were developed after the main pages were, using a different (and in many cases more direct) naming convention for the CSS classes. This could date further back than the Reforge but I can't confirm that, as I didn't actually start editing the CSS for my game until roughly a week before the Reforge was pushed live and I kept no backups at that time.

  • Krothos
    Posts: 230

    Thank you. Good information.

  • weasel0
    Posts: 435

    I don't think it's from earlier as the pre-Reforging site had a uniform look across all pages.


  • Abersade
    Posts: 324

    If that's the case that would explain part of the issues surrounding the Reforge and how everyone's CSS was fubared. Given that the general consensus was that the Reforge wasn't finished properly (or some might say at all) perhaps the intention was to update the class names to be more user friendly and they ran out of time/patience etc. It is clear that the class names look to either have been designed by two completely different people or they were created by the same person at two completely different times, because they are only vaguely similar to each other in structure. Either way I'm just speculating at this point.

    It's off topic here but what I'd really like to see is the complete separation of the Items page from the Characters page. For those who aren't aware the CSS to target these pages overlaps heavily and that makes it much more difficult to change only what you want to.

  • Conan_Lybarian
    Posts: 240

    @Abersade That explains exactly why the other thread I posted about items is  causing some head scrathing! I'll have to hop over and mention  it lol

  • cgregory
    Posts: 780

    @Abersade what are you looking to target differently in characters and items? You should be able to target them separately for almost everything if i remember the css stricture correctly. The main issue is you need to sometimes go all the way back to the body class even if it doesn’t seem like you should need to.

    They are among us!


                       XCom: Defiance - Campaign of the Month November 2016



Sign In or Register to comment.

January 2023
Fake News, Real Adventure

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!