If you have a link in your ShortPoint design element, that opens in a lightbox popup, and you would like to modify the margins for it, this article is for you.


Image content inside a lightbox popup


Before:



After:

 


SharePoint list item inside a lightbox popup


Before:



After:


 



It is possible to achieve this result, adding some Custom CSS to the Theme Builder. Please, follow the steps below.


TABLE OF CONTENTS


Prerequisites:

  • You have ShortPoint Design Element with a link to some other content (image, video, other pages or lists etc.).
  • You have chosen lightbox as a linking option.

Step 1: Open Theme Builder


Open Settings on your page and select Site contents from the drop down:



Open ShortPoint Dashboard:



Click to open Theme Builder:



Click Customize my site:



Step 2: Prepare and copy custom CSS code


Depending on the content type inside the URL, we will be using different CSS codes.


Option 1: Content from the URL is an image or a video


Here is a piece of code we will use:


.mfp-figure figure{
    margin-top: 70px;
    margin-left: 100px;
    margin-right: 20px;
    margin-bottom: 70px;
}


Note: you can modify the values to your own, as well as leave only some margin properties (e.g., top and left). Also, you can set the same margin value for all the sides, using margin property:


.mfp-figure figure{
    margin: 70px;
}

Option 2: Content from the URL is a SharePoint list item or another page


Here is a piece of code we will use:


/* to select the parent element (container) */
div.Files-rightPaneInteractionContainer > div.Files-rightPanePushedContainer > div {
  /* if the height or the width exceeds the frame (allow scrolling) */
  overflow: auto;
  /* the child (the content itself) */
  > div.od-ListItemFormRoot {
    /* any value for the margin */
    margin-top: 20px;
    margin-left: 40px;
    margin-bottom: 10px;
    margin-right: 20px;
    /* add this if want the margin to be calculated with the height or the width */
    box-sizing: border-box;
  }
}


Note: you can modify the values to your own, as well as leave only some margin properties (e.g., top and left). Also, you can set the same margin value for all the sides, using margin property:


margin: 20px;



Step 3: Paste CSS code to Theme Builder


In the Theme Builder menu, navigate to Utilities:



Select Custom CSS:



Paste the copied CSS code from the step 2 to the Custom CSS field, and click Apply:



Save your customizations by clicking Publish button.



That's it. Now the margins of your lightbox popup will be changed.


Related articles: