How to add coloured stroke around a round image 7.1

Hello,

I have a lot of round images on the site, is there a way to add a coloured strokeborder to the images? I have tried using custom code but the borders are all square?

Can you share link to a page where you use an image?

Yes: 

https://sapphire-orca-wk68.squarespace.com/config/pages

https://sapphire-orca-wk68.squarespace.com/?noredirect

config is url in edit mode

You can click arrow on top right or top left >> real url will appear on browser address bar

Oh sorry..

https://sapphire-orca-wk68.squarespace.com/home

Hopefully this works?

Hi - did that URL work for you?

Hi @Melonmade something like this?

@melody495 yes exactly that! 

How did you do that please?!

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.

@melody495

Thank you so much, that looks great! Do you know how I change the title font in the testimonials carousel? 

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?

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

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;
}

@melody495 still hasnt worked:(

14 minutes ago, Melonmade said:

@melody495 still hasnt worked:(

 

ah missed the p...

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

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?

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?

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!