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

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>

Link to comment

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

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

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

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

Link to comment

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

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.

http://simon-randall-mw7u.squarespace.com

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

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

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