Try ShortPoint nowBy default, there is no option to change the hover color of the Link Design Element:
This article will demonstrate how to change the hover color 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 Link Design Element on your page.
Interactive Tutorial
Copy the code below before starting the tutorial:
.shortpoint-btn-link:hover, .shortpoint-btn-link:focus {
color: yellow !important;
}NOTEThe Custom CSS will affect all Links inside the container. For example, if the Link is located inside a Row, all Links inside that Row will change.
Step-by-step Tutorial
Follow the detailed guide below to learn how to change the hover color of the Link Design Element.
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 Code
- Copy the Custom CSS code below:
.shortpoint-btn-link:hover, .shortpoint-btn-link:focus {
color: yellow !important;
}Step 3: Open the Settings Window
NOTEBefore proceeding, make sure you already have the Link Design Element on your page. To add it, check out How to Customize the Link Design Element.
- Check the location of your Link. In our case, it is located inside the Panel Design Element. Because of this, we need to open the settings window of the Panel. To do this, click its Easypass tag:
NOTEThe Custom CSS will affect all Links inside the container. For example, if the Link is located inside a Row, all Links inside that Row will change.
- Then, select the cogwheel icon:
Step 4: Paste the code
- Click the next icon:
- Go to the Custom CSS tab.
- Paste the code.
Step 5: Save
- Click the green check mark.
- Click the eye icon to see your page in real-time:
- Click Save to apply your changes:
That’s it! You can now customize the hover color of the Link Design Element.
Related solutions:
