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.


TABLE OF CONTENTS


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


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 Wireframe Builder


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


  • New Wireframe Builder:

Wireframe Open Settings


  • Legacy Wireframe 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 Visual Builder


Visual Builder Custom CSS tab


  • In Wireframe Builder


Wireframe Custom CSS tab


3.2. Paste the copied code


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


  • In Visual Builder


Visual Builder Paste CSS


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


  • In Wireframe Builder


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


Click the checkmark button:


Confirm Changes


  • In Wireframe Builder


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.


Result


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