How can we help you today?

[Modern Experience Only] How to Modify Margins for the Lightbox Popup

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 a 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 the ShortPoint 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 the 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, as shown below:
.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, as shown below:
margin: 20px;



Step 3. Apply the custom CSS in the Theme Builder


In the Theme Builder menu, navigate to Utilities > Custom CSS:



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



Save your customizations by pressing Publish button:



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


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 11 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more