Jump to content

Portfolio-text as pill shaped tags

Go to solution Solved by Ziggy,

Recommended Posts

Posted (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.

Screenshot 2024-03-19 at 1.11.25 PM.png

Edited by gcerceo
  • Replies 6
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

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.

 

Posted

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted (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?

Screenshot 2024-03-20 at 9.56.01 AM.png

Edited by gcerceo
Posted

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?

 

  • Solution
Posted

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.