Jump to content

How to add coloured stroke around a round image 7.1

Recommended Posts

Hi @Melonmade something like this?

image.thumb.png.f1ee4491b786a6cfd221b48a38e5081b.png

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
31 minutes ago, Melonmade said:

@melody495 yes exactly that! 

Hi @Melonmade, try adding this to your Custom CSS and let me know how it goes

.sqs-block-image div[data-shape-mask="circle"] img {
  border: red solid; // change first value to different colour
  border-radius: 100%;
  border-width: 5px; // change value for thinner/thicker border
  box-sizing: border-box;
}

This will target all your circle images. If you need to target specific images, then you need to add the specific ID for each image.

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
4 hours ago, Melonmade said:

Thank you so much, that looks great! 

You're welcome 🙂 glad it's working for you. Please give my solution a thumbsup and mark as solution.

 

4 hours ago, Melonmade said:

Do you know how I change the title font in the testimonials carousel? 

Assuming you mean change the font family? What do you want to change it to? Is it one of your 2 fonts your website uses or a custom font?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
2 hours ago, Melonmade said:

@melody495 Yes I'd like to change it to Fino which is my header font? 

It does by default use your header font, but you have CSS that overrides P, which confusingly is what the title html tag is. So it is using your custom font.

You can try this code in Custom CSS

.user-items-list .list-section-title {
	font-family: fino!important;
}

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
14 minutes ago, Melonmade said:

@melody495 still hasnt worked:(

 

ah missed the p...

.user-items-list .list-section-title p{
	font-family: 'fino'!important;
}

image.thumb.png.b752ff2b59fc1bfc3005e190261e2b72.png

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
  • 3 months later...
On 11/27/2023 at 4:42 PM, melody495 said:

Hi @Melonmade, try adding this to your Custom CSS and let me know how it goes

.sqs-block-image div[data-shape-mask="circle"] img {
  border: red solid; // change first value to different colour
  border-radius: 100%;
  border-width: 5px; // change value for thinner/thicker border
  box-sizing: border-box;
}

This will target all your circle images. If you need to target specific images, then you need to add the specific ID for each image.

I tried to use this for other shapes by changing "circle" to the name of the other shapes, like "tv" for example, but it makes the tv shape into a circle when it adds the border. Any idea why that might be?

Link to comment
On 3/29/2024 at 10:33 PM, reshoot said:

I tried to use this for other shapes by changing "circle" to the name of the other shapes, like "tv" for example, but it makes the tv shape into a circle when it adds the border. Any idea why that might be?

Can you share link to page where you have problem?

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
On 3/29/2024 at 3:33 PM, reshoot said:

I tried to use this for other shapes by changing "circle" to the name of the other shapes, like "tv" for example, but it makes the tv shape into a circle when it adds the border. Any idea why that might be?

Hi there! A circle can be defined by a radius, but other shapes are more complex.

For other shapes, I would suggest creating a shape block, in the same shape as your image. Then place it behind the image. You can adjust the thickness of the outline of the shape block to match the appearance you are looking for.

Let me know how it goes!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

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.