0

I haven't been able to find any info on the web to help me out here. Using Magnific Popup I'd like my popup images to display with a single black border. Ive gone into the Magnific-popup.css file and added the following:

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
/*my attempt at adding a border around the image */
  **border: 2px solid red;**  
/* end attempt */      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

What I'm getting is a red border in the display area, adding a black greyish border around the image.

Has anyone done this before? Thanks in advance.

0

2 Answers 2

1

The best way I have found to do this is to remove the padding from the image and apply it to a before and after pseudo class on the figure like so

img.mfp-img {
    padding: 0;
    border: 2px solid red;
  }

  .mfp-figure figure::before {
    padding-top: 40px;
    display: block;
    content: "";
  }

  .mfp-figure figure::after {
    padding-bottom: 40px;
    display: block;
    content: "";
  }
1
  • Works good, as long as you're only looking to border images. If you're using iframes you have to add the border to those separately.
    – tony
    Commented Dec 26, 2023 at 20:34
-1

The issue is caused by the padding that has been set to the image, try replacing the padding with margin like this:

img.mfp-img {
    padding: 0;
    margin: 40px auto;
    /*Add your border*/
    border: 2px solid red;
}

Also I must note that modifying core files for any plugin is considered bad practice because it makes upgrading to a newer version more difficult, I suggest you create a separate CSS file to override or add any custom styles.

2
  • That was the problem. Thank you also for the advice. I moved the style change to a separate CSS file as you suggested. Commented Aug 30, 2014 at 18:43
  • 1
    this isn't the best solution. not that I can come up with a better one, yet. this solution pushes the image below the lower boundary of the screen, i.e. you can't see the entire image. seems silly that this script can't allow us to do something as simple as add a border. Commented Jan 2, 2015 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.