Customize UI

Use the Customize UI (user interface) page to customize the look of both the customer and staff sites. Please note that any changes you make to this page affect all users of both sites as soon as the request is submitted.

Go to section

Staff UI Settings

Dashboard Settings

Login Page Colors

Font / Body

Page Heading Colors

Menu Colors

Widget Colors

Shared Settings

Visual Style

System Font

Top Banner

Theme / Section Colors

Tab Colors

Link Colors

List Table Colors

Inner Group Colors

Buttons

Work Area

Online UI Settings

Buttons

New CUI Settings

Location

Administration > Web Admin > Customize UI

Modifiying the UI

For each row of color fields on the Customized UI page, you can enter the color number directly or select it from a palette. Click Select to launch a color palette page where you can select a particular color for a field.

 

The following options are included on the Customize UI page:

Name of Field Description

Reset to Default Choices

Option to reset all customized UI choices back to blue.

 

Once you reset the settings, the process cannot be undone.

Use Retro Black Theme

Option to reset all the customized UI choices back to black.

 

Once you reset the settings, the process cannot be undone.

Preview Changes

Option to preview the changes made to the settings.

 

Click the link to open a sample page with the new color and font settings.

 

Tip: Click Preview before submitting changes. In this way you can confirm that the new settings are correct, and make any necessary adjustments before applying them.

 

The Preview Changes link appears on both the top and bottom of the page.

Staff UI Settings

Use this section to customize the appearance of the staff (admin) interface.

 

Select an interface style:

  • Use ACTIVE Net Tabbed UI - tabbed interface

  • Use ACTIVE Net Classic UI - non-tabbed interface

 

For Tabbed UI:

  • Enter the Maximum concurrent open tabs (the most number of tabs a user can have open at one time).

  • Select where to open banner items when users click banner buttons at the top of the page:

    • To open in the current tab (and navigate away from the current page), select Always open banner menu pick in active tab.

    • To open in a new tab, clear this option.

  • Select the required color theme:

    • Color Theme: ACTIVE Net now provides four pre-defined color themes. To apply a pre-defined color theme, select the Color Theme radio button, then select the required color theme. The current page’s visual style changes accordingly for preview. Note that if the Color Theme radio button is selected, then the Reset to Default Cool Blue Theme and Use Retro Black Theme settings are hidden.

    • Legacy Color Theme (selected by default): to apply the legacy AUI color theme, select the Legacy Color Theme radio button.  

 

Click Submit to save your changes, then log off and log on again to enable the new settings.

Dashboard Settings

Use this section to customize the appearance of the default Front Desk interface.

 

To enable a dashboard-style default Front Desk interface, click Enable default Front desk Dashboard?

 

Note: This option only specifies the default Front Desk interface. If you have created Front Desk dashboards and linked them to specific users or profiles, these dashboards will not be affected by this option.

Login Page Colors

Set the following colors:

  • Login Box Color

  • Note: Because of the transparency of the ACTIVE Net logo on the login page, if you select too bright of a color for the login box, the ACTIVE Net logo may appear "washed out" (that is, in poor contrast to the background login box color).

  • Login Box Text Color

Font/Body

Font Color

The font color to be used for all the text.

Body Background Color

The background color to be used for the body.

Page Heading Colors

Page Heading Text Color

The color of the page heading text (for example: on the Customize UI page, this is the color of the Customize UI text).

Page Heading Background

The color of the page heading background (for example: on the Customize UI page, this is color of the background bar behind Customize UI).

Menu Colors

Menu Text

The color of the first-level menu item text (for example: in the Administration menu, the text color of the Web Admin item).

Menu Background

The color of the background of the ACTIVE Net first-level menu (for example: in the Administration menu, the background of Web Admin).

Menu Background Hover

The color that the background of the first-level menu changes to when the user's mouse is hovered over it.

Sub-Menu Text

The color of the second-level menu item text (e.g. in Administration menu > Web Admin, the text color of the Customize UI item).

Scrollbar Face Color

The color of the vertical and horizontal scrollbar of the ACTIVE Net menu.

Widget Colors

Select colors for the widget layout:

  • Widget Heading Text Color

  • Widget Heading Background Color

  • Widget Body Text Color

  • Widget Body Background Color

Shared Settings

Use this section to customize the appearance of both the staff and customer (public) sites.

Visual Style

Color Effects

For displaying the banner and banner tabs, title bar, and menu headings, select whether to use Shading or No Shading.

 

Tip: Shading creates a "gradient" feel, which may be more visually appealing. However, it is more resource-intensive and may not be well suited for older computers, older web browsers, or slow internet connections.

Corners

For section controls, select whether to display with Rounded or Square corners.

System Font

Font List

Enter the font type to be used for all text in the interface.

 

The available font types are serif (defaults to Times New Roman), sans-serif (defaults to Arial), Lucida Console, Marlett, Tahoma, Modern (Plotter), Basemic, Kingsoft Phonetic, Book Antiqua, Century Gothic, Garamond, Haettenschweiler, Impact, Monotype Corsiva, Trebuchet MS, Verdana, Wingdings,etc.

 

Note: If the font is not supported in ACTIVE Net, the system uses the default serif font (Times New Roman) instead.

Top Banner

Banner Text Color

The color of the top banner text (for example: color of the Front Desk and Administration text on the top banner).

Banner Background

The color of the top banner background (for example: color of the background of the Front Desk and Administration text on the top banner).

Theme/Section Colors

Theme Color

The color of all other text that are not included in the settings below for column headings, page headings, group headings, banner text, or menu text.

Theme Heading Text

The color of the theme heading text.

Tab Colors

Inactive Tab Background

