Managing Color Settings of ShortPoint Design Elements

In this article, we will get you familiar with the color options available for ShortPoint Design Elements and show you how to set them.

TABLE OF CONTENTS

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

ShortPoint Color options

You can set the brand, named 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.

HEX colors

It is also possible to set the colors using the HEX color code:

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:

Theme color - main color that is used for defining the text and background colors of the Design Element, if not specified otherwise in Advanced or Items tabs.  By default, it is a primary color of your theme.
Background color, including header, sub-header and specific items background
Text color, including title, subtitle, description, links and their states (hover, visited)
Border color
Symbol, number, icon color
Color overlay and Color transparency
Shadow color (available for the Text Design Element)
Dark theme (available for the Twitter and Yammer Design Elements)
Loading screen color (available for the PowerApps Design Element). Check our solution article on How to Change PowerApps Loading Icon and Colorto know more.

Where to define the colors

Depending on the Design Element you are using, it is possible to set the color options in:

• Settings tab;
• Advanced tab;
• Background tab.

For some Design Elements, that have several items (for example Tiles, File Lists, Toggles etc.), you can set different color options for the chosen item only by Enabling Custom Settings in the Items tab:

That's it! Happy colorizing.

Related articles:

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