2. Custom Logo and Login Screen Enhancements
Overview
For this phase of the project, we will focus on the following enhancements to the custom branding capabilities.
Add new fields for using a custom logo
Enhanced login page customizations for colors and branding
Limit new fields to enterprise SKUs only
Nice-to-have: preview functionality
Feature Discovery Panel
<Enterprise
Custom logo settings are only available to Enterprise customers and above. If the server license is lower than Enterprise, a feature discovery panel displays at the top of the page.
If a trial is available, the feature discovery banner will display with a ‘Start trial’ button. Follow existing behavior for feature discovery panels.
If trial is not available, the feature discovery banner will display a ‘Contact sales’ button. Follow existing behavior for feature discovery panels.
Section: Custom logo settings (new)
Shows for Enterprise and above
New settings for a custom logo allow admins to add their own brand identity to the application by uploading custom logos that will be visible in the login page and application header.
These new sections are added to System Console > Site Configuration > Customization page.
The following fields are available for customization:
Logo for light backgrounds
Logo for dark backgrounds
Where to display custom logo
Favicon
Before the images have been uploaded, a Select image button displays.
Once images have been uploaded, a small image preview displays along with a x button to remove the image.
Where to display custom logos
Admins can decide on which locations they want the custom logo to display.
Checkbox: Show custom logo on login page header
If checked, will show the uploaded logo in place of the Mattermost logo on the login page
Checkbox: Show custom logo on main application
If checked, will show the upoaded logo in place of the ‘Channels’ name/icon on the main app header.
Custom logo in the login page
If the custom logo is uploaded and configured to Show custom logo on login page header, it will display in the top-left corner of the login screen and all related pre-auth screens (signup, forgot password, mfa screen, landing screen, etc).
Custom logo in the main applicaiton header
If the custom logo is uploaded and configured to Show custom logo on main application header, it will display in place of the “channels” name.
Custom favicon shows in browser tab
Admins can customize the icon that displays in the browser tab when their server is viewed in a web browser.
Custom login screen enhancements
As noted in 1. Re-organizing existing settings , we will group all login page customization settings in to this section.
< Enterprise
For licenses lower than enterprise, the custom login screen fields will be grouped like below and any new fields (see below) will not be available.
A notice displays at the bottom of this section stating ‘Additional customizations are available in Enterprise’.
Enterprise and above
For enterprise and above, the following additional login customization fields will be visible:
Login page heading- Larege page title - default: “Log in to your account”Login page colors - grouping of 6 colors):
Background- The color of the whole page’s backgroundText- The default text color for text on the page.Login container background- The color of the container on the right side.Login container text- The color of the text inside the container on the right side.Button background- The primary button’s background colorButton text- The primary buton’s text label color.
Login page background image- an image that can be applied on top of theBackgroundcolor and fills the entire page.Login page custom css- CSS, scoped to the pre-auth views only that can override specific styles.Show footer links- An option to hide the footer links (To be confirmed if this would violate legal requirements).
Preview functionality
Pending feasibility…
Mobile app
Select custom branding changes should also be applied to the mobile app—depending on real eastate and feasibility.
Supported on mobile
Login page headingLogin page subheadingLogin page colors - grouping of 6 colors):
Login page background image- an image that can be applied on top of theBackgroundcolor and fills the entire page.Login page colors - grouping of 6 colors):
Background- The color of the whole page’s backgroundText- The default text color for text on the page.Login container background- The color of the container on the right side.Login container text- The color of the text inside the container on the right side.Button background- The primary button’s background colorButton text- The primary buton’s text label color.
Unsupported on mobile
Custom logo- only applicable to webapp due to available spaceLogin page custom css- This is only applicable to the webappLogin form titleLogin page custom textLogin page custom imageShow footer links