How to Select a Custom Link Color for the Table Design Element

To learn how to change the text color of links within a Table Design Element, follow the steps in this article.

TABLE OF CONTENTS

• Prerequisites
• Applying custom color to links in the Table Design Element
  • Option 1: Apply custom link color using Code Design Element
    • Interactive Tutorial
    • Step-by-step Tutorial
  • Option 2: Apply custom link color in the Theme Builder

Prerequisites

• You have the latest ShortPoint SPFx version installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.
• You inserted a Table Design Element into one or more of your intranet pages and they contain linked content.

Applying custom color to links in the Table Design Element

You can select a custom color for links in Table Design Elements in two ways:

Option 1: Apply custom link color using Code Design Element

Choose this option when you want to apply the custom link color only to a specific Table Design Element on a page.

Interactive Tutorial

Click Get Started to learn how to modify the link colors in your Table Design Element. Copy this code and follow the steps in the tutorial.

.shortpoint-shortpoint-table-wrapper td .shortpoint-link,
.shortpoint-shortpoint-table-wrapper td .shortpoint-btn:visited,
.shortpoint-shortpoint-table-wrapper td .shortpoint-btn:link {
    color: #FF0000 !important;
}

Step-by-step Tutorial

You can also follow the detailed steps listed below:

Step 1: Edit the ShortPoint web part

• On the SharePoint page where your Table Design Element is located, click Edit.
• Select the ShortPoint web part and press the pencil icon to enter edit mode.

Step 2: Insert the Code Design Element

• Navigate to the space below your Table Design Element.
• Click the plus Add design element icon to open the Page Builder.

• Search and select Code.

Step 3: Copy and paste the CSS code

This is the custom CSS code we will be adding to the Code Design Element:

.shortpoint-shortpoint-table-wrapper td .shortpoint-link,
.shortpoint-shortpoint-table-wrapper td .shortpoint-btn:visited,
.shortpoint-shortpoint-table-wrapper td .shortpoint-btn:link {
    color: #FF0000 !important;
}

• Copy the custom CSS code.
• Paste it in the CSS field.

• Switch to the Design tab.
• Slide the toggle to disable Sandbox Mode.
• Hit the green check mark button to apply the changes.

You will see that the links on your table now adhere to the color you indicated.

Step 4: Save and publish the page

• Click Save on the Action Toolbar to save your edits.
• Republish the page.

Option 2: Apply custom link color in the Theme Builder

Choose this option when you want to apply the custom link color to all Table Design Elements on your SharePoint site.

Follow the steps in our article on how to Apply Custom CSS from ShortPoint Theme Builder and use the code below:

.shortpoint-shortpoint-table-wrapper td .shortpoint-link,
.shortpoint-shortpoint-table-wrapper td .shortpoint-btn:visited,
.shortpoint-shortpoint-table-wrapper td .shortpoint-btn:link {
    color: #FF0000 !important;
}