Customizing the colors of website icons

Easily customize the colors of System icons and auxiliary navigation icons. This article covers the CSS variables that control the icon colors and how to change them within a website theme or an individual website.

Important! To customize the colors of auxiliary navigation icons in an existing custom theme, you must enable SVG icons within the theme. See Changes to icon formats require updates to website themes for more details.

In This Article 

Icon color CSS variables

The CSS variables below specify the default colors for iMIS icons within the UltraWave stylesheet, which is dynamically included in any website theme. To change the colors of the site’s icons, define new values for these variables within a custom theme or a website’s Custom CSS.

Table 1: Viewing color CSS variables, their purpose, and default values
Variable Purpose Default value
--system-icon-color Defines the default color of System icons. hsl(h: 0, s: 0%, l: 63%)
--system-icon-color-hover Defines the color of System icons when hovered over by a cursor. hsl(h: 0, s: 0%, l: 43%)
--auxiliary-nav-icon-color Defines the default color of auxiliary navigation icons. hsl(h: 0, s: 0%, l: 16%)

Changing the icon colors within a custom theme

To change the icon colors within a custom theme, do the following:

  1. Go to RiSE > Theme Builder > Themes.
  2. Select the theme, then click Download.

  3. The theme downloads to your computer as a zip file. Extract the zip folder's contents.

    4. Extracting the zip file

  4. Locate the Cascading Style Sheet document (.css), then open the document using Notepad.

    5. Locating the stylesheet and opening it in Notepad

  5. Copy and paste the following code into the stylesheet:
    Copy
    :root {
        --system-icon-color: [new custom color];
        --system-icon-color-hover: [new custom color];
        --auxiliary-nav-icon-color: [new custom color];
    }
  6. Replace [new custom color] with the desired color value.

    7. Changing the color

  7. Save the changes, then re-zip the folder.
  8. Navigate back to iMIS, and go to RiSE > Theme Builder > Themes.
  9. Select the theme, then click Edit.
  10. From Upload new version, select the updated theme.
  11. Click Save.

Changing the icon colors within a website

To change the icon colors by adding Custom CSS to the website, do the following:

  1. Go to RiSE > Site Builder > Manage websites.
  2. Select the desired website, then select the Look and feel tab.
  3. Click Custom CSS.

  4. Enter the following code:
    Copy
    :root {
      --system-icon-color: [new custom color];
      --system-icon-color-hover: [new custom color];
      --auxiliary-nav-icon-color: [new custom color];
    }
  5. Replace [new custom color] with the desired color value.

  6. Click OK, then click Save.
  7. Click Publish, then click OK.