Theme Colors
  • 08 Jun 2022
  • 1 Minute to read
  • Dark
    Light
  • PDF

Theme Colors

  • Dark
    Light
  • PDF

Article Summary

This page guides you how to select the theme colors to get the look you want for your Self-Service Portal.

This theme configuration results in the Self-Service Portal colors that appear in the images displayed below.

Default SysAid theme
ThemesObjectsfilesTheme.jpgThemesObjectsfilesDefaultTheme1.gif

Custom theme
ThemesObjectsfilesFlowerColors.jpgThemesObjectsfilesFlowerTheme61.gif

Theme objects

ThemesObjectsfilesThemesNumbered.jpg

ThemesObjectsfilesThemeNumbers1.jpg

ThemesObjectsfilesThemeNumbers2.jpgThemesObjectsfilesThemeNumbers3.jpg

Primary

ObjectThemesefilesPrimary.jpg
The Primary element affects the following UI objects:

Main buttons:

ObjectThemesefilesPrimarySubmitButtons.jpg

Active tab background:
ObjectThemesefilesPrimaryActiveTabBackground.jpg

Indicator background:

ObjectThemesefilesPrimaryIndicator.jpg

Fields displayed in list:

ObjectThemesefilesDisplayedListFields.jpg

Dividers:

ObjectThemesefilesPrimaryDividers.jpg

Link text:

ObjectThemesefilesPrimaryLink2.jpg

Headings:
ObjectThemesefilesPrimaryHeadings.jpg

Toolbox Item icon:

ObjectThemesefilesPrimaryIconColor.jpg

Primary contrast

ObjectThemesefilesPrimaryContrast.jpg

The Primary Contrast element affects elements that display the primary color as the text or the background. For examples, see the white text and backgrounds in the Primary section above.

Background

ObjectThemesefilesBackground.jpg

The Background element affects the main background for all pages in the Self-Service Portal. For examples, see the white backgrounds in the screenshots on the top of this page.

Text

ObjectThemesefilesText.jpg

The Text element affects the most of the text items in the Self-Service Portal.

ThemesObjectsfilesText.jpg

Headlines

ObjectThemesefilesHeadlines.jpg

The Headlines element affects the following UI objects:

Page headlines:
ThemesObjectsfilesHeadlines3.jpg

Toolbox Item headlines:
ThemesObjectsfilesHeadlines2.jpg

SR headlines:
ThemesObjectsfilesHeadlines1.jpg

ObjectThemesefilesMenuText.jpg

The Menu Text element affects the following UI objects:

Text color for profile name:

ThemesObjectsfilesProfileText.jpg

Background color for main menu:

ThemesObjectsfilesProfileMenuBackground.jpg

Background color fields in the SR submission form:

ThemesObjectsfilesSumitFieldBackground.jpg

Button background

ObjectThemesefilesButtonBackground.jpg

The Button Background element affects the background color of action buttons such as those below:

ThemesObjectsfilesSubmitButton.jpg

ThemesObjectsfilesActionButtons.jpg

Button content

ObjectThemesefilesButtonContent.jpg

The Button Content element affects thetext color for action buttons such as the ones displayed above.

Hover

ObjectThemesefilesHover.jpg

The Header Background element affects the objects that change color when you hover your mouse over them.

ThemesObjectsfilesAddNoteHover.jpg

ThemesObjectsfilesAdminPortalHover.jpg

Header background

ObjectThemesefilesHeaderBackground.jpg

The Header Background element affects the header on the top of every page in the Self-Service Portal.

ThemesObjectsfilesTopBarBackground.jpg

Toolbar background

ObjectThemesefilesToolbarbackgroundToolbarbackground.jpg

The Toolbar Background element affects the background of the toolbar underneath the heading. See the image in the Header background section above.

Borders

ObjectThemesefilesBorders.jpg

The Borders element affects the borders of all fields and areas.

ThemesObjectsfilesBorderColor.jpg



Was this article helpful?

What's Next