You can modify the design elements of VMware Learning Platform user interfaces with branding or styling options that specify elements such as colors, fonts, or logos. You can also create custom CSS files.

You can add or change style elements for the End User UI, Admin UI, or event seating tickets (Event Management UI).

To open the Styling page, select Tenant Management > Branding.

Preview Tab

You can preview styling changes as you make them by clicking Preview User UI or Preview Admin.

About the Save Button

Even though you see your changes as you make them on the preview tabs, you must click the Save button to actually save your styling changes. If you do not save your changes, then your changes are lost when you log out.

When you click Save, current users see the impact of your styling changes upon the next refresh of their screen.

Color Options

Click one of the color options to open a palette from which you can select a color:

  • Top Header Color: Styles the header area color.

  • Top Header Accent Color: Styles the header accent color.

  • Side Navigation Background Color: Styles the side navigation background.

  • Primary Button Color: Styles the primary button color.

Logo

Click Browse within the Logo field to browse and load a logo. You can also drag a logo into the Load Logo File box. The logo you load must conform to an aspect ratio of 188 width/44 height.

Ticket Logo

Click Browse within the Ticket Logo field to browse and load a seating ticket logo. A ticket logo refers to the logo on a seating ticket. The Event Manager UI allows an admin to print seating tickets.

User Advanced UI Options

Click UserUI Advanced Options to access the advanced styling options for the User UI: •

  • Body Background Color: Styles the User UI’s background color .

  • Section Header Color: Styles the User UI’s section header color.

  • Catalog Monitor Color: Styles the User UI’s section monitor color.

Custom CSS

Cascading Style Sheets (CSS) files allow you customize the look and formatting of any document written in a markup language.

Customization made to a CSS file are added after any of the color options you use.

Click Custom CSS to access options that allow you to do the following:

  • Edit UserUI CSS: Opens and editing tool for the User UI CSS file.

  • Load a CSS File: Allow you to load a CSS file for the User UI. (You can also click/drag a CSS file into the Load box.)

  • Edit AdminUI CSS: Opens an edition tool for the Admin UI CSS file.

  • Load CSS File: Allows you to load a CSS for the Admin UI (You can also click or drag a CSS file into the Load box.)