Try ShortPoint nowBy default, when you add images as background for the Tiles Design Element, it will retain its original color:
This article will demonstrate how to turn it into grayscale. And as an added effect, when you hover over a Tile, you will see its original color:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint installed for your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the Tiles Design Element on your SharePoint page.
Interactive Tutorial
Copy the code below before starting the tutorial:
.shortpoint-tile-bg {
filter: grayscale(1);
transition:filter 500ms
}
.shortpoint-tile:hover .shortpoint-tile-bg{
filter: grayscale(0);
}NOTES: [1] This Custom CSS works best with the following styles: Flat, Sarah, Bordered. You can change the style in the Design tab, under the Style drop-down.[2] Make sure that the Color Transparency is set to 0. Otherwise, the Custom CSS will not take effect.
Step-by-step Tutorial
Follow the detailed steps below to learn how to turn your Tiles into grayscale:
Step 1: Edit the ShortPoint web part
- Go to the SharePoint page you want to use and click Edit:
- Click the close icon to exit the Toolbox:
- Click the ShortPoint tag.
- Select the Edit Properties icon:
Step 2: Copy the Code
- Copy the Custom CSS below:
.shortpoint-tile-bg {
filter: grayscale(1);
transition:filter 500ms
}
.shortpoint-tile:hover .shortpoint-tile-bg{
filter: grayscale(0);
}Step 3: Edit the Tiles Design Element
NOTES: [1] 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.[2] This Custom CSS works best with the following styles: Flat, Sarah, Bordered. You can change the style in the Design tab, under the Style drop-down.
[3] Make sure that the Color Transparency is set to 0. Otherwise, the Custom CSS will not take effect.
- Click the Tiles tag:
- Select the cogwheel icon:
Step 4: Paste the code
- Click the next icon:
- Navigate to Custom CSS tab.
- Paste the code.
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 now have a beautiful grayscale Tiles Design Element.
