Add Image Border Radius To Div Class Mfp-content - Question | JoomShaper
Back to the questions

Add Image Border Radius To Div Class Mfp-content

BOFHJunior

BOFHJunior

SP Page Builder 2 years ago

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?

0
7 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #131036

Sorry, it worked on my site.

Maybe add into Page Settings > Custom CSS as I did

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #130326

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)

0
BOFHJunior
BOFHJunior
Accepted Answer
2 years ago #130352

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?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #130356

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #130390

I don't know how you tested my CSS code, but it worked (works) with Gallery addon here is evidence

info_1516_2023.jpg

I think the topic is closed. You're welcome, Have a good day.

0
BOFHJunior
BOFHJunior
Accepted Answer
2 years ago #131035

Hey Paul.

I did the following steps:

  1. Added the Addon Gallery to my testpage
  2. Selected the Addon Gallery and switched to the "Style" tab
  3. Added your code: https://prnt.sc/TIB1XwmzjWhY
  4. Reloaded the page

Result: No rounded edges: https://prnt.sc/OGqf0yLY8rVn

Same result in Edge and Chrome.

0
BOFHJunior
BOFHJunior
Accepted Answer
2 years ago #131037

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?

0