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

Developer Evangelist at Squarespace.

Link to comment

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>

Link to comment

Here's the site I mentioned earlier where it's working on everything i've tried except Firefox. I used the script above but changed it to 50% of the window height, not 100%. On Firefox, the images themselves aren't scaling, though some aspects of the container are. (Note that the content is now tucked up underneath the image.) Contrast that to Chrome, where it works as I expected. Ideas?

http://quickspacenevada.squarespace.com

(Still Trial, so Visitor Access...)

Thank you!

Link to comment

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

Link to comment

Not got a real answer for you Simon but I can confirm the code works for my site in Firefox (tested on multiple machines). The only thing I did different was create a fullscreen.js file using the dev platform instead of using the footer code injection area on the consumer platform. Have a look at www.valorizzazioniculturali.com and see if it works for you.

Link to comment

Hello

When I adjust the banner height percentage from @foleyatwork's script (shown in the snippet below), it does nothing. Even if I set it to 20%, it doesn't change anything.

Any help would be greatly appreciated. Thanks!

/body.homepage/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post { height: 100% !important;

Link to comment

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

Link to comment

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.

Link to comment

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

Link to comment

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.

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