By default, the ShortPoint Tiles Design Element has a square shape:
This article will demonstrate how to turn the Tiles circular using custom CSS:
TABLE OF CONTENTS
Prerequisite
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the Tiles Design Element on your page.
Step-by-step Tutorial
Follow the detailed guide below to learn how to make circular Tiles:
Step 1: Edit the ShortPoint Web Part
Go to the SharePoint page you want to use and click Edit:
Click the ShortPoint tag:
Select the pencil icon:
Step 2: Copy the code
NOTEBefore proceeding, make sure you already have the Tiles Design Element on your page:
Copy the code that corresponds to the background of your Tiles:
- If you are using color as a background:
.shortpoint-tile-bg-color { border-radius: 50%;}
- If you are using an image as a background:
.shortpoint-tile-bg-image { border-radius: 50%;}
NOTEYou can modify the border-radius value according to your preferences.
Step 3: Edit the Tiles Design Element
Click the Tiles tag:
Select the cogwheel icon:
Step 4: Paste the Code
Click the next icon:
Navigate to the Custom CSS tab:
Paste the code inside the Custom CSS field:
Once done, click the green check mark:
Step 5: Save
Click the eye icon to see your page in real-time:
Click Save to apply all your changes:
That’s it! You can now turn your Tiles into a circle.
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