How to Change the Color of Link Text and Link Hover in the Tiles Design Element with Custom CSS

If you have set the Link Color and Link Hover Color using Theme Builder, you may sometimes wish to override these colors for a specific Design Element. In this article, we will demonstrate how this can be achieved using some custom CSS. For this example, we will be using the Tiles Design Element.

Before the CSS:

Note: You will notice the text color looks correct (white) in the Preview window of Page Builder and after saving in Visual Builder, as well as right after Republishing. However, upon refreshing the page, the Theme Builder CSS gets injected and overrides the colors set in the Tiles Design Element, changing the text color to a dark blue that blends into the background image of the tiles.

After the CSS:

In the example above, we simply used the CSS to keep the text white. However, you will be able to assign both the link text and link hover colors separately. Follow the steps below to apply the custom CSS to your Tiles Design Element.

Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.

TABLE OF CONTENTS

• Before we begin
• Step 1. Open the settings of the Tiles Design Element
• Step 2. Copy the custom CSS code
• Step 3. Update the Tiles Design Element with the code
  • 3.1. Switch to the Custom CSS tab
  • 3.2. Paste the copied code
  • 3.3. Confirm your changes
• Result

Before we begin

ShortPoint CSS customizations are available in ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and g et the latest version of ShortPoint.

Please note, these steps will only need completed if you are using the Link field on the Tiles tab of the Tiles Design Element. If you are not using the Link field, you can simply change the text color from the Text Color field on the Advanced tab of the Tiles Design Element.

Step 1. Open the settings of the Tiles Design Element

Edit the page. Open the settings of the Tiles Design Element:

• In Live Mode

Locate the Tiles Design Element where you would like to add the custom CSS and enter the EasyPass Active Mode. Then click the cog wheel icon to open the settings:

The Design tab will open.

• In Grid Mode

Click the cog wheel icon to open the settings of the Tiles Design Element:

• New ShortPoint Page Builder Grid Mode:

• Legacy Page Builder:

The Settings tab will open.

Step 2. Copy the custom CSS code

Here is the custom CSS code you will need to use for changing the Link Text and Hover colors in the Tiles Design Element:

.shortpoint-tile-link {
  color: green !important;
}
.shortpoint-tile-link :hover {
  color: pink !important;
}

Note: You may update the color values according to your preferences.

3.1. Switch to the Custom CSS tab

• In Live Mode

• In Grid Mode

3.2. Paste the copied code

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

• In Live Mode 

You will see the changes applied to your Design Element in real time.

• In Grid Mode

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

3.3. Confirm your changes

• In Live Mode 

Click the checkmark button:

• In Grid Mode

Click Update: 

Finally, save and/or republish the page. Make sure to also refresh the page to ensure your colors are correctly being applied.

Result

That's it. You should now have the desired text colors in the Tiles Design Element:

Related articles:

• How to Make Circular ShortPoint Tiles
• How to Make Rounded Corners for ShortPoint Tiles
• How to Disable the Default Tiles Animation
• How to Add a Hover Color to the ShortPoint Tiles Design Element with Custom CSS
• How to Prevent Images Cropping on ShortPoint Tiles Design Element (SharePoint 2016 and SharePoint 2013 On-Premise)
• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)