By default, ShortPoint Tiles Design Elements have square shape. It is possible to make them circular.
Before:
After:
If you would like to apply this solution, please follow the steps in this support article.
TABLE OF CONTENTS
- Prerequisite
- Step 1. Insert ShortPoint Tiles Design Element
- Step 2. Copy the code
- Step 3. Open Custom CSS tab of ShortPoint Tiles
- Step 4. Update the ShortPoint Tiles with code
- Result
Prerequisite
- CSS customizations are available since ShortPoint SPFx version 5.2.2.28 or higher. We recommend you to always have the latest version installed. You can visit our Download ShortPoint page and get the latest version of ShortPoint.
Step 1. Insert ShortPoint Tiles Design Element
The Tiles Design Element can be easily added to your pages using ShortPoint Page Builder.
Modern page:
You can start with adding a ShortPoint web part to your page by clicking big blue Insert button and selecting ShortPoint from the list of the web parts.
Classic page:
1. Choose the Insert tab in the Ribbon.
2. Click the blue Insert button.
Then, select the Tiles Design Element from your ShortPoint Page Builder menu:
Step 2. Copy the code
Depending on the background you are going to use for your Tiles, copy the respective piece of CSS code:
- if you are using color as a background of your Tiles:
.shortpoint-tile-bg-color {
border-radius: 50%;
}
- if you are using image as a background of your Tiles:
.shortpoint-tile-bg-image {
border-radius: 50%;
}
Step 3. Open Custom CSS tab of ShortPoint Tiles
Edit the page. Open the settings of the Tiles by pressing the cog wheel icon:
Switch to Custom CSS tab:
Step 4. Update the ShortPoint Tiles with code
Paste the code into the Custom CSS field as shown in the animation below:
You may check how it will look like on your page by clicking the Preview button:
Then, click Update and save the page.
Result
That's it. Here is an example of how it may look like on the page:
Related articles:
- How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
- Add Custom CSS to a ShortPoint Element right from the Page Builder (Advanced Tutorial)
- How to Change the Font on Tiles Elements
- How to Change the Icon Size in Tiles
- How to Change Grey Text Background in ShortPoint Tiles
- How to Create a Border for Tiles
- How to Disable the Default Tiles Animation
- How to Make Rounded Corners for ShortPoint Tiles
- How to Make the Tiles Display Regular Font Instead of Bold
- How to Make Tiles Black and White, and Colorful on Hover
- How to Resize an Individual Tile