How to Adjust the Transparency of the Default Tile Style

By default, when you use the Default Tile Style, there is no option to adjust the opacity of the sliders:

Using Custom CSS, you can adjust its transparency:

Follow the steps below to learn how.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• 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

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.
• You must use the Default Tile Style. Otherwise, this Custom CSS will not work.

Interactive Tutorial

Before starting the tutorial, copy the code below:

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

NOTEYou can only use 0-9 as the opacity value. The higher the number value, the darker the opacity. The lighter the number value, the lighter the opacity.

Step-by-step Tutorial

Follow the detailed guide to learn how to adjust the transparency of the sliders:

Step 1: Edit the ShortPoint Web Part

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

• Click the close icon:

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

Step 2: Copy the Code

• Copy the Custom CSS code below:

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

NOTES: Before 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. 


Make sure that you are using the Default Tile Style. Otherwise, this Custom CSS will not work. 

• Click the Tiles tag:

• Select the cogwheel icon:

Step 4: Paste the Code

• Click the next icon:

• Go to the Custom CSS tab.
• Paste the code.
• Adjust the opacity according to your preference:

NOTEYou can only use 0-9 as the opacity value. The higher the number value, the darker the opacity. The lighter the number value, the lighter the opacity.

Step 5: Save

• Click the green check mark once you are satisfied with your changes.
• Click the eye icon to see your page in real-time:

• Click Save to apply all your changes:

That’s it! You can now adjust the opacity of the Default Tile Style.

Related articles:

• How to Change the Font on Tiles Design Elements
• How to Disable the Default Tiles Animation
• How to Make the Tiles Design Element Display Regular Font Instead of Bold