Frank_Mound Posted January 17, 2022 Share Posted January 17, 2022 Site URL: http://www.frankmeuschke.com Hi. Looking for help with CSS injection to change position of the image title in Wells 7.0 Gallery Page. It appears to be either on the left sidebar when large or overlapping image when medium size. I'd really like it to be 1.5 lines beneath the image, left side and stick with that placement regardless of browser window size. I've used this forum to find code to inject to change the font size of the image title (great, thanks!), but I see it is still the same in mobile (thick font -darn ugly) and I'd like that to be the same lightweight (normal?) font as on the desktop version. Thank you. Attached are some page examples of the image title location problem and the mobile version thick font. www.frankmeuschke.com Link to comment
Beyondspace Posted January 18, 2022 Share Posted January 18, 2022 10 hours ago, Frank_Mound said: Site URL: http://www.frankmeuschke.com Hi. Looking for help with CSS injection to change position of the image title in Wells 7.0 Gallery Page. It appears to be either on the left sidebar when large or overlapping image when medium size. I'd really like it to be 1.5 lines beneath the image, left side and stick with that placement regardless of browser window size. I've used this forum to find code to inject to change the font size of the image title (great, thanks!), but I see it is still the same in mobile (thick font -darn ugly) and I'd like that to be the same lightweight (normal?) font as on the desktop version. Thank you. Attached are some page examples of the image title location problem and the mobile version thick font. www.frankmeuschke.com Try adding to Home > Design > Custom Css #collection-614cd47a24319c70ccde0401 #galleryWrapper .meta { width: 100%; max-width: unset; margin-left: 240px; right: unset; } #collection-614cd47a24319c70ccde0401 #galleryWrapper .image-title strong { font-weight: bold; } Let me know how it works on your site Support me by pressing 👍 if this useful for you 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
Beyondspace Posted January 18, 2022 Share Posted January 18, 2022 My testing 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
Frank_Mound Posted January 19, 2022 Author Share Posted January 19, 2022 On 1/18/2022 at 12:22 AM, bangank36 said: My testing It seems to work, thank you! However, two details I need to fix. As in the sample below, it appears the image title isn't in line with the image, it is to the left. The other issue that has changed since the CSS -on other gallery pages, where there is a description below the image, the description appears double spaced. Examples below: Link to comment
Frank_Mound Posted January 19, 2022 Author Share Posted January 19, 2022 Ok, I can change the double spacing via the text box formatting, so that problem is solved. What I'd like to see is the image title change with the left edge of the image instead of being fixed on the left edge of the image wrapper or container. Is that possible? Link to comment
Frank_Mound Posted January 19, 2022 Author Share Posted January 19, 2022 Also, now with your helpful CSS, playing around with adding a description under the image. That overlaps the image now. I'm sure there is code to drop the text below an image which has no set size (based on browser window size). Getting closer! Link to comment
Beyondspace Posted January 19, 2022 Share Posted January 19, 2022 Kindly try removing this line in my previous code width: 100%; 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
Frank_Mound Posted January 20, 2022 Author Share Posted January 20, 2022 (edited) 16 hours ago, bangank36 said: Kindly try removing this line in my previous code width: 100%; Ok, so seems to me too many complications -didn't really work on all browser sizes. So I have changed the page to a blank with a gallery block. It is not as responsive, but I can have the description below the images. Is there CSS to change the characteristics of the hover title and scroll arrows -i.e. color of font, background transparency color and size, or even to push titles below image and arrows off the image. Thank you! Edited January 20, 2022 by Frank_Mound Link to comment
Solution Beyondspace Posted January 20, 2022 Solution Share Posted January 20, 2022 6 hours ago, Frank_Mound said: Ok, so seems to me too many complications -didn't really work on all browser sizes. So I have changed the page to a blank with a gallery block. It is not as responsive, but I can have the description below the images. Is there CSS to change the characteristics of the hover title and scroll arrows -i.e. color of font, background transparency color and size, or even to push titles below image and arrows off the image. Thank you! Try for the title #block-a80fd1152cabf450a72f .slide.loaded .meta { position: relative; opacity: 1 !important; margin:0; background: transparent; } #block-a80fd1152cabf450a72f .slide.loaded .meta-title { color: #000; white-space: nowrap; } #block-a80fd1152cabf450a72f .sqs-gallery-block-slideshow .meta-inside { padding-left: 0; } #block-a80fd1152cabf450a72f .sqs-gallery { margin-bottom: 50px; } Let me know how it works on your site 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
Beyondspace Posted January 20, 2022 Share Posted January 20, 2022 My testing 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
Frank_Mound Posted January 21, 2022 Author Share Posted January 21, 2022 (edited) On 1/20/2022 at 5:00 PM, bangank36 said: My testing Ok! Seems to be working after I removed former CSS. What I would like to do now is remove the light gray box that bounds the image (see attached) and if possible, make the title text a bit smaller font, or maybe Italic. I added -1REM to get the title box a bit closer to the image. Seems to work. Here is the code as it stands now: #block-a80fd1152cabf450a72f .slide.loaded .meta-title { color: #696969; white-space: nowrap; } #block-a80fd1152cabf450a72f .sqs-gallery { margin-bottom: 20px; } #block-a80fd1152cabf450a72f .slide.loaded .meta { position: relative; opacity: 1 !important; margin: -1rem; background: transparent; } #block-a80fd1152cabf450a72f .sqs-gallery-block-slideshow .meta-inside { padding-left: 10; } Edited January 22, 2022 by Frank_Mound 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