natejmedia Posted December 18, 2019 Share Posted December 18, 2019 Hello, I'm using the Adirondack template and I have a slideshow for images on a page. I like the idea of having a caption appear when I hover over the image, and have that option checked in the "Design" tab of Edit. The problem I have is I would like the text to be center aligned in the overlay (on hover). Currently, it's left justified. Note: I do see the dropdown in the "Design" tab that allows me to move the overlay (on hover) to a part of the image. Ex: center, bottom left, bottom right, etc. But that just moves the overlay's placement on the image. I'm looking to move the text within the overlay itself. Furthermore, I don't see any place to adjust the text's font, color, size, etc. of the overlay. Does anyone know have any code or steps that can be inserted to allow me to make these adjustments? Thanks so much. Cheers. Link to comment
christyprice Posted December 19, 2019 Share Posted December 19, 2019 Hi @natejmedia, Try adding this code to Design > Custom CSS: .sqs-gallery-block-slideshow .meta .meta-title, .sqs-gallery-block-slideshow .meta .meta-description { text-align: center; } natejmedia 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
natejmedia Posted December 19, 2019 Author Share Posted December 19, 2019 (edited) Thank you so much! That worked perfectly 🙂 Thanks, again! Any chance you might know how to also change the text font, color, weight, etc.? And lastly (and least importantly), what about that fade that the text sits on? Currently, it sits on a horizontal black bar that spans the image and starts and maybe 50% opacity at the bottom and goes to 0% opacity about 35 pixels or so upward. Great effect, but just looking to maybe charge the starting opacity at the bottom to maybe 70%. Or perhaps increase the height of the overlay bar. Thanks so much!! I can't tell you how much I appreciate it. Edited December 19, 2019 by natejmedia Additional question Link to comment
christyprice Posted December 20, 2019 Share Posted December 20, 2019 Sure. For the font color, weight, etc. you can just add those lines in with the code above, so something like this: .sqs-gallery-block-slideshow .meta .meta-title, .sqs-gallery-block-slideshow .meta .meta-description { text-align: center; font-size: 30px; color: #000000; font-weight: 700; } Changing the font, you'd add in a line for font-family: new-font; You'd just want to make sure that font is actually loaded on the site. For the opacity, this adjusts the starting opacity at the bottom to 70%:], but you can play around with the colors and percentages. There's different code for the different rendering engines (-ms is for Internet Explorer, etc.): .sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta { background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(30,30,30,.7))); background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%); background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%); background: -ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%); background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(30,30,30,.37) 100%); } natejmedia and tuanphan 1 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
natejmedia Posted December 20, 2019 Author Share Posted December 20, 2019 Christy, THANK YOU so much!! I really appreciate it 🙂 I hope some day I can pay it forward! christyprice 1 Link to comment
Sharayah Posted July 8, 2020 Share Posted July 8, 2020 This doesn't work for me! I have no idea what I am doing wrong, but I have tried everything, I can not get my Grid gallery block to centre-align the descriptions! Link to comment
tuanphan Posted July 8, 2020 Share Posted July 8, 2020 3 hours ago, Sharayah said: This doesn't work for me! I have no idea what I am doing wrong, but I have tried everything, I can not get my Grid gallery block to centre-align the descriptions! Can you share link to page where you inserted Gallery Grid? We can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
RebeccaSD Posted June 14, 2022 Share Posted June 14, 2022 (edited) This worked great for me (thanks!)...except the captions are not showing up on mobile. Any ideas? Edited June 14, 2022 by rsdelfabbro Link to comment
tuanphan Posted June 14, 2022 Share Posted June 14, 2022 7 hours ago, rsdelfabbro said: This worked great for me (thanks!)...except the captions are not showing up on mobile. Any ideas? Try adding to Design > Custom CSS @media screen and (max-width:900px) { .sqs-gallery-block-slideshow .slide.loaded .meta { display: block !important; left: 0 !Important; top: 100px !important; width: 100% !Important; max-width: 100% !important;margin-left: 0 !important;} .sqs-gallery-block-slideshow .meta .meta-title { line-height: 20px !important; } .meta-inside { padding-top: 0 !important; } .sqs-gallery-block-slideshow .slide.loaded .meta { height: auto !Important; }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
RebeccaSD Posted June 16, 2022 Share Posted June 16, 2022 (edited) Thanks @tuanphan This worked but seems spotty. I'll keep working with it though. I have another couple questions regarding this same site. I want to add a pre-footer so that it appears on every page. I would like to use the predesigned layout "General 2" and remove everything but the simple list section. How can I do that? That layout is not an option to select when designing the footer. I added my own backround image to my slideshows. But in mobile they run very long (see screenshot). How can I reduce them for mobile only? What's the best way to send you the site info privately so you can see what I'm talking about? Edited June 16, 2022 by rsdelfabbro adding a screenshot Link to comment
tuanphan Posted June 19, 2022 Share Posted June 19, 2022 On 6/16/2022 at 10:53 PM, rsdelfabbro said: Thanks @tuanphan This worked but seems spotty. I'll keep working with it though. I have another couple questions regarding this same site. I want to add a pre-footer so that it appears on every page. I would like to use the predesigned layout "General 2" and remove everything but the simple list section. How can I do that? That layout is not an option to select when designing the footer. I added my own backround image to my slideshows. But in mobile they run very long (see screenshot). How can I reduce them for mobile only? What's the best way to send you the site info privately so you can see what I'm talking about? Can you share link to page in screenshot? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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