Color themes

Last update: Thu Aug 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Color themes and Branding in Learning Manager

Learning Manager enables you to change the appearance of the application to match your organization’s branding requirements.

Customize your user interface

In this training, you will explore ways to customize the appearance of the interface to match it with an organization’s branding requirements.

If you’re unable to launch the training, write to almacademy@adobe.com.

Branding branding

Click Branding on the left pane to update your organization name, change the subdomain, log styles and themes. Click Edit adjacent to each of these topics to modify the content.

Logo styling logostyling

Click Edit to set the appearance of your logo and company name on Learning Manager application.

Click Upload new logo and choose the logo from your computer to upload. You can preview the appearance of the logo and your organization name below. Choose the header style of your choice and click Save.

Themes themes

A set of five representative images is provided to preview your color theme changes before applying them to your application. Browse through these images by clicking < and > symbols on left and right side of the images respectively to preview. Alternatively, you can also click the navigation circles at the bottom of these images to browse through the set of preview snapshots.

Pick a theme

Click the Show hints below this section to display the hints on the image as shown below.

View hints on a theme

Learning Manager application provides five color theme options to its users:

Prime Default
Pebbles
Carnival
Autumn
Winter Sky
Vivid

NOTE

The Vivid theme is accessibility compliant.

Customize colors of a theme

You can customize the top bar color, Accent color (for example, icons color in left pane), primary color, and sidebar brightness of Themes except for the Prime Default theme.

In the Primary color picker, you can choose the color that is used for the Immersive UI.

To customize, choose the theme type on the left pane and click the squares adjacent to brand color and sidebar icon colors. Click the side bar in sidebar brightness, drag forward or backward to adjust the brightness. Observe the preview in the above images as you modify these options.

Click Reset Theme to restore the original settings of the theme. Click Save after completing the changes.

Live Preview

Click Live Preview at the bottom left corner of the Themes section. A pop-up appears as shown below:

The Live Preview pop-up

Choose the theme of your choice from the drop-down list, adjust the settings and click Preview to view the changes Live in your application. Now, you can go through all the features of the application and witness the changes. You can also change your roles while going through live preview. Once you are satisfied with the changes, you can come back to the Live theme preview pop-up feature and click Apply Theme.

While you are previewing the changes Live, the Live theme preview pop-up still appears at the bottom of the screen. You can choose to minimize the pop-up.

Multiple branding multiple-branding

Here’s how to implement multiple branding:

On the Admin app, select Branding on the left pane.
Select Edit in the Multiple Branding section.
Select the toggle button and enable it.

Internal users

Select an active field from the dropdown.
Based on the selection, you can change the name of the organization and upload a new logo for the users.

External users

Select an active field from the dropdown.
Based on the selection, you can change the name of the organization and upload a new logo for the users.

NOTE

Internal users can have active fields like External users (e.g., Admin must add the multi branding for the internal users and external users separately by selecting active field values separately.)

INFO

Check out this blog for more information.

Points to note

An Admin can add the multi-level branding for this active field value and the external user can login with different mechanisms (SSO Single (Okta, Mini orange), Social Login) and check if the multi branding is applicable.
An External user has an active field and active field value like the internal user: Even though it is shared, it must be separately specified in the multi branding by the admin. Once applied, external user can login with different mechanisms (SSO Single (Okta, Mini orange), Social Login) and check if the multi branding is applicable.
An External user moved from one profile to another profile: Moving the external user from one profile to another profile will not affect the active field value for the user unless the active field value is edited/ deleted by admin or the external user while logging in or registering

NOTE

When multiple branding is set for both internal and external users, with same active field name, with same active field value but different configuration. In this case, recommendation to customers would be to use same configuration setting (logo, theme, org name) to avoid discrepancy.

Customize your account customize

Adobe Learning Manager allows you to customize your account to provide enhanced user experience.

The list below displays the components that can be customized. To customize the account, contact Learning Manager support.

Customize

What is recommended

Customize training card colors

Only up to 12 custom colors.
Colors are applied to all Learning Objects. The colors will be sequentially applied to all the learning objects (trainings) and the hex color code is the required format for all colors, for example,#ffffff.
If only one color is provided, that color is applied to all Learning Objects.

Cursor pointer image

The custom image appears when a user hovers upon any Learning Object.

Custom image applied will be shown once a user mouse overs on the Learning Manager web page.
Recommended size - 16x16 or 24x24 px
Recommended image format - PNG, JPG

Progress icon image

Displayed while navigating between pages. Present in places where you see the '4-square' progress gif.

Recommended size - less than or equal to 32x32 px
Recommended image format - GIF, PNG, JPG

Fonts

For applying the fonts, a CDN is required. Also, you must share the font family to be applied.

Note: The font family must be supported on all browsers.

Background image

A background image is only visible in a learner role.

You must have the image that you need to apply to the learner's background.

Recommended Image format: PNG, JPG, JPEG
Recommended Size: 1400x908 px

Configure recommendation settings configurerecommendationsettings

On Branding > General, you can configure recommendation scopes for internal and external learners, and enable learners choose skills on the learner homepage.

On the General page, you have the following options:

Learner Homepage

Choose either Classic or Immersive. If you choose Immersive, then other options appear.

Training type

Choose either Custom or Industry Aligned. If there are less than 1000 learners, the entire account is considered as a single scope. The recommendation is based on all learners.

Recommendation Scope Setting

Choose one or more active fields. For Custom, you can choose at most one active field. For Industry Aligned, you can choose at most five active fields.

Enable learner to explore Areas of Interest

Only for Classic experience. Choose Yes or No.

Prompt users to select Areas of Interest (Skills)

Only for immersive experience. Choose Yes or No.

recommendation-more-help

d5e5961a-141b-4c77-820e-8453ddef913d