ESM Client Portal Branding and Style Settings

Overview

Enterprise Service Management (ESM) Client Portal Admins, or ESM Enterprise Admins, can control the branding and appearance settings for each Client Portal app they have responsibility for. Customization options include personalized headers, footers, site logos, favicons, and comprehensive style settings.

Important
Please note that any changes to the portal header and footer may take up to 15 minutes to take effect.

In this article:

Customize the Portal Header and Footer

The HTML Header and Footer sections allow administrators to show customized content at the top and bottom of pages when users visit their domain-specific Client Portal. HTML entered in the header field will be displayed at the top of every page, displayed in a <code>header</code> tag, and all HTML entered in the footer field will be displayed at the bottom of Client Portal pages in a <code>footer</code> tag. All HTML will be 'sanitized' by the system to prevent any code vulnerabilities before it is published.

To add custom HTML headers and footers to a Client Portal:

  1. Open the Client Portal settings:
    1. In the Client Portal, click your name in the top right, select Admin
  2. Click Settings in the left navigation.
  3. Scroll down to the Client HTML Header or Client HTML Footer section.
  4. To modify the Client HTML Header and enter the content as HTML into the field.
    Important
    In general the Client HTML Header should only be set/defined within the Sandbox/Testing instance of ESM. The production instance usually has no value in this field.
    Tip
    Create a custom HTML Module within the Client Portal app to store a header that will be used when the production instance is copied over to sandbox.
    1. Click on Modules & Pages.
    2. Click HTML Modules.
    3. Click + New button.
    4. In the Category dropdown, select Client Portal.
    5. In the Name field enter Sandbox Header (copy and paste source code into Header section in Settings).
    6. Uncheck the following:
      • Show Border
      • Show Name
    7. In the Content richtext box, click Source, then copy & paste the following HTML. Edit the URL and Service Portal name as appropriate. 
      <div style="background: rgb(255, 355, 213) none repeat scroll 0% 0%; border: 1px solid rgb(204, 204, 204); padding: 5px 10px; text-align: center;"><span style="font-size:18px;"><span style="font-size:18px;"><strong>WARNING!</strong></span> This is the test environment for the UAS Service Portal. Tickets created from this site will not be processed.<br />
If you are looking for the production instance please go to the <u><a href="https://service.alaska.edu/TDClient/41/Portal/Home/">UAS Service Portal</a></u>.</span></div>
    8. Click Save.
  5. To modify the Client HTML Footer, uncheck the User Default Client Footer box, then enter the needed content in HTML in the field.
  6. Click the Save button.

Customize the Client Portal Color Scheme

You can ensure that your organization's brand is reflected in your Client Portal. A variety of page components are supported, each of which can be clicked to display a color wheel for easy selection. A preview window on the right side of the page displays all the currently selected settings.

To customize the Portal styles:

  1. Open the Client Portal settings:
    1. In the Client Portal, click your name in the top right, select Admin
  2. Click Styles in the left navigation.
  3. Modify the colors to match your organization's branding for each section of the page. Use hexadecimal codes for colors, or utilize the color picker by clicking on a color field.
  4. Click Preview to apply the changes in the right-side Preview.
  5. To implement the changes on the Client Portal, click the Save and then Enable buttons.

Add a Unique Portal Logo and Link

By default, each Client Portal application will inherit the organization's logo and link; however, a unique logo and link can be applied for each Portal application.

The logo image dimensions should have a maximum width of 580 pixels and a maximum height of 80 pixels.

To customize the logo and link:

  1. Open the Client Portal settings:
    1. In the Client Portal, click your name in the top right, select Admin
  2. Click Styles in the left navigation.
  3. Scroll down to the Custom Logo section.
  4. Under Upload Logo, click Browse. Then locate the desired image file and click Open.
  5. To change the webpage the logo points to, enter a value starting with http:// or https://in the Logo URL field.
    Tip
    In general the Logo URL should refer to the MAU's primary web site (e.g. https://alaska.edu, https://uaa.alaska.edu, https://uaf.edu, https://uas.alaska.edu).
  6. Enter Logo Alt Text to override the default "Client Portal Home Page" text.
    Tip
    In general the Logo Alt Text should be the full legal name of the MAU the client portal is affiliated with (e.g. University of Alaska, University of Alaska Anchorage, University of Alaska Fairbanks, University of Alaska Southeast).
  7. Click Save.

Customize the Favicon

When enabled, this icon will display to the left of the page title in the web browser tab. It is also saved in a user's bookmarks to help quickly identify the link if they save the page in their browser.

There are third-party tools that can be used to help generate the icon in an ICO file format, which is the required file extension for icon uploads. 

To customize the favicon:

  1. Open the Client Portal settings:
    1. In the Client Portal, click your name in the top right, select Admin
  2. Click Styles in the left navigation.
  3. Scroll down to the Browser Favicon section and click Browse.
  4. Locate the desired image file and click Open
    Important
    The favicon must be a 16x16 pixel image in the .ico format.
  5. Click Save.

Organize the Top Navigation

You can customize the order in which your custom pages appear in the top navigation. The page buttons will always appear to the left of the portal application buttons.

  1. Open the Client Portal settings:
    1. In the Client Portal, click your name in the top right, select Admin
  2. ​​​​​​​Click Modules & Pages and select Pages
  3. In the Move column, use the up or down arrows to rearrange the pages. The Order indicates which place from the left the page will appear
  4. The changes are saved automatically and can be viewed on your portal when you refresh.

Need additional help or have issues

For support, requests may be submitted anytime using the appropriate Enterprise Service Management form. Requests generate a Ticket which will be worked in order received and urgency by IT Employees with the knowledge and permissions to assist with the request.

For immediate assistance please review the Contact Us page for the appropriate support group.

Print Article