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!
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".
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.
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.
"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
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?
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.
Comments
.campaign-title,.flame-dragon{
display:none!important;
}
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)?
- Kallak
.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".
- Kallak
My players are looking forward to SS, especially since they (no me) have already ran/run in those other APs.
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.
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
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?
.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;}
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. :)
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.