Managing Color Settings of ShortPoint Design Elements

This article will discuss the color options available for ShortPoint Design Elements and show you how to customize them.

TABLE OF CONTENTS

• Prerequisites
• ShortPoint Color options
  • Brand colors
  • Named colors
  • Custom colors
  • HEX colors
• Setting colors for Design Elements
  • Color settings
  • Where to define the colors

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.

ShortPoint Color options

You can set the brand colors, named colors, custom colors, and HEX colors for the ShortPoint Design Elements.

Brand colors

Brand colors represent your company theme colors defined in the Theme Builder > Color Palette settings of the current Site Collection. You can easily distinguish these colors among others by their names: Primary, Secondary, Highlight, Alternate, etc.

Note:
These colors will be synced with the ones set in Theme Builder and updated along with it.

Named colors

These colors suggest other popular named colors such as red, violet, orange, etc.

Custom colors

ShortPoint has a color picker that allows you to choose custom colors. Simply click the custom color you prefer and it will automatically reflect on your design.

HEX colors

It is also possible to set the colors using the HEX color code. Simply type the HEX code of the color you prefer in the designated field.

Note: HEX values always begin with # and specify values of red, blue, and green using hexadecimal numbers such as #1B9DD8. 

To know more about adding the hex colors, check our How to Add Hex Color Code in Page Builder tutorial.

Setting colors for Design Elements

Color settings

Depending on the Design Element you are using, it is possible to define the following color settings:

NOTE: The options listed below are only some of the most common color settings you can define. Depending on the Design Element you are using, you may see other color options.

	Theme color - the main color that is used for defining the text and background colors of the Design Elemen, if not specified otherwise in Advanced or Items tabs. By default, it is the primary color of your theme.
	Background color - the color you can customize for headers, sub-headers, and specific items background.
	Text color - the color you can customize for titles, subtitles, descriptions, links, and their states (hover, visited).
	Border color - the color of the line around your Design Element
	Symbol, number, icon color - the color you can customize for symbols, numbers, and icons.
	Color overlay and Color transparency - the color you can add over a Design Element. You can easily adjust the color’s transparency using the Color transparency slider.
	Shadow color - the color you can add behind a Text Design Element.
	Dark theme (available for the X and Viva Engage Design Elements) - allows you to enable dark theme.

Where to define the colors

Depending on the Design Element you are using, it is possible to set the color options in [1] Design or [2] Advanced tabs.

That's it! You can now use colors to enhance the design of your SharePoint sites.

Related articles:

• Managing Paddings and Margins for ShortPoint Design Elements
• Managing Visibility of ShortPoint Design Elements
• Custom CSS Tab for ShortPoint Design Elements