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

• This article is for you if
• Issue
• Reason
• Workaround
  • Option 1: Adding the Custom CSS to the Theme Builder
  • Option 2: Adding the Custom CSS to the Design Element Settings
• Result

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;
}

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:

• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)
• Apply Custom CSS from ShortPoint Theme Builder