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

Bedford: Changing the banner height?

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

Share this post


Link to post

Recommended Posts

  • 0

The solution from foleyatwork stopped working for us recently due to some changes in squarespace. I had to update the code to also set the max-height property.I also had to add some CSS to properly re-scale images. See below an updated solution. This also sets the banner width to 0.3% - adjust var windowHeight variable according to your needs...


<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 * 0.3;
       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');
               gallery.setAttribute('style', 'max-height:' + windowHeight + 'px !important');
           }
           if (wrapper) {
               wrapper.setAttribute('style', 'height:' + windowHeight + 'px !important');
               wrapper.setAttribute('style', 'max-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;
}

#promotedGalleryWrapper .thumb-image {
 height:auto  !important;
 max-height:100%  !important;
 position:static !important;
}

</style>



Share this post


Link to post
  • 0

Here is the code that I used to update the banner-height for the slideshow:


.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery, .collection-type-index.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery, .collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery, .collection-type-index.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery {
width: 100%;
height: 100% !important;
max-width: 100%;

}

You can change 'height' to be whatever size or ratio you would like. Hope it helps!

Share this post


Link to post
  • 0

@foleyatwork your script works great; I need to resize the banner images to full-height. however, it doesn't work on all my pages. Only certain banners resized. What could I be doing wrong? Best, A

Share this post


Link to post
  • 0

Hihttps://sharon-wilson-t2gb.squarespace.com/config#/pages|/ecu-remapping/ I am working on this project and want the blue banner at the top of all pages to be approx 5cm high or thereabouts. I have limited knowledge of coding but am able enough to copy and paste in to the CSS if anyone out there has the correct code please. Many thanks in advance. SJ

Share this post


Link to post
  • 0
Guest

This doesnt seem to be working for me. any suggestions.

Share this post


Link to post
  • 0
Guest

Hi @foleyatwork - this works for me on Safari, but no luck on Firefox and Chrome. Any update? Thanks :-)

Share this post


Link to post
  • 0

not working for me for some reason, i've used css to make my banner a video and i'd like it to take up 100% of the page but it isnt!

Share this post


Link to post
  • 0

Hey mrg1234,

I'm trying to do exactly what you describe, but I keep getting syntax errors. Could you be more specific in terms of which code to replace. Thanks a bunch. Yosarian.

Share this post


Link to post
  • 0

So I tried the updated code from @kofifus and it did the key move of moving the banner slideshow all the way up to the top of the page. See before (realize there's a typo here);

alt text

And after:

alt text

However, like other users have had issues with, I can't seem to get rid of the extra space being provided for the full banner image. Would love to get that black bar of padding knocked out and make the text re-center on the thinner banner image. Any ideas? Thanks!

wrlc-before-css-change.jpg.cb69b768a030f19f15926f3027d8a6c8.jpg

wrlc-after-css-change.jpg.0abdeaddd0139237a5c8b4456842a13e.jpg

Share this post


Link to post
  • 0

I've run into the same issue - title text, tagline and button were getting cut off. This code worked for me - it kept the text vertically centered within the banner.

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper { min-height: 0; padding: 30px 0;}

Replace 30px with the value that works best for you.

Share this post


Link to post
  • 0

This worked great, but it seemed to block some of the text in mobile. How do I modify that to fix the mobile version as well? Thanks.

Share this post


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

×
×
  • Create New...