Skip to main content

Infinite BrassRing Platform

Specifying Theme Colors

Abstract

You can specify theme colors.

These colors display at the global level and at the application level.

Note: All entries with default values are displayed with italic font and the Reset button is disabled. If an entry has a custom value, it is displayed with non-italic font and the Reset button is enabled.

Relevant eLearning

Configure The Theme (Video, 01:30)

Default Theme Colors
Abstract

You can specify the theme colors, or use the default colors.

Theme colors include primary color, background color, link color, and so on.

Default Colors

The following illustration shows how the default colors correspond to a page in an application.

default_colors_aqua.jpg
Table 34. Default Colors

Color Field

Color

Explanation

Brand Primary Color

#137886

aqua.jpg

(teal)

Brand Alternate Color

#137886

aqua.jpg

(teal)

Banner Background Color

#137886

aqua.jpg

(teal)

Subnavigation Selected Link Background Color

#137886

aqua.jpg

(teal))

Subnavigation Selected Link Color

#FFF

image6.jpg

(white)

Primary Button Color

#137886

aqua.jpg

(teal)

Primary Button Hover Color

#164D56

darkaqua.jpg

(dark aqua)

Primary Button Text Color

#FFFFFF

image6.jpg

(white)

Primary Button Text Hover Color

#FFFFFF

image6.jpg

(white)



Note

Banner Background Color refers to the banner/header row that contains the logo.

Specifying Theme Colors for Various Areas on the Page
Abstract

You can specify the theme colors.

Theme colors include primary color, background color, link color, and so on.

The Theme - Colors menu item displays a page that allows you to specify theme colors. The color selector icon image29.jpg is supported in Chrome: Release 28.0 or greater.

image28.jpg
  1. Select Theme - Colors in the menu to display a page that allows you to specify/edit theme colors.

  2. Select the branding colors you want:

    • Primary color in the Brand Primary Color field.

    • Alternate color in the Brand Alternate Color field.

    • Color for the banner/header row that contains the logo in the Banner Background Color field.

    • Background link color of the subnavigation in the Subnavigation Selected Link Background Color field.

    • Selected link color of the subnavigation in the Subnavigation Selected Link Color field.

    • Button color in the Primary Button Color field.

    • Button hover color in the Primary Button Hover Color field.

    • Button text color in the Primary Button Text Color field.

    • Button text hover color in the Primary Button Text Hover Color field.

  3. With some browsers, a color selector (launched by selecting the color selector icon image29.jpg) lets you easily select colors. (Refer to the Using the Color Selector to Choose Colors topic that follows for details.) For browsers that do not support the color selector, the icon does not display.

  4. With all browsers, you can manually enter color values. (Refer to the Manually Entering Colors topic that follows for details.)

  5. If you do not want to save the entries you made, select the Cancel button. The Task List Labels page redisplays.

  6. You need to select the Apply button or OK button to save the changes. If you:

    1. Select the Apply button, a message informs you the settings were successfully saved, and you remain on the current page.

    2. Select the OK button, the Task List Labels page redisplays.

  7. To continue specifying/editing the settings, select a menu selection.

Using the Color Selector to Choose Colors
Abstract

In some browsers, you can use a color selector to choose the branding colors you want.

The color selector is supported in Chrome: Release 28.0 or greater.

For browsers that do not support the color selector:

  • The color selector icon does not display.

  • You can manually enter values into the color fields. (Refer to the Manually Entering Colors topic that follows for details.)

  1. Select Theme - Colors in the menu to display a page that allows you to specify/edit theme colors.

  2. Select a color selector icon image29.jpg. If no color is selected in the color selector, it shows black.

  3. A color selector displays.

    image30.jpg
  4. An indicator indicates where the color is in the spectrum. The Color/Solid portion of the color selector shows the color.

    image31.jpg
  5. To change the color, select the indicator, and drag it to a different part of the spectrum. The Color/Solid portion of the color selector changes to reflect the new color.

    image32.jpg
  6. To change the color within its current location on the spectrum, select the pointer and slide it as needed. The color changes to reflect the action.

    image33.jpg
  7. Each time you change the color, the RGB (Red, Green, Blue) and HSL (Hue, Saturation, Luminescence) numbers also change. You can also directly enter values into the RGB and HSL fields to change the color.

    image34.jpg
  8. To make the color a custom color, select the Add to Custom Colors button.

  9. To save the color, select the OK button on the color selector. The color selector window closes, and the selected color appears in the color selector icon and the hexadecimal value appears in the field.

  10. Repeat this process for each color you want to change.

  11. If you do not want to save the entries you made, select the Cancel button. The Task List Labels page redisplays.

  12. You need to select the Apply button or OK button to save the changes. If you:

    1. Select the Apply button, a message informs you the settings were successfully saved, and you remain on the current page.

    2. Select the OK button, the Task List Labels page redisplays.

  13. To continue specifying/editing the settings, select a menu selection.

