Need help with adding border to sections & products

[kenkai]

Hi there,

So I want to add borders on sections and also on products.

For the sections, the borders will have just a black line on top and on the bottom per each section.

For the products, the border will be rounded black border around the product. 

My link: www.skinity.com.au

Theme: Palo Alto

Thank you

[oscprofessional]

Hello @kenkai 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

#FeaturedCollection--template--18387297206557__section-collection-0 {
    border: 1px solid black !important;
}
.product__media__image {
    border: 1px solid black !important;
  }
#FeaturedCollection--template--18387297206557__section-collection-1 {
    border: 1px solid black !important;
}

[kenkai]

Hey,

Thanks for writing up that code.

I just wanted to mention that I'd like to make borders for each section, so even the other sections on the site as well. I need the borders on the bottom and top only, so no need for left and right borders.

The borders work for the products but seem to be cut off on the edges. I'll show some images:

[Ujjaval]

@kenkai add below css for curve the images border

[data-animations=true] [data-bgset].lazyloaded, [data-animations=true] [data-srcset].lazyloaded {
    border-radius: 70px;
}

[kenkai]

Hi there,

Yes that is exactly what I need. I added the code to the theme.css and it has curved the images, but the border isn't curving like what you're showing.

Also it seems to be curving all images on the site, rather than just the product images.

Could you tell me how you did it exactly?

Thanks a lot!

[Ujjaval]

@kenkai 

add below css into theme.liquid file before closing </body> tag

<style>
[data-animations=true] [data-bgset].lazyloaded, [data-animations=true] [data-srcset].lazyloaded {
    border-radius: 70px;
}
</style>

[kenkai]

Hi @Ujjaval 

Thanks again for your reply. I have added that into the theme.liquid file, but the borders aren't curving yet. Also, all the images on the site have the border-radius code set on them. Is there any way to make this for product images only?

Thank you

[Ujjaval]

@kenkai try below one with replacing above one : 

[data-animations=true] [data-bgset].lazyloaded, [data-animations=true] [data-srcset].lazyloaded {
    border-radius: 46px !important;
}
.product__media__image.lazy-image {
    border-radius: 45px !important;
}

[kenkai]

Excellent, that works @Ujjaval 

And I'm sorry to bother you again with this, but the other images (slider images, blog images, etc) are also curved. How can I have those not curved so its only the product images only?

[Ujjaval]

@kenkai you css hasn't triggered here

i think u r missing below css

[data-animations=true] [data-bgset].lazyloaded, [data-animations=true] [data-srcset].lazyloaded {
    opacity: 1;
    border-radius: 45px;
}

[kenkai]

@Ujjaval I have added it again here, might have been gone after I changed it around. I added it to theme.css though, is that ok? Tried on the theme.liquid as well. All is working, but the slideshow image and other images are also getting curved.

Thanks @Ujjaval