When you customize the color of Design Elements, you have the option to choose from a pre-determined list:
But you can also add in your own Hex codes:
This article will demonstrate how to do so. Go through the steps below to learn how.
NOTEYou can also add your own Hex code in Theme Builder. You can find more about it in How to Add a Hex Color Code in the Theme Builder Color Palette Settings.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must have a Design Element that has color settings.
Interactive Tutorial
Start the interactive tutorial to learn how to add Hex codes for Design Elements:
TIPIf you don’t have your Hex codes yet, you can get them at htmlcolorcodes.com.
Step-by-step Tutorial
Follow the detailed guide below to add Hex codes for Design Elements:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Close the Toolbox:
- Click the ShortPoint tag.
- Select the Edit properties icon:
Step 2: Edit a Design Element
NOTEBefore proceeding, you must have a Design Element that has color settings. For this guide, we will use Panel.
- Click the EasyPass tag of the Design Element you want to use:
- Select the cogwheel icon:
Step 3: Add the Hex Code
- Go to the tab where the color setting is located. It is most commonly found in the Design tab, but it depends on the Design Element you’re using.
- Select the Color setting:
- Write the Hex code in the field provided:
- Click Create Hex code:
TIPIf you don’t have your Hex codes yet, you can get them at htmlcolorcodes.com.
Step 4: Save
- Once satisfied, select the green check mark.
- Click the eye icon to see your page in real-time:
- Click Save to apply your changes:
Amazing! You can now add your own Hex codes for Design Elements.
Related articles: