gcerceo Posted March 19 Share Posted March 19 (edited) Hi SS Forums, I'm having trouble locating any online documentation for customization of portfolio-text (captions) beyond just basic text styling. My goal is to create a pill-shaped box (similar to one of my button styles - not pictured), around the portfolio-text on my portfolio thumbnails, seen below in the screenshot. Edited March 19 by gcerceo Link to comment
Ziggy Posted March 19 Share Posted March 19 Can you share your website URL and this page. What style do you want the background pills? Color? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
gcerceo Posted March 20 Author Share Posted March 20 Apologies, I put the URL in the form when posting. I prefer a completely rounded pill, not a round-corner rectangle. The corner radius is 8px or 16px, cant recall off the top of my head. www.grahamcerceo.com Would also like to add a translucent/blur fill to them. Link to comment
Ziggy Posted March 20 Share Posted March 20 We can start with this Custom CSS: .portfolio-grid-overlay .grid-item .portfolio-text .portfolio-title { padding: 6px 12px; background: rgba(255,255,255,0.6); border-radius: 16px; backdrop-filter: blur(20px); } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
gcerceo Posted March 20 Author Share Posted March 20 (edited) Love it. Thank you. In my own coding, I was missing the other containers above the lowest level. Now to tweak. What other tag can I use to make the pill wrap to the varied length of the caption for each of my portfolio thumbnails? And, expand it to be a little taller. Follow up, to ensure it scales appropriately for mobile. Assuming I'll need the min-max screen size tags, right? Edited March 20 by gcerceo Link to comment
gcerceo Posted March 20 Author Share Posted March 20 Update– I'm playing around with the padding for the desired size of the shape. What tag would allow for the shape to scale with different lengths of the captions? And, scale for mobile screen size? Link to comment
Solution Ziggy Posted March 20 Solution Share Posted March 20 You could try this to make the width responsive: .portfolio-grid-overlay .grid-item .portfolio-text { right: auto; } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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