How to Change the Text Background Color for ShortPoint Tiles

By default, the text background of the ShortPoint Tiles is grey:

This article will demonstrate how to customize the text background color using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy Code
  • Step 3: Edit the Tiles Design Element
  • Step 4: Paste the code
  • Step 5: Save

Prerequisites

• 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.

Interactive Tutorial

Before proceeding, copy the Custom CSS code below:

.shortpoint-tile-content {
background-color: rgba(0,255,0,0.5);
}

Step-by-step Tutorial

Follow the detailed guide below to learn how to add change the text background color:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Click the cross icon to close the Toolbox:

• Click the ShortPoint tag.
• Select the Edit properties icon:

Step 2: Copy Code

Copy the Custom CSS code below:

.shortpoint-tile-content {
background-color: rgba(0,255,0,0.5);
}

NOTEBefore proceeding, make sure you already have the Tiles Design Element on your page. To learn how to add it, check out How to Customize 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.
• (Optional) Customize the background-color values according to your preferences.

Step 5: Save

• Click the green check mark once satisfied.
• Click the eye icon to see your page in real time:

• Click Save to apply all your changes:

That’s it! You have successfully changed the background color of the text inside the Tiles Design Element.

Related articles:

• How to Turn the Embedded Sites Web Part's Background Transparent
• How to Customize Countdown Height and Text Position
• How to Equalize the Height of the Shadow for the Tiles Title