How can we help you today?

How to Set a Hover Color for Icons in the ShortPoint Icon List Design Element

By default, the Icons hover color for the Icon List Design Element is defined by the Title text hover color (check the Advanced tab):



If no Title text color was defined in the settings, the Icons on hover will have the color according to the Theme color (check the Settings tab).


Note: The default value of Theme color is the primary color.



Using some custom CSS, it is possible to set a different hover color for the Icons:



You can also set a different color for each icon and make them stand out:



If you would like to apply this solution, please follow the steps in this support article.


TABLE OF CONTENTS


This article is for you if

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

Before we begin


CSS customizations are available since ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. You can visit our Download ShortPoint page and get the latest version of ShortPoint.


Step 1: Open the settings of the Icon List Design Element


Edit the page.


Click the cog wheel icon to open the Settings tab of the Icon List Design Element:



Step 2: Copy the custom CSS code


Here is the custom CSS code you will need to use for setting the hover color for the icons in the Icon List Design Element. Choose one of the options according to your preferences:


  • Option 1: To set the same color for all icons in the Icon List


.sp-type-icon-list-item.shortpoint-listitem:hover .shortpoint-icon {
  border-color: tomato !important;
  background-color: tomato !important;
}
Note: You may update the icon border and background-color values for the items.

  • Option 2: To set different colors for each icon in the Icon List


.sp-type-icon-list-item:nth-of-type(1).shortpoint-listitem:hover .shortpoint-icon {
  border-color: tomato !important;
  background-color: tomato !important;
}

.sp-type-icon-list-item:nth-of-type(2).shortpoint-listitem:hover .shortpoint-icon {
  border-color: green !important;
  background-color: red !important;
}

.sp-type-icon-list-item:nth-of-type(3).shortpoint-listitem:hover .shortpoint-icon {
  border-color: yellow !important;
  background-color: yellow !important;
}

.sp-type-icon-list-item:nth-of-type(4).shortpoint-listitem:hover .shortpoint-icon {
  border-color: blue !important;
  background-color: blue !important;
}


Notes:
1. You may update the icon border and background-color values for different items.
2. The code above is an example for setting the hover color for an Icon List that has 4 items in it. You can have more than 4 items. In this case, simply copy the CSS rule and then replace the item number in the parenthesis for :nth-of-type selector (for example, the CSS rule for the 5th item will look like this: .sp-type-icon-list-item:nth-of-type(5).shortpoint-listitem:hover .shortpoint-icon ).


After you have modified the code, please copy it to the clipboard.


Step 3: Update Icon List with the code


Switch to the Custom CSS tab:



Paste the copied code to the Custom CSS field:



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



Then, click Update and save the page:



Result


That's it. This is how it may look like on your page:



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