How can we help you today?

How to Change the Hover Color of the Tagline and Description in the Events Design Element

By default, you can only change the hover color for the event’s Title:


default hover color


You do not have the option to do so for the Tagline and the Description. You can only change their text color:


Tagline and Description Styles


This support article will demonstrate how to customize the hover color of the Tagline and Description using Custom CSS:


Custom CSS hover


TABLE OF CONTENTS


Prerequisites


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:


Edit

  • Click the close icon to close the Toolbox:

close icon


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

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.

Events Design Element


  • Click the Events tag:

Events tag


  • Select the cogwheel icon:

Cogwheel icon


Step 4: Paste the Code

  • Click the next icon:

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:


eye icon

  • Click Save to apply all your changes:

Save


That’s it! You can now change the hover color of the Tagline and Description in the Events Design Element.


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 59 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