By default, you can only change the hover color for the event’s Title:
You do not have the option to do so for the Tagline and the Description. You can only change their text color:
This support article will demonstrate how to customize the hover color of the Tagline and Description using Custom CSS:
TABLE OF CONTENTS
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 Events Design Element on your SharePoint page.
Interactive Tutorial
Copy the code below before starting the interactive tutorial:
.shortpoint-event-item:hover .shortpoint-event-title, .shortpoint-event-item:hover .shortpoint-event-description, .shortpoint-event-item:hover .shortpoint-event-tag-line { color: rgb(27, 152, 208) !important; }
Step-by-step Tutorial
Follow the steps below for a detailed guide on how to change the hover color of the Tagline and Description:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Click the close icon to close the Toolbox:
- Click the ShortPoint tag.
- Select the Edit properties icon:
Step 2: Copy the Custom CSS Code
- Copy the code below:
.shortpoint-event-item:hover .shortpoint-event-title, .shortpoint-event-item:hover .shortpoint-event-description, .shortpoint-event-item:hover .shortpoint-event-tag-line { color: rgb(27, 152, 208) !important; }
Step 3: Edit the Events Design Element
NOTEBefore proceeding, make sure you already have an Events Design Element on your page. To learn how to add it, check out How to Customize the Events Design Element.
- Click the Events tag:
- Select the cogwheel icon:
Step 4: Paste the Code
- Click the next icon:
- Navigate to the Custom CSS tab.
- Paste the code.
- Customize the color value 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 can now change the hover color of the Tagline and Description in the Events 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