Remove Default OP Banner

Krothos
Krothos
edited February 2016 in Campaign Portal Building
https://shattered-star-15.obsidianportal.com

How to remove the dragon banner across the top? I want to replace it with a banner I will upload through the Style section under Settings. Thanks.

Comments

  • Lxcharon
    Lxcharon
    Posts: 189
    Enter this into your CSS code:

    .campaign-title,.flame-dragon{
    display:none!important;
    }
  • Krothos
    Krothos
    Posts: 230
    Thank you. That worked to remove the dragon icon and the wording. What about the empty space above the banner I'm using now?

    Or is there a way to leave the flame dragon icon (which I love BTW) and insert my banner as the campaign title (to the right of the flame icon)?
  • Krothos
    Krothos
    Posts: 230 edited February 2016
    Further, on my Dashboard, Forums, and Calendar pages, there is a empty white space at the top of these pages with my banner is cropped to fit into the upper-right corner. Any way to fix this so that my banner is used across this space? Thanks!
    Post edited by Krothos on
  • Kallak
    Kallak
    Posts: 1,090
    Ah Shattered Star, I plan to run that one for my group at some point, maybe after my upcoming Star Wars game.
    All the best,
    - Kallak
  • Krothos
    Krothos
    Posts: 230 edited February 2016
    Kinda excited about it, too. My group is currently in Book 5 of Rise of the Runelords, so getting some prep done early.
    Post edited by Krothos on
  • Basileus
    Basileus
    Posts: 589 edited February 2016
    @/* REMOVE CAMPAIGN TITLE TEXT AND DEFAULT BANNER */
    .campaign-public-layout .campaign-title, .campaign-public-layout #banner-container {display:none;}
    /* ADD BANNER IMAGE BESIDE OP DRAGON LOGO */
    .campaign-public-layout .campaign-public-title-container {background-image: url("urlofimagefile"); background-size: contain; background-repeat: no-repeat;}@

    Just replace the URL of the image file with your own banner (keep the quotes).

    EDIT: If you'd rather crop the banner so that it covers the whole area (because the proportions are different), use "cover" instead of "contain".
    Post edited by Basileus on
  • Kallak
    Kallak
    Posts: 1,090
    I ran Runelords for our group a little bit back, and now one of the other GMs is currently running Second Darkness, so our group will have a lot of the impact of this campaign I'm hoping since we'll have run through 2 out of the 3 "prequels".
    All the best,
    - Kallak
  • Krothos
    Krothos
    Posts: 230
    Very cool, thanks Basileus. Now I have to find a website to post my banner since I have it saved as a file on my local computer only.

    My players are looking forward to SS, especially since they (no me) have already ran/run in those other APs.
  • Basileus
    Basileus
    Posts: 589
    You should just be able to upload it like you would if you were using the usual banner functionality on OP, the CSS will take care of the rest (removing where it would normally appear). So:

    1) Upload banner normally.
    2) Once uploaded, right click the image and select "Copy image location" (or whatever is equivalent for your browser, if not FIrefox)
    3) Implement the CSS above.
  • UselessTriviaMan
    UselessTriviaMan
    Posts: 542
    As an aside, I've found "Photobucket":http://smg.photobucket.com/ to be a fine (and free!) site for hosting my images. I have over a thousand images currently on there, and have only used 7% of my allotted space.

    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • Krothos
    Krothos
    Posts: 230
    Think I got this done. Please tell me what you think.

    One minor (and really minor) is the banner on the Front Page is too short and not allowing the full banner to be shown from top-to-bottom. Can I increase the height of the banner?
  • Krothos
    Krothos
    Posts: 230
    This is what I've come up with and it's showing the full image but small :((

    .campaign-public-layout .campaign-public-title-container {background-image: url('//db4sgowjqfwig.cloudfront.net/campaigns/133321/banners/556918/shattered-star.jpg?1455302641'); background-size: contain; fixed; height: 199px; width: 994px; background-repeat: no-repeat;}
  • Krothos
    Krothos
    Posts: 230 edited February 2016
    UGH!!! Now my banner has completely disappeared!!!

    Sorry for my frustration. I've decided to let it stand how it is now. Sometime my need for specifics can get the better of me. :)
    Post edited by Krothos on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    I do this a slightly different way. If you like the way the banner looks "here":https://clarity.obsidianportal.com/ or "here":https://sotfa.obsidianportal.com/ or "here":https://mx.obsidianportal.com/, try this:

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

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

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

    Note that this uses the existing banner element, so no need to paste it in by hand.
  • Krothos
    Krothos
    Posts: 230
    Chainsaw... you ARE a life saver.. or actually a campaign website formatting desires saver! Thank you. :)
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Glad I could help. :)
Sign In or Register to comment.

September 2022
Merovia

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