Try ShortPoint nowBy default, you don’t have the option to customize the border of each item in an Image List:
This article will showcase how you can customize the border of each item (including its size, color, shadow, and corner style) in an Image List using Custom CSS:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the Image List Design Element on your page.
Step-by-step Tutorial
Follow the steps below to learn how to customize the look of each item in an Item List:
Step 1: Edit the ShortPoint Web Part
Go to the ShortPoint page you want to use and click Edit:
Click the close icon to leave the Toolbox:
Click the ShortPoint tag:
Select the Edit Properties icon:
Step 2: Prepare and Copy the Code
Below is the Custom CSS you can apply to the border of the items in the Image List. Customize the code according to your preferences:
.shortpoint-listitem-wrap {
border: 1px solid #dadada;
box-shadow: 4px 4px 5px #dadada;
border-radius: 10px;
}You can adjust the following values:
For border:
- 1px - change to a greater value to adjust the thickness of the border;
- solid - change to either dotted or dashed to customize the style of the border. For other styles you can use, check out these border styles;
- #dadada - change to any color to customize the color of the border. You can also check these HEX colors as reference.
For box-shadow:
- first 4px - this will stretch the shadow 4px to the right of the box. If you wish to stretch the shadow to the left, change 4px to -4px
- second 4px - this will make the shadow go down by 4px. If you wish the shadow to go up, change it to -4px
- 5px - this will blur the shadow. If you wish to remove the blurred effect, simply delete it.
- #dadada - this will customize the color of the shadow. You can choose any of these HEX colors.
For border-radius:
- 10 px - change the value to control the curve of corners
Step 3: Edit the Image List Design Element
Click the Image List tag:
Select the cogwheel icon:
Step 4: Paste the code
Click the next icon:
Go to the Custom CSS tab:
Paste the code:
Step 5: Save
Once satisfied, click the green check mark:
Click the eye icon to see your page in real-time:
Click Save to apply your changes:
That’s it! You can now customize the border of each item in an Image List using Custom CSS.
Related articles:
