I was able to add a Border Radius to the SPPB Addon Gallery with the CSS Code (without "")
"#addonId .sppb-addon-gallery img {
border-radius: 10px;
}"
But if i select the image to expand it, the edges are not rounded. :-(
I investigated the scource code and figured out that the image is in the div class="mfp-content" and tried several CSS commands but the edges don't get rounded.
Any ideas?
Sorry, it worked on my site.
Maybe add into Page Settings > Custom CSS as I did
Hi,
you need border-radius also for 2 classes. Use that, whole part
img.mfp-img {
padding: 0;
margin: 40px auto;
border-radius: 10px;
}
.mfp-figure::after { border-radius: 10px;}
Yes, I used Code Inspector (Firefox)
Hey Paul,
thx for your quick reply.
I tried this Code but the edges are still not rounded when opening the image in lightbox.
I tried also ".modal-container" before "img.mfp-img" and " !important" after "border-radius: 10px" but this also didn't helped.
I also used ChatGPT for help and it told me, that in my <img class="mfp.img" ...> the img in the beginning is missing.
See the incpected Code: https://prnt.sc/zZWRAToeLEuf (no CSS is applied)
Should it look like this: <img class="img.mfp.img" ...> ?
May this be the reason why its not working?
Is the SPPB Addon Image bugged?
Should it look like this: <img class="img.mfp.img" ...> ?
No No No, in class name no dots, never. Better learn yourself from trusted books and tutorials. Not ChatGPT.
I don't know how you tested my CSS code, but it worked (works) with Gallery addon here is evidence
I think the topic is closed. You're welcome, Have a good day.
Hey Paul.
I did the following steps:
Result: No rounded edges: https://prnt.sc/OGqf0yLY8rVn
Same result in Edge and Chrome.
Hi,
adding it into the Custom CSS field in Helix Framework solved the issue.
Thank you so much i was very frustrated.
But why the hell it is not working if i add it into the Custom CSS field of the Addon?