How can we help you today?

How to Add a Hover Color to the ShortPoint Tiles Design Element with Custom CSS

By default, the ShortPoint Tiles Design Element doesn't have the option to set a hover color for the tiles. However, you can add a hover color using some custom CSS.


Example of hover color on Tiles


TABLE OF CONTENTS


Before we begin


To use ShortPoint CSS customizations, you must have ShortPoint SPFx version 5.2.2.28 or later.

We recommend you always have the latest version installed. Visit our Download ShortPoint page to get the latest version of ShortPoint, or you can use the ShortPoint SPFx Auto Upgrade Feature to ensure you always have the latest version.


This article is for you if:

  • You have ShortPoint installed on your SharePoint site(s).
  • You are a ShortPoint user with an active license.

Step 1. Open the settings of the Tiles Design Element


In edit mode, click the cog wheel icon of the Tiles Design Element to open the settings:


Open settings of Tiles Design Element


Switch to the Custom CSS tab:


Switch to the Custom CSS tab


Step 2. Copy the custom CSS code


Here is the custom CSS code you will need in order to set a hover color in the Tiles Design Element:


.shortpoint-tile:hover .shortpoint-tile-bg-color {
     background-color: cyan !important;
     transition: 500ms;
}


Please copy the above code to the clipboard.


Step 3. Update the Tiles Design Element with the copied code


Paste the copied code from Step 2 into the Custom CSS field:


Paste the copied code


Note: You may update the background-color and transition values according to your preferences.


You can check how it will look on your page by clicking the Preview button:


Update CSS values and preview


Note: The hover color will not be displayed on Tiles with dynamically connected content, or Tiles with a background image.


Click Update:


Click Update


Click Save and then Republish to save the changes.


Result


That's it. You should now have a custom hover color on your Tiles Design Element. It could look something like this:


Example of final result


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 43 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more