How can we help you today?

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

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

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


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


Where #FF000 can be replaced with the hex code you want to use, a recognized CSS color name, or an RGB code.




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.


enter ShortPoint 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.


add design element

  • Search and select Code.


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


Where #FF000 can be replaced with the hex code you want to use, a recognized CSS color name, or an RGB code.


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


add css code

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


disable sandbox mode


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.

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


Where #FF000 can be replaced with the hex code you want to use, a recognized CSS color name, or an RGB code.


The links on all the Table Design Elements within your site will now have the custom color you applied. Try it now!



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