CSS to control height of the banner container

gorthmog
gorthmog
edited November 2013 in Campaign Portal Building
Hi all,
First thing, as a longtime ascendant member, I like the new look. Much cleaner and more modern. Obviously there are some growing pains, but that's to be expected for any "1.0" release.
I just had a quick question about the banner container height. I am trying to shrink the height to 180 pixels (slightly taller than my image). Here is my campaign site:
"Denizens of the Nentir Vale":https://denizens.obsidianportal.com
You can see that there is too much space between the banner and the top of the 3 sections. I've tried various CSS snippets from other posts, but nothing seems to shrink the entire banner container area. Here is my current css:

bc. /* Make my banner image honor its width instead of stretching */
.campaign-banner-image{ background-size: 900px; background-repeat: no-repeat; }
/* FAILED ATTEMPT: .campaign-public-layout #banner-container .campaign-banner-image {height: 180px;} */
/* Removes "highlights" and space above banner */
.campaign-public-layout .highlight-container {display:none;}
.campaign-public-layout #campaign-summary-row .row {opacity: 0.0; height: 0px}
/* Make the banner only show up on the first page. */
#banner-container { display:none; }
.campaign-landing-show #banner-container { display:block; }

Any help would be greatly appreciated!
Cheers,
Chris
p.s. is there a page somewhere which lists all of the available OP style classes, such as "campaign-public-layout", "banner-container", etc.?

Comments

  • Langy
    Langy
    Posts: 364 edited November 2013
    Try this:

    @/*Banner*/
    .campaign-public-layout #banner-container .campaign-banner-image {
    padding-bottom: 180px;
    }@
    Post edited by Langy on
  • gaaran
    gaaran
    Posts: 740 edited November 2013
    Here you are, I think this might do the trick:

    .front-nav-container {
    margin-top: -75px
    }

    .main-content {
    margin-top: -75px;
    }

    .campaign-public-layout #sidebar {
    margin-top: -75px;
    }

    I tried it on one of my campaign pages "here,":https://the-secrets-of-death.obsidianportal.com/ and you can see that it raised up the three sections in question. I don't see anywhere that it breaks anything yet, but if there is, let me know, and I'll see if I can't fix it.

    Edit: Dangit Langy, even at 7am I can't keep up!
    Post edited by gaaran on
  • gorthmog
    gorthmog
    Posts: 14
    Thanks Langy and gaaran, both of those methods worked great! Keep up the good work.
    -Chris
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!

Discussions