How to setup custom styles for the login page
Login page styles
There is an option to override the default login page styles via the API.
Info
This is applicable only for custom styles. If omitted, the default styles will be utilized.
Customization options
Users have the capability to customize the primary and secondary colors of the page. The primary color is used for the main actions, such as login, while the secondary color is designated for error messages and secondary actions. Colors should be provided in hex format.
Example
Example for the color to use is:
#7910e3
Method: PUT
Endpoint: api/Settings/login-styles?PrimaryColor=%2332a852&SecondaryColor=%2332a852
Description: This method updates the primary and secondary colors. A background image and logo can also be uploaded as an IFormFile.
Customizing the logo and background image of the login page is also feasible. To upload a background image and logo, the same endpoint is used. The only restriction on the images is their file size, which is capped at 2MB.
To achieve optimal results with the background image, it is recommended to upload an image that adheres to the following specifications:
Aspect Ratio: 1:1 Size: 2048px x 2048px Compression: The file should be compressed to reduce loading times.
Warning
If the uploaded image does not match the recommended aspect ratio, it will automatically be cropped to fit the designated space.
Image specifications
We recommend using a wallpaper or background image that has an aspect ratio of 1:1 and provides ample space around the most important content to allow for cropping.
We suggest placing the logo above the login bar rather than within the image. If you still wish to insert a logo onto the image, position it in the center and ensure that the logo size is not too large.
To illustrate image cropping in practice, here are a few examples of an image used across different displays.
