Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 12

Bedford: Changing the banner height?


ccbjan
Go to solution Solved by foleyatwork,

Question

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!

Edited by ccbjan
Fix title
Link to post
  • Answers 98
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

I wanted to shrink the size of the banner; adding this to custom CSS worked fine: .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail

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, the

Posted Images

Recommended Posts

  • 0

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!

Link to post
  • 2

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.

Link to post
  • 17

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.

Edited by foleyatwork

Developer Evangelist at Squarespace.

Link to post
  • 0

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!

Edited by IsaacR
Format code
Link to post
  • 1

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.

Link to post
  • 0

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

Link to post
  • 0

@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?

Link to post
  • 0

@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!

Link to post
  • 0

@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?

Link to post
  • 0

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?

Link to post
  • 0
Guest

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.

Edited by Guest
Link to post
  • 0

@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!

Link to post
  • 0

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;

Link to post
  • 1

The script above is for full height. Now, I'm sure this is the totally wrong way to do this and there is no doubt a much better way, but if you change this line:

var windowHeight = window.innerHeight;

to say:

var windowHeight = window.innerHeight * 0.5;

the banner should be 50% of fullscreen.

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...