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

Bedford: Changing the banner height?


ccbjan

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!

Link to comment
  • Answers 98
  • Created
  • Last Reply

Recommended Posts

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>



Link to comment

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 comment

I've been using the given code to reduce the size of the banner gallery on our homepage and it has worked great for the past few months. Suddenly today it stopped working and I cant figure out what I need to change to get it to work again. Anyone else have this problem and know how to fix it? www.mannaproject.org

Link to comment

I've been using the given code to reduce the size of the banner gallery on our homepage and it has worked great for the past few months. Suddenly today it stopped working and I cant figure out what I need to change to get it to work again. Anyone else have this problem and know how to fix it? www.mannaproject.org

Link to comment

All works great apart from Firefox. Tested on multiple versions and anything on a fairly big monitor the homepage image is not scaling to fill the screen.

@si lunt – I just noticed this on a new page I created with a slideshow instead of a singe image. It displays the same defect that you have, the window in Firefox is limited to @galleryHeight + 100px (which in Bedford is 600px + 100px for a total of 700px.)

In developer mode I changed:


&.transparent-header {
 #promotedGalleryWrapper {
   .sqs-gallery-block-slideshow {
     height:@galleryHeight + 100px !important;
     .sqs-gallery {
       height:@galleryHeight + 100px !important;
     }
   }
 }
}

To:


&.transparent-header {
 #promotedGalleryWrapper {
   .sqs-gallery-block-slideshow {
     height:100% !important;
     .sqs-gallery {
       height:100% !important;
     }
   }
 }
}

And it now works fine in Firefox as well – this works only with a transparent header.

Link to comment

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!

Link to comment

Thanks Paul

Don't want to really flip the dev switch on that site tho. I'll have a play about.

Award Winning Designer ( not a budding one ). Get in touch if you want to invest in something great. Our developer worked with the platform since inception and I have worked for the best advertising agencies in the world. Get in touch and do not use the marketplace. Visit here to see more

Link to comment

I've injected the Javascript into the footer and on my computer it seems to work like a charm. However, on mobile (iOS) it seems that the code works for pages, but not for the blog (both the full blog and the individual posts). It looks like the code is simply ignored on the blog.

Is the blog treated differently with regards to the Javascript?

My site: http://roelofreineman.com/

The code I have injected:


<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.5;
       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: 10% !important;
}
</style>

Link to comment

@foleyatwork

Thanks for the code injection. It's semi working on my site. I am applying to a page that has a gallery at the top. What seems to be happening on mine is that it's making space for the full screen gallery but the gallery is only taking up the normal banner height.

See this screen shot: http://s24.postimg.org/3spa67egl/ScreenShot20151019at85614_am.jpg

Anny suggestions on how to get rid of that large charcoal space and just have full screen image?

Cheers

Link to comment

Anyone else note that this code affects the way the shopping cart works? When clicking "add to cart", the thing that pops up and floats with you as you scroll doesn't float anymore and stays at the top of the page. We've noticed that several of our visitors have been confused by this. Any thoughts on a fix? Thanks. (cc/ @foleyatwork)

Link to comment

@foleyatwork This code is no longer working for me on Chrome. Squarespace support said its likely bc they changed something on the backend of the Bedford template and now the code does not work. It still works for my site on Safari, just not Chrome. I have the above code set to show the banner at 50% on the homepage but the banner gallery is now showing at full size and covering the text below. Any suggestions on how to fix this? Thanks so much! www.mannaproject.org

Link to comment

After the above code stopped working for me on the homepage, I ended up taking it out of my settings and adding the CSS code below and so far it seems to be working:

/==== PROMOTED SLIDESHOW BANNER =====/

promotedGalleryWrapper .sqs-gallery-design-stacked-slide {

height: 350px;}

.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-index.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow, .collection-type-index.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow{ margin-top:0px; height: 350px !important}

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • Create New...