kmdesign Posted August 22, 2022 Share Posted August 22, 2022 I've tried adding all types of gallery sections or blocks I can find in 7.1 All I need is slideshow hero gallery (with 7.0 style poster layout - H2 Text, H4 Text and a Button) on each slide. The problem is I need an image overlay so that the text doesn't disapear into the background image. I can't find this in styles, or any of the edit content or section options. I've tried css but failed there too. Lastly I tried adding both clear and 10% black png files to the section, but even then the overlay opacity for the color theme which is set to #000 did nothing. All I need is a black transparency so you can see the text over the image. Link to comment
Beyondspace Posted August 22, 2022 Share Posted August 22, 2022 1 hour ago, kmdesign said: I've tried adding all types of gallery sections or blocks I can find in 7.1 All I need is slideshow hero gallery (with 7.0 style poster layout - H2 Text, H4 Text and a Button) on each slide. The problem is I need an image overlay so that the text doesn't disapear into the background image. I can't find this in styles, or any of the edit content or section options. I've tried css but failed there too. Lastly I tried adding both clear and 10% black png files to the section, but even then the overlay opacity for the color theme which is set to #000 did nothing. All I need is a black transparency so you can see the text over the image. Can you share your site with protected password so we can take a look? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
kmdesign Posted August 25, 2022 Author Share Posted August 25, 2022 Hi @bangank36 Here's the site: https://wolverine-chimes-ay54.squarespace.com/. Password: MANIFESTO I'm trying to create a hero gallery slideshow (you'll see the ones I've added to the homepage) - I'm having a number of issues. I've tried gallery blocks and gallery sections and am coming to see that my built-in editing options are really limited. 1) I need to be able to have (and adjust an overlay) so my text doesn't get lost on my image 2) I would like to be able to change the body font to my H4 font 3) I would like the slideshow to be full width on mobile (I found some code you posted here in the forums and tried it... it adjusted the image size to full width, but created a large black box below it with the navigation arrows at the bottom) so not desirable. I may have to go find a plugin for this. Any help suggestions would be appreciated. Thank you! Link to comment
tuanphan Posted August 28, 2022 Share Posted August 28, 2022 On 8/26/2022 at 3:47 AM, kmdesign said: Hi @bangank36 Here's the site: https://wolverine-chimes-ay54.squarespace.com/. Password: MANIFESTO I'm trying to create a hero gallery slideshow (you'll see the ones I've added to the homepage) - I'm having a number of issues. I've tried gallery blocks and gallery sections and am coming to see that my built-in editing options are really limited. 1) I need to be able to have (and adjust an overlay) so my text doesn't get lost on my image 2) I would like to be able to change the body font to my H4 font 3) I would like the slideshow to be full width on mobile (I found some code you posted here in the forums and tried it... it adjusted the image size to full width, but created a large black box below it with the navigation arrows at the bottom) so not desirable. I may have to go find a plugin for this. Any help suggestions would be appreciated. Thank you! #1. TO add overlay over List Section Image, add this to Design > Custom CSS .user-items-list-item-container[data-section-id="6303e1fce32cf2129dfb3550"] .slide-media-container:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .slide-content.list-item-card-background { z-index: 99999; } #2. You mean Description goes here text? #3. You mean make image show fullsize? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kmdesign Posted August 29, 2022 Author Share Posted August 29, 2022 @tuanphan Thank you! Okay that worked great. Are you able to help with #2 and #3? #2 - change the body text from "p" to "h4" #3 - adjust images to full-width on mobile (they are currently getting cut off #4 - (this is a bonus request) can autoplay be enabled on this section? Link to comment
tuanphan Posted August 31, 2022 Share Posted August 31, 2022 On 8/29/2022 at 8:31 PM, kmdesign said: @tuanphan Thank you! Okay that worked great. Are you able to help with #2 and #3? #2 - change the body text from "p" to "h4" #3 - adjust images to full-width on mobile (they are currently getting cut off #4 - (this is a bonus request) can autoplay be enabled on this section? #2. You mean this text? #3. Try adding to Design > Custom CSS @media screen and (max-width:767px) { /* List section height */ .user-items-list-item-container[data-section-id="6303df833212c5264c916d19"] ul { min-height: unset !important; } } #4. Do this Slideshow or all slideshow on site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kmdesign Posted August 31, 2022 Author Share Posted August 31, 2022 Thanks so much @tuanphan You're awesome css for #3 worked great to fix the mobile height and width. Yes for #2 I would like to change the text "Description Goes Here" from my "p" font to my "H4" font. Is there anyway to set this to autoplay? Here is the we're working on section[data-section-id="6303e1fce32cf2129dfb3550"] (I deleted the other ones) Link to comment
kmdesign Posted August 31, 2022 Author Share Posted August 31, 2022 #2 - change description goes here from "p" to "h4" Thank you! Link to comment
tuanphan Posted September 3, 2022 Share Posted September 3, 2022 On 8/31/2022 at 9:21 PM, kmdesign said: #2 - change description goes here from "p" to "h4" Thank you! Use this code /* list slideshow body text */ div.slideshow-wrapper .list-item-content__description { font-size: 30px !important; font-weight: bold; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kmdesign Posted September 3, 2022 Author Share Posted September 3, 2022 Thank you so much @tuanphan Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment