Color themes

Last update: Fri Feb 16 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 orignal 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.

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