Site Branding

Customize visible elements of the Skillsoft Platform user experience such as logos, graphics, left navigation menus, and colors. When you activate branding changes, all of the following interfaces are updated:

Changing the brand

To change the brand of the Skillsoft platform user interface and platform-generated notifications:

  1. From the Site Settings menu, select Site Branding.
  2. Make any adjustments to logo, colors, and graphics.

    From the Headers and platform search banner section, you can change the following fields.

    Logos

    You can upload two logos, one for standard displays and one for dark mode displays on mobile devices. If you do not add a logo for dark mode, the standard logo display.

    • The logo displays on the header of pages in both the web and mobile apps, as well as in email notifications. It is displays in the content player when launched from another LMS. checks all uploaded images for viruses.
    • Recommended file specifications:
      • maximum size of 2 MB
      • transparent .png
    • Recommended minimum image dimensions: 480x120 pixels
    • Uploaded images scale down to a 160x40 pixel size, so uploading any multiple of these dimensions scales accordingly (for example, 480x120, 640x180, 800x200, etc.).

    The platform requires a logo file. If you do not have one, the platform reverts to the Skillsoft logo. The platform displays the custom logo in the user interface and email notifications.

    Header background colorThe background color for the header banner of the web and mobile apps as well as for some email notifications.
    Header default text colorPrimary color for icons and text in the header of the web and mobile app.
    Header hover and active text colorThe color of the text and icons when a user hovers the mouse over them.

    From the Menu section, you see two tabs, one for Learner and one for Admin. Select the tab whose menu you want to change.

    We recommend that you configure different interfaces for each so admin users can easily distinguish which view they are working in.

    For each menu, you can change the following fields.

    Menu background colorThe background color for the left navigation in the web and mobile apps.
    Menu default text colorThe primary color for icons and text in the left navigation in the web and mobile apps.
    Menu divider line colorThe color of the horizontal line separating the switch between learner and admin views, and the color of the vertical line under the My Learning option.
    Menu hover background colorThe color of the background of the menu text item when a user hovers the mouse over the item.
    Menu hover text colorThe color of the text and icons when a user hovers the mouse over the item.
    Menu active background colorThe color of the background of the menu text item when that item is selected and the corresponding page is displaying.
    Menu active text colorThe color of the text and icons when that item is selected and the corresponding page is displaying.

    You can see a preview of your color preferences below your selections.

    From the Search banner section, you can change the following fields:

    Search banner background imageThe main background image for the home page search banner.
    • This image appears only in the web app.
    • This image only appears if there are no banner promotions.
    • Recommended file specifications:
      • Maximum size 2 MB, .png or .jpg
      • Minimum width 1280x232 px

    • This image displays at full browser width and scales down as the browser resizes while maintaining the aspect ratio.

    • The original Skillsoft search banner image size is 2297x416.
    • The banner image should use a picture with an integrated filter to maintain contrast with the search box and search banner text color.
    Search banner text color

    The color of the main text on the search banner.

    The search box background is always white and the search text is always black.

    You can see a preview below the settings to ensure it is readable for your users.

    From the Button color section, you can change the following field.

    Button default colorThis setting is for primary and secondary buttons:
    • Primary buttons use the default color as the background with white text. When you roll over the primary button, the color is a few shades darker.
    • Secondary buttons have a white background and use the default color for the text. When you roll over the secondary button, a secondary outline appears around the button.

    Primary buttons may appear in some email notifications.

    From the Tab color section, you can change the following field.

    Selected tab colorThis setting is for the color of tabs that are used to segment pages.
    • The selected color shows as the background or underline of the active tab.
    • The selected color is used on text when you roll over an inactive tab.

    From the Login page section, you can change the following field.

    Background image on Login pageThis image appears on the login page.
    • Recommended file specifications:
      • Maximum size 2 MB, .png or .jpg
    • Recommended minimum image dimensions:
      • 1280 x 720 pixels
      • 16:9 ratio

    • This image displays at full browser width and scales down as the browser resizes while maintaining the aspect ratio.

    • The login box where learners enter login credentials is 410x728 pixels but does not scale as the browser resizes. At small browser widths the login box could cover 50% of the image.
  3. To apply all changes to all interfaces, ensure Activate branding check box is selected. If you leave the Activate branding check box unselected, changes are not applied, they are only stored in a draft state.
  4. Click Save to apply all changes or store all changes in draft state.

Restoring to system defaults

You can restore any branding changes to system defaults by clicking Reset all to Percipio look & feel from the top right corner of the Site Branding page.