Bedford: Changing the banner height?

I’ve been trying to change the banner/header height in the Bedford template by inserting this in the CSS editor but it’s not yielding any results.

#collection-xxxxx #banner-thumbnail-wrapper { height: 50px; }

Does anyone have any suggestions on what else can be done? I would also like to be able to edit the height of the banner when it’s a slideshow.

Thanks!

I'd also like to know how to do this. Trying to make the banner fill the size of the page before scrolling down.

An option like in Marquee: 1/3 page, 1/2 page, full page would be ideal.

I managed to change the height of the banner by manipulating the image height in an photo editor before uploading it as a thumbnail.

Still can't figure out how to change the height of a slideshow banner though.

Best of luck guys!

Anyone got a solution on how I can make the image full screen?

I would really like to know how to change the height of slideshows on Bedford as well. Already suggested to them in a ticket to add that on in the style editor. Hopefully they will. Otherwise if someone could supply a code that would be very much appreciated.

I managed to make the banner larger by adding empty lines/spaces in theDescription under Configure Page.

This javascript snippet should make all the hero images and galleries in Bedford take up the full window height.

Just drop this in the footer code injection. Can't stress that footer part enough, there will be JavaScript errors if you put this in the header.

<script>
(function () {

   /*
       To make this work on the homepage only,
       set this variable to true. Then uncomment
       the .homepage selector in the CSS below.
   */
   var homepageOnly = false;

   if (homepageOnly === true && !Y.one('body.homepage')) {
     return;
   } else {
       var elem = Y.one('.banner-thumbnail-wrapper');
       var windowHeight = window.innerHeight;
       if (elem && elem.getComputedStyle('display') != 'none') {
           var content = Y.one('.desc-wrapper') || Y.one('.blog-item-wrapper');
           var padding = (windowHeight - content.get('clientHeight')) / 2;
           elem.setStyles({
               'paddingTop' : padding,
               'paddingBottom' : padding
           });
       } else {
           var wrapper = Y.one('#promotedGalleryWrapper .sqs-gallery-container');
           var gallery = Y.one('.sqs-featured-posts-gallery') || Y.one('#promotedGalleryWrapper .sqs-gallery');
           if (gallery) {
               gallery.setAttribute('style', 'height:' + windowHeight + 'px !important');
           }
           if (wrapper) {
               wrapper.setAttribute('style', 'height:' + windowHeight + 'px !important');
           }
       }
   }
})();
</script>
<style>
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper,
/*body.homepage*/ .sqs-featured-posts-gallery .slides-controls,
/*body.homepage*/ .sqs-featured-posts-gallery .slides,
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts,
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post {
   height: 100% !important;
}
</style>

Update: Added some CSS to make the featured blog galleries work.

Update 2: Added an option to make this work on the homepage only.

Use this code in the Custom CSS Editor to control the height of the banner area in Bedford template:

#collection-52f0815fe4b01bd82c2683f1 .desc-wrapper {
 height:150px!important;
}

Substitute my ID number for your collection ID number of course.

Good luck and let me know if this works for you!

This is great but still limits the height of the banner image to one px height. I would love it if this could be manipulated to make image heigh dynamic so it could snap to the full screen size no matter the resolution.

@foleyatwork and @eanderson - Thank you both very much. This is excellent! Much appreciated.

@foleyatwork and @eanderson thank you! Both of you are amazing and I greatly appreciate the work you've put in to answer our questions.

If you shorten the banner, the banner layout (title text, button, tagline) shifts.

What code/ step is required to re-center the Title Text, tagline and button against the shorter (less tall) banner?

Thanks for any clarification.

—M

@foleyatwork - When making the adjustment to enable this only for the homepage, the blog master page loses its header entirely? The individual blog posts are fine but on the blog page, the header completely disappears. Thoughts?

You got a link where this is occurring?

@foleyatwork - Unfortunately I'm working in preview mode, though I think I figured out the issue. I was removing "/body.homepage/" entirely and not just the actual comments. I read your notes as if I should remove the comment and it's contents entirely. Oops! Thanks for the quick follow up!

@foleyatwork - It appears the blog post titles that are part of the scroll don't adjust the height of the header when on a smaller resolution screen. Below is a screenshot, on the right is my larger monitor at a larger resolution and on the left is my laptop. Thoughts?

http://s28.postimg.org/3ry3rr7ql/screenshot.jpg

You got a link?

@foleyatwork - Site is now live (ny-ave.com), I've reported the issue with SquareSpace support as the issue isn't fixed even after removing the code. I think we've narrowed it down to 15" devices at a specific resolution on a specific version of Windows. Weird, huh?

foleyatwork,

Your code works great... But is their a way to make it work on the blog list and blog item pages ?

Thanks

I tried the code above, on my site that is using a gallery on the home page, and it works great. Except on Firefox. On Firefox, the container is scaled (as you can see the black background) but the contained pictures are not. Works in Chrome and IE, and on the iPad. Any ideas?

Maybe post a link to your site so people can help.

This works quite well. The only issue I notice is that the images / galleries are window height, but below the header. Meaning a section of the photo goes below the bottom of the screen, equal to the height of the header. This also makes the image body text lower than it should be, since the image body text is centered to the image. Does anyone know a way to subtract the height of the header so the images are truly window height and the body image text is properly centered?

I'm also having issues with Firefox, btw.

@foleyatwork The code worked for me and at first it was fine on mobile too, but now my images aren't fitting on the screen of my phone, they are much wider with mobile styles on or off. Is there something that should be added to fix that? You can see it at www.weatherbrand.com

Thanks!

Hello

When I adjust the banner height percentage from @foleyatwork's script (shown in the snippet below), it does nothing. Even if I set it to 20%, it doesn't change anything.

Any help would be greatly appreciated. Thanks!

/body.homepage/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post { height: 100% !important;