Manually Entering Colors
Abstract

Using the Theme - Colors menu, you can manually specify colors for various areas of pages.

Most companies use very specific colors for branding. For example, a particular shade of blue. A company's marketing department can provide exact color values.

Not all browsers support the color selector. For such browsers, you can manually enter the following color types:

  • HEX RGB colors. For example, #fff (white) or #FFFFFF (white) or #000000 (black).

  • RGB colors. For example, rgb(123,123,123) or rgb(50%,50%,50%).

  • RGBA colors. For example, rgba(123,123,123,0.9) or rgba(50%,50%,50%,0.5).

  • LESS variables. For example, @ts-color-1 or @brand-primary-color. Note: It is recommended not to use a variable. Instead, enter a specific value.

  • Basic keyword values for standard colors (the color names are case-insensitive).

  • Default colors.

    Table 35. Standard Colors - Keyword Values

    Color

    Explanation

    Aqua

    image35.jpg

    Black

    image36.jpg

    Blue

    image37.jpg

    Fuchsia

    image38.jpg

    Grey

    image39.jpg

    Green

    image40.jpg

    Lime

    image41.jpg

    Maroon

    image42.jpg

    Navy

    image43.jpg

    Olive

    image44.jpg

    Purple

    image45.jpg

    Red

    image46.jpg

    Silver

    image47.jpg

    Teal

    image48.jpg

    Yellow

    image49.jpg

    White

    image6.jpg

    Transparent

    Transparent



Default Colors:

default colors

Table 36. Default Colors

Color

Color Image

Value

Teal

teal

#008571

rgb (0, 133, 113)

Blue

blue

#336fbb

rgb (51, 111, 187)

Dark Teal

dark teal

#005448

rgb (0, 84, 72)

Alert Red

alert red

#371d32

rgb (231, 29, 50)

Warning Yellow

warning yellow

#efc100

rgb (239, 193, 0)

Purple

purple

#734098

rgb (115, 64, 152)

Light Grey 1

light grey 1

#f0f2f4

rgb (240, 242, 244)

Light Grey 2

light grey 2

#e0e0e0

rgb (224, 224, 224)

Light Grey 3

light grey 3

#aeaeae

rgb (174, 174, 174)

Medium Grey

medium grey

#5a5a5a

rgb (90, 90, 90)

Text (dark grey)

text

#121212

rgb (18, 18, 18)

White

white

#ffffff

rgb (255, 255, 255)



  1. Select Theme - Colors in the menu to display a page that allows you to specify/edit theme colors.

  2. Enter a color value.

  3. Repeat this process for each color you want to change.

  4. To reset a color back to the default value, delete the color, and select the Reset link. Note: The Reset link is disabled until you select a color.

  5. If you do not want to save the entries you made, select the Cancel button. The Task List Labels page redisplays.

  6. You need to select the Apply button or OK button to save the changes. If you:

    1. Select the Apply button, a message informs you the settings were successfully saved, and you remain on the current page.

    2. Select the OK button, the Task List Labels page redisplays.

  7. To continue specifying/editing the settings, select a menu selection.

Ensuring Colors are Accessibility Compliant
Abstract

The default colors are required to be accessibility-compliant (to level AA). The default colors are in the process of changing to become compliant.

If you change the colors as part of branding/customizing (to match a company's theme colors), please ensure the changed colors are accessibility-compliant. There are tools that ensure the colors you enter are compliant. One such tool is the Color Contrast Analyzer. This tool lets you inspect foreground and background colors and informs you if the colors are compliant. The colors should be compliant to level AA.

Color Contrast Analyser

The tool also provides alternatives that show darker/lighter shades to try. These alternative colors will help you darken or lighten a shade to be compliant.

Colour Constrast Analyser showing alternative shades

If a company does not have an established color palette, the Index of Color Contrast Samples website displays color combinations that work well with a white background.

Saving Infinite Defaults as Your Defaults
Abstract

You can save any Infinite color default as your own default, ensuring that if Infinite changes defaults that your theme colors will remain as you want them.

If you do not explicitly save a color default as your own default, if Infinite changes a color default, your color will also change. For example, if Infinite changes the current teal color palette to green, your color palette will also change to green. If you explicitly save color defaults, your color palette would remain teal.

  1. In a page that contains theme colors (such as Theme Colors), go to the field you want to change (for example, Subnavigation Selected Link Color). For that field, #FFF (white) is the default color.

  2. Reenter the default color (for example, #FFF), and select the Apply button. A message informs you the setting was successfully changed.

  3. Repeat this process for any other color field you want to save.