How can we help you today?

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:

Example Before 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:

Example After 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.

NoteShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.


Before we begin

ShortPoint CSS customizations are available in ShortPoint version 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:

Visual Builder Open 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:

Wireframe Open Settings

  • Legacy Page Builder:

Legacy Wireframe Open Settings

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 TileDesign 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.

Please copy the code to the clipboard.

Step 3. Update the Tiles Design Element with the code

3.1. Switch to the Custom CSS tab

  • In Live Mode

Visual Builder Custom CSS tab

  • In Grid Mode

Wireframe Custom CSS tab

3.2. Paste the copied code

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

  • In Live Mode 

Visual Builder Paste CSS

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

  • In Grid Mode

Wireframe Paste CSS

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

Preview CSS

3.3. Confirm your changes

  • In Live Mode 

Click the checkmark button:

Confirm Changes

  • In Grid Mode

Click Update

Confirm Changes

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


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

Tiles Result

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