How can we help you today?

Known Issue: Color Is Not Applied on Hyperlinks in ShortPoint Froala Text Editor

This article is for you if:

  • You use Office 365 (SharePoint Online) or SharePoint 2019 On-Premise environment.
  • You use Modern SharePoint Experience.
  • You have ShortPoint SPFx app installed on your SharePoint sites.

TABLE OF CONTENTS


Issue


After changing the hyperlinked text color and saving your changes, you still see the default links style on your page.


There are two possible ways to set the hyperlinked text color:

  • in Page Builder, using the Froala editor color option of the content-holder Design Element inside the Content tab:



  • setting the Link Color in the Theme Builder (Fonts & Typography > Links):



Note:
Setting the hyperlink color in Theme Builder affects all hyperlinks on the site collection, while changing it in the Design Element settings is only applicable for the selected hyperlinks.


In both cases, after saving/publishing the changes, the hyperlinked text remains the default color, ignoring the settings:



Reason


The color settings are not being inherited by the Froala editor.

Our team is currently working on fixing it in the product.


Workaround


This issue can be fixed with some custom CSS. Please copy the code below and save it to the clipboard:

a:-webkit-any-link {
color: inherit;
}

Depending on where you are setting the hyperlinks text color (Design Element settings or Theme Builder), choose the relevant option to apply this workaround:


Option 1: Adding Custom CSS to the Design Element Settings


This will affect only the modified element.

Edit the page. Open the settings of the Design Element (in our example, it is a Panel) by clicking the cog wheel icon:



Switch to the Custom CSS tab:



Paste the custom CSS code to the respective field:



You may Preview the result:



Click Update, and then save the page:



Option 2: Adding Custom CSS to the Theme Builder

This will affect all the hyperlinks in a site.

Open the ShortPoint Theme Builder.


Navigate to Utilities > Custom CSS:



Paste the custom CSS code to the respective field:



Note:
You can also remove the text underline by adding text-decoration: none; property to the code block.


Click Apply (1), and then Publish (2) to save the changes:



Result


This is how it will look like after the changes:



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