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
- Step 1. Open the ShortPoint Theme Builder
- Step 2. Prepare and copy the custom CSS code
- Step 3. Apply the custom CSS in the Theme Builder
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: