How can we help you today?

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

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


brand colors

 

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.


Named colors


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.


color picker


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.


Hex color


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

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

Background color - the color you can customize for headers, sub-headers, and specific items background.

Text color

Text color - the color you can customize for titles, subtitles, descriptions, links, and their states (hover, visited).

Border Color

Border color - the color of the line around your Design Element

Symbol number icon color

Symbol, number, icon color - the color you can customize for symbols, numbers, and icons.

color overlay

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

Shadow color - the color you can add behind a Text Design Element.

Dark Theme

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.


design and advanced tabs

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


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