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

  • 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.

Share this post


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.

Share this post


Link to post
  • 2

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-wrapper {
   padding: 100px 0px;
}

The 100px is the padding above and below your site description. The 0px is the padding to the left and the right.

Share this post


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.

Share this post


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.

Share this post


Link to post
  • 1

It didn't work for me but I'm using the slideshow gallery feature. I need to shorten the banner since you cannot see that there is text below on a 13" laptop or tablet.

Share this post


Link to post
  • 1

Is there a way to have this code work only on the desktop and not mobile devices? Or even better, is there a way to implement this code but have mobile still scale to width? On mobile it crops a lot from the header images instead of scaling them to the width.

Share this post


Link to post
  • 1

I found out how to fix the Firefox issue. I added this to my CSS and it works great in all browsers now:


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

Edited by ericjensen1628
Format code

Share this post


Link to post
  • 1

hey ericjensen1628,

That only works with a transparent header. If you use this code in the CSS instead it will work for both a transparent and visible header:

.sqs-gallery.sqs-gallery-design-stacked { min-height: 100% !important; }

Share this post


Link to post
  • 1

HI anyone out there. I really want to reduce the banner height in bedford to just a strip, say half the minimum size allowed by the template. Totally bunny at coding. Can anyone help with some code and instruction how to make this work. thanks Geoff

Share this post


Link to post
  • 1

Hi there,

I am looking for a way to make a banner slideshow full screen as well...All this options don't seem to work for me...Could someone help me please? It's driving me crazy!

Thanks!

Lize

Share this post


Link to post
  • 1

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.0c89aa34bc6982296696a7c6378a24ec.jpg

wrlc-after-css-change.jpg.23d12639fdf6519a09af56769d5b9555.jpg

Share this post


Link to post
  • 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!

Share this post


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

Share this post


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

Share this post


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?

Share this post


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!

Share this post


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

×
×
  • Create New...