How to Make Circular ShortPoint Tiles

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
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the code
  • Step 3: Edit the Tiles Design Element
  • Step 4: Paste the Code
  • Step 5: Save

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