The color of the background of the tab items (for example: the color of the background of the Administration tab).

Active Tab Background

The color of the background of a tab item when it has been selected or when the mouse hovers over it.

Tab Text Color

The text color of the tab items (for example: the color of the Administration tab text).

Link Colors

Normal

The standard color of a hyperlink (before it is clicked or visited).

Visited

The color of a hyperlink after it has been visited.

 

This is the color of the link when it is displayed again in the same session after the link has been visited.

Active

The color of an active hyperlink. This is the color of the hyperlink after if it is clicked and the linked page is the active page.

 

If the hyperlink's page becomes active again (for example: the linked page is closed), the hyperlink becomes visited and changes to the visited hyperlink's color defined above.

Hover

The color of a hyperlink when a user's mouse is hovered over it.

List Table Colors

Column Heading Text

The color of the column heading text in tables (for example: on the Manage Favorites page, the Menu Item and Display Name text are column headings).

Column Heading Background

The background color of the column heading in tables (for example: on the Manage Favorites page, the background behind the Menu Item and Display Name text).

Column Heading Normal Link

The color of a link that appears on a table column heading before it is clicked or visited (for example: on the Report Definition for Custom Lists page, the Title link appears as a column heading).

Column Heading Visited Link

The color of a link that appears on a table column heading when it is displayed again in the same session after the link has been visited (for example: on the Report Definition for Custom Lists page, the Title link appears as a column heading).

Column Heading Active Link

The color of a link that appears on a table column heading when it is clicked and while the link action is being performed (for example: on the Report Definition for Custom Lists page, clicking the Title link will turn it to this color while the table column items are being sorted according to title).

Column Heading Hover Link

The color of a link that appears on a table column heading when the mouse hovers over it (for example: on the Report Definition for Custom Lists page, the Title link appears as a column heading).

Table Row Background

Select the background color for report filters and some tables

List Alternate Row Color 1

Select the background color to use for odd-numbered rows within tables.

List Alternate Row Color 2

Select the background color to use for even-numbered rows within tables.

Inner Group Colors

Inner Group Heading Text

The color of the inner group heading text (for example: on the Activity Enrollment page, Type of Registration and Fees are inner group headings).

Inner Group Heading Background

The color of the inner group heading background (for example: on the Activity Enrollment page, the background of the Type of Registration inner group heading).

Inner Group Body Text

The color of the inner group heading body text (for example: on the Activity Enrollment page, the color of the Enroll button text under Type of Registration ).

Inner Group Body Background

The color of the section inner group heading background (for example: on the Activity Enrollment page, the background color of the radio buttons under Type of Registration ).

Buttons

Button Font

The font style to be used for image buttons (for example: the font of the Submit and Cancel buttons below).

Button Text

The color of the text of image buttons (for example: the text color of the Submit and Cancel buttons below).

Button Background

The color of the background of image buttons (for example: the background color of the Submit and Cancel buttons below).

Work Area

Background Color

Select the background color to use for the work area on the staff site.

This setting does not apply to the Facility Management module. The background color of the Facility Management module is now always white.

Add Watermark

Option to add a single or tiled watermark to the background.

 

A watermark can be either text or an image.

Watermark Type

Select whether to use an uploaded image or text as the background watermark.

 

Note: This option is only visible if the Add Watermark option above is selected.

Background Image

Select an uploaded image to use as the background.

 

Note: This option is only visible if Picture Watermark is selected for the Watermark Type.

 

You can upload images to ACTIVE Net using the File Upload page.

Watermark Text

Enter text to use as for the background watermark.

 

Note: This option is only visible if Text Watermark is selected for the Watermark Type.

Font Name

Select the font to use for the watermark text.

 

Note: These options are only visible if Text Watermark is selected for the Watermark Type.

Font Size

Select the font size to use for the watermark text.

Bold

Option to make the watermark text bold.

Italic

Option to make the watermark text italic.

Font Color

Select the font color to use for the watermark text.

Incline

Select the orientation of the watermark text.

Image Format

Select whether to display a single watermark or multiple tiled watermarks.

Location on Page

Select where on the page to display the watermark.

 

Note: This option is only visible if the Image Format option above is set to Single.

Online UI Settings

Use this section to customize the appearance of the customer (public access) site.

Top Banner Background

Option to select either a solid color or a gradient color for the background of the top banner on the customer (public access) site.

Buttons

Button Text

Text color for the Add to Cart button on the customer (public access) site.

Button Background

Background color of the Add to Cart button on the customer (public access) site.

New CUI Settings

Note: This section only has an effect if you have moved your public access site to the new customer interface. Contact your account manager for more information about the new customer interface.

 

To specify the color scheme for the public site, select one of the available preset themes.

 

You can also select Custom to customize your own color scheme. To create a custom color scheme, specify four different color codes that correspond to different areas of the customer user interface:

 

  • Primary – Select a strong color for areas that are meant to draw your customers’ eyes:

    • Sign In button

    • Add to Cart buttons

    • Search result magnifying glass icon

    • Urgency messages such as “Only 2 spaces left. Register now!”

    • Events that you have flagged to display as “new on calendars”

 

  • Secondary – Select a color that coordinates with the primary color to highlight other page areas:

    • Wish List buttons

    • Regular events on calendars

 

  • Light Neutral – Select a light color that complements the primary and secondary colors for specific background areas:

    • Background for navigation areas such as the “register for activities” area

    • Background for filter criteria

    • Highlighted table rows

    • Expandable section header bars

    • Background to events calendar

 

  • Dark Accent – Select a darker shade of the secondary color or of the light neutral color to apply to the main navigation bar.

Related topics

Return to Web Admin