taylahroberts1 Posted December 20, 2022 Share Posted December 20, 2022 Hey! I want to add a text overlay (different pieces of text for each image) to a full bleed gallery slideshow (autoplay with no arrows) — I've been searching this forum all day but haven't found a definitive answer yet. I tried the slideshow with the text and the arrows and added a code injection on the header to autoplay the gallery. However, the client did not like that the image "slid" to the next once VS. how it is now (cutting to the next image without any sliding). I'm hoping there's a simple solution to this, as it seems many people have been asking for this for years! Thanks a bunch 🙂 For reference, here is the URL: https://anabezi.squarespace.com/Password: ana123 Link to comment
tuanphan Posted December 20, 2022 Share Posted December 20, 2022 Enable Options: Captions then edit each image text will appear under slideshow share link to page where you use slideshow, we can give code to move it over image Or You can consider using List Section Banner Slideshow. It has all options 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
taylahroberts1 Posted December 20, 2022 Author Share Posted December 20, 2022 Hi @tuanphan, I've added the captions now, is there a way to make them larger, move them up and to the left of the page and then remove the black bar at the bottom? Thank you! It's for the gallery at the opening (with the overlay of the navigation and logo). Here is the URL: https://anabezi.squarespace.com/home password: ana123 Link to comment
Solution tuanphan Posted December 22, 2022 Solution Share Posted December 22, 2022 On 12/20/2022 at 11:58 PM, taylahroberts1 said: Hi @tuanphan, I've added the captions now, is there a way to make them larger, move them up and to the left of the page and then remove the black bar at the bottom? Thank you! It's for the gallery at the opening (with the overlay of the navigation and logo). Here is the URL: https://anabezi.squarespace.com/home password: ana123 Add to Design > Custom CSS body#collection-639bcaa9e249ef08743e64b2 { figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { top: 50%; left: 0; text-align: left; max-width: 90%; } figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * { font-size: 30px; } .gallery-fullscreen-slideshow { margin-bottom: 0px !important; }} 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
taylahroberts1 Posted December 22, 2022 Author Share Posted December 22, 2022 Thank you so much @tuanphan! This worked perfectly. What CSS would need to be added to change the text size for mobile only? Link to comment
tuanphan Posted December 24, 2022 Share Posted December 24, 2022 On 12/22/2022 at 11:23 PM, taylahroberts1 said: Thank you so much @tuanphan! This worked perfectly. What CSS would need to be added to change the text size for mobile only? Adjust code to this body#collection-639bcaa9e249ef08743e64b2 { figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { top: 50%; left: 0; text-align: left; max-width: 90%; } figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * { font-size: 30px; } .gallery-fullscreen-slideshow { margin-bottom: 0px !important; } /* mobile size */ @media screen and (max-width:767px) { figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * { font-size: 20px; }}} 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
Jayant Posted May 16 Share Posted May 16 @tuanphan I am struggling with the same issue, I have changed the collection to my website but am unable to do so. My website :- https://rhino-red-3bxa.squarespace.com/config/pages/646370f2154b595eb5fd4939 Link to comment
tuanphan Posted May 22 Share Posted May 22 On 5/17/2023 at 1:48 AM, Jayant said: @tuanphan I am struggling with the same issue, I have changed the collection to my website but am unable to do so. My website :- https://rhino-red-3bxa.squarespace.com/config/pages/646370f2154b595eb5fd4939 This is url for site owner. You can click Exit > Click arrow on top right > Then real url will appear on browser address bar 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
HeyKarenShea Posted May 23 Share Posted May 23 I'm following this thread and trying to implement the same thing. Can you add a font change and color change as well as add an overlay to the font? Link to comment
tuanphan Posted May 25 Share Posted May 25 On 5/24/2023 at 4:52 AM, HeyKarenShea said: I'm following this thread and trying to implement the same thing. Can you add a font change and color change as well as add an overlay to the font? What is your site url? 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
HeyKarenShea Posted May 25 Share Posted May 25 https://lanternfish-maracas-phwl.squarespace.com/ Password: RKS123 Link to comment
HeyKarenShea Posted May 25 Share Posted May 25 sorry..the password is "rsk123" I am hoping to have it with a background color over the images. Please see example on this site: https://www.scilights.com/ Link to comment
HeyKarenShea Posted May 26 Share Posted May 26 I actually got this figured out..but have another question. One I need to add a code to make the text convert to media view. Also, is there now a way to get rid of the space between where the caption originally goes and the next section? There is a lot of white between the slideshow and text in the next section! Link to comment
tuanphan Posted June 9 Share Posted June 9 On 5/26/2023 at 1:57 AM, HeyKarenShea said: https://lanternfish-maracas-phwl.squarespace.com/ Password: RKS123 Password is incorrect. Can you check it again? 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
Mary_DG Posted June 14 Share Posted June 14 Hello Tuanphan, What should I replace use to add an text like this: over the slideshow:full? Also, you will see that it does a animation when you mouse over to click. also the image buttons below? ref site: https://www.pickuplimes.com/ URL: https://formebar-sample.squarespace.com/ PW: HC Link to comment
tuanphan Posted June 15 Share Posted June 15 On 6/14/2023 at 10:32 AM, Mary_DG said: Hello Tuanphan, What should I replace use to add an text like this: over the slideshow:full? Also, you will see that it does a animation when you mouse over to click. also the image buttons below? ref site: https://www.pickuplimes.com/ URL: https://formebar-sample.squarespace.com/ PW: HC You mean text over top image? You can add a Text Block over image, then we can give code to add shadow same as reference 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
jjjcb Posted August 23 Share Posted August 23 Hi, this has been so useful - thank you! Wondering if you can help me with the next steps for my site too. https://olive-rhombus-8z34.squarespace.com/home-page password is ASHS Can I change the colours or add a card behind so that the text doesn't get lost in the images? If I can't figure this out I might change to a list section as you suggested. Web building isn't something I've done before, but my organisation's current website is so ancient and terrible I've decided to give it a go (it's a work in progress!). Link to comment
tuanphan Posted August 24 Share Posted August 24 19 hours ago, jjjcb said: Hi, this has been so useful - thank you! Wondering if you can help me with the next steps for my site too. https://olive-rhombus-8z34.squarespace.com/home-page password is ASHS Can I change the colours or add a card behind so that the text doesn't get lost in the images? If I can't figure this out I might change to a list section as you suggested. Web building isn't something I've done before, but my organisation's current website is so ancient and terrible I've decided to give it a go (it's a work in progress!). I see you figured it out, but you can add this code under your code to make it centered + add dark background behind text figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { margin-top: 0 !important; transform: translateY(-50%); top: 50% !important; height: auto !important; } figcaption.gallery-caption.gallery-caption-fullscreen-slideshow p { background-color: rgba(0,0,0,0.5) !important; display: inline-block; } 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
Slumpy Posted September 7 Share Posted September 7 The legendary Tuanphan! Been jumping all over different threads and seeing your posts, thank you so much for helping everyone! Was wondering if you could help me out? This is my own site https://www.973partyrentals.com Password: password I want to have my gallery display a text and a button much how like this site does: https://www.tremontrentals.com/ (the animation it does isn't needed) Are you able to help me out? The button would just lead to https://www.973partyrentals.com/contact Link to comment
creedon Posted September 7 Share Posted September 7 54 minutes ago, Slumpy said: I want to have my gallery display a text and a button much how like this site does: Try the following Intro Auto Layout section. It looks like it's close to what you want. Let us know how it goes. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Slumpy Posted September 7 Share Posted September 7 1 hour ago, creedon said: Try the following Intro Auto Layout section. It looks like it's close to what you want. Let us know how it goes. I feel like it almost works, it doesn't seem to cycle through the images automatically from what I can tell? Link to comment
creedon Posted September 7 Share Posted September 7 28 minutes ago, Slumpy said: it doesn't seem to cycle through the images automatically from what I can tell? Please see the following. Let us know how it goes. Slumpy 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Slumpy Posted September 7 Share Posted September 7 10 hours ago, creedon said: Please see the following. Let us know how it goes. This was perfect, thank you for your help! creedon 1 Link to comment
Lashem Posted September 30 Share Posted September 30 On 12/22/2022 at 2:18 AM, tuanphan said: Add to Design > Custom CSS body#collection-639bcaa9e249ef08743e64b2 { figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { top: 50%; left: 0; text-align: left; max-width: 90%; } figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * { font-size: 30px; } .gallery-fullscreen-slideshow { margin-bottom: 0px !important; }} This Custom CSS is not working for me. Ive enabled the captions on my full bleed "slideshow:full" and copied and pasted the above CSS but Nothing is changing. Link to comment
tuanphan Posted October 3 Share Posted October 3 On 10/1/2023 at 3:21 AM, Lashem said: Maybe you need to change ID. Can you share link to page where you use slideshow? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment