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

@foleyatwork - This javascript snippet is great and works beautifully, thank you for sharing!

I am looking to have this work on Event posts as well and simply do not know javascript well enough to know what I need to add.

Thank you in advance for your assistance.

Correction: this is actually the case for any page that has a banner thumbnail image but does not have a description or title wrapper.

Edited by garrettammon

Share this post


Link to post
  • 0

Hi - sorry to jump in here with an idiot question. I'm a complete beginner and far too scared to even contemplate CSS, but have same prob as described above - I want a full size (i.e. same size as my main header image) slide show gallery where my banner is on my home page.I tried the Five template but was advised, if I didn't want to try CSS, to use Bedford as it had a built in banner slideshow. However, the Bedford slideshow is just a small gallery on the page which is not what I want.Is there any way to get what I want without being remotely expert or shall I just give up? Thanks in advance.

Share this post


Link to post
  • 0

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>

Edited by RRoelof

Share this post


Link to post
  • 0

The Bedford slideshow I have used as a banner is as large as the rest (aimed at 50% of browser height). The slideshow is a gallery inserted at the very top of the page. The page itself has no thumbnail.

Share this post


Link to post
  • 0

This snippet works like a charm, however I bit of a newbie to scipt like this. My home page now looks great with the screen being full height, however I want the banner images on all my other pages to be 25% of the page height. How do I adjust this.?

Share this post


Link to post
  • 0

@foleyatwork I can't get this script to work for the gallery/slideshow banner images on my homepage (or any page for that matter). It works just fine when I upload an image as the page thumbnail, but nothing doing when I use the gallery feature. What could I be doing wrong?

Share this post


Link to post
  • 0

@foleyatwork this snippet is amazing! One thing though. How do I change the height of the banner on all of my pages ie not my home page. Ideally I want my homepage to be 100 initial userwindow and then all banners on all the other pages to be 50% of the initial user window. I just can't get my head around how you code works? Work it does though, so thank for this. Any help would be amazing!

Share this post


Link to post
  • 0

This is great, thank you! Is there a way to make the banner images display at 75% of the screen vs 100%? I just want to alert reader to the fact that there is content below the image. Thanks again.

Share this post


Link to post
  • 0

Any one find a solution to reducing the slide component height in bedford? (The above solutions work great for static page headers, I was looking to have slide active. thanks!!

Share this post


Link to post
  • 0

I've used this script on my site (see below)

It works on load: http://www.barrello.com/

But hasn't applied to any sub-pages including when using the /home extension!

Any ideas?


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

Edited by SH CD

Share this post


Link to post
  • 0
Guest

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

Share this post


Link to post
  • 0
Guest

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

Share this post


Link to post
  • 0
Guest

@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

Share this post


Link to post
  • 0
Guest

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}

Share this post


Link to post
  • 0

This code does not appear to work if my Bedford homepage is set to an Index page. Do you know why this is, and what part of the code needs to be changed? Thank you.


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

Edited by Michael Chupik
Added the code I was referring to.

Share this post


Link to post
  • 0

@willfindaway @foleyatwork I'm having the same problem as willfindaway. Code works fine on Safari but not on Chrome and Firefox. Setting the banner at a smaller size than 100% covers the Header 1 text placed beneath the banner. Would be awesome to find the solution to this...Thanks a lot! www.diederikgerbranda.com (password: SS2015)

Edited by Diederik

Share this post


Link to post
  • 0

Here's one I was using for a promoted Gallery Block, to keep the controls in the right place as well:


.sqs-gallery-design-stacked-slide {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 400px !important;}

sqs-gallery-controls .previous, .sqs-gallery-controls .next { position: absolute; top: 200px; outline: medium none; color: #FFF !important; z-index: 999; font-size: 14px; line-height: 40px; margin-top: -30px; background-color: rgba(0, 0, 0, 0.12); display: inline-block; padding: 10px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;}..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 { width: 100%; height: 400px !important; max-width: 100%; margin: 0px; padding: 0px; opacity: 1;}

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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

Share this post


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

×
×
  • Create New...