ccbjan Posted January 28, 2014 Share Posted January 28, 2014 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
foleyatwork Posted February 4, 2014 Share Posted February 4, 2014 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
cmahoney Posted May 25, 2016 Share Posted May 25, 2016 @foleyatwork not sure why but no change when i enter this into my bedford template. help please! Link to comment
SH CD Posted July 16, 2015 Share Posted July 16, 2015 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
cmahoney Posted May 25, 2016 Share Posted May 25, 2016 not working for me for some reason, i've used css to make my banner a video and i'd like it to take up 100% of the page but it isnt! Link to comment
kwhoop05 Posted January 29, 2016 Share Posted January 29, 2016 Ok, I just can't get the image to be thinner, like yours, it's still taking up the whole screen. Which value do I adjust and/or what are the dimensions of your image as you uploaded it? Thank you!!! P.S. Here's my site: https://kelsey-southerland-1fas.squarespace.com/ You can see the difference between mine and yours Link to comment
Guest ScottO Posted March 5, 2014 Share Posted March 5, 2014 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
kwhoop05 Posted January 29, 2016 Share Posted January 29, 2016 Ok, I just can't get the image to be thinner, like yours, it's still taking up the whole screen. Which value do I adjust and/or what are the dimensions of your image as you uploaded it? Thank you!!! P.S. Here's my site: https://kelsey-southerland-1fas.squarespace.com/You can see the difference between mine and yours Link to comment
Mikel Posted February 8, 2014 Share Posted February 8, 2014 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 Link to comment
garrettammon Posted April 13, 2014 Share Posted April 13, 2014 @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
Christoffer Furnes Posted December 18, 2015 Share Posted December 18, 2015 @SH CD How did you make the slider indicators and descriptions on top of the slider?! Link to comment
Christoffer Furnes Posted December 18, 2015 Share Posted December 18, 2015 Sorry, you used a different template. Problem solved :) Link to comment
lizcrane Posted March 17, 2016 Share Posted March 17, 2016 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 Link to comment
Paul1570047683 Posted March 18, 2014 Share Posted March 18, 2014 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
tim Posted March 2, 2014 Share Posted March 2, 2014 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
Paul1570047683 Posted March 2, 2014 Share Posted March 2, 2014 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. Link to comment
thelittlepicture Posted May 2, 2016 Share Posted May 2, 2016 If you want the banner to be fullscreen, add a gallery as the first block you can on the page (this is for Bedford) and it'll automatically be used as the banner slideshow. Link to comment
dmurphy Posted September 28, 2015 Share Posted September 28, 2015 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
Paul1570047683 Posted February 1, 2014 Share Posted February 1, 2014 Anyone got a solution on how I can make the image full screen? Link to comment
ruffhaus Posted July 21, 2016 Share Posted July 21, 2016 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
bradgood Posted April 24, 2014 Share Posted April 24, 2014 @foleyatwork Great Solution! I am working on a new site and using your snippet. It does not work on initial page load. If you click on a link, and back to the home, then it works. any ideas? http://www.amazing.org.uk Link to comment
sharonjay Posted January 7, 2016 Share Posted January 7, 2016 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
Guest Posted March 2, 2014 Share Posted March 2, 2014 anyone else having problems with this script in Firefox? Link to comment
YosarianRem Posted June 9, 2016 Share Posted June 9, 2016 Hey mrg1234, I'm trying to do exactly what you describe, but I keep getting syntax errors. Could you be more specific in terms of which code to replace. Thanks a bunch. Yosarian. Link to comment
beaj Posted April 16, 2014 Share Posted April 16, 2014 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
Question
ccbjan
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.
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
98 answers to this question
Recommended Posts
Archived
This topic is now archived and is closed to further replies.