---
title: Styling the Login Page
slug: neurons-for-itsm/admin-user-help/enu/latest/styling-the-login-page
createdAt: 2026-07-14T19:16:49.486Z
---
Use the **Login Page** tab to configure the Neurons for ITSM login page. The same login page is displayed for all roles and user interfaces.
**For Cloud: **The customizations to the login page are saved in the tenant that you are configuring. Use the URL that is configured for the Tenant record in the ConfigDB in order to access the login page
**For On-Premise: **The application will select which customizations to displayed based on the address used in the browser. For the customizations to be correctly displayed, you must use the URL that is configured in the ConfigDB in order to access the customized login page
To restore the login page to its default configuration, click the **remove customization** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/FGxuU-uqJwLC29cFpn7h5_removecustomizationicon23x23.png" alt caption size="10" width="23" height="23"} at the top of the Style Editor.
## About the Options on the Login Page Tab
For information on making color changes, see [Working with Colors in the Style Editor](docId\:XiwRLiHw_eHX10JGAAEsT).
| Section | Parameter | Description |
| ------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Common | Layout | The name of the current layout to display the drop-down menu.
Legacy (original Neurons for ITSM login page design)
Cloud
Fancy
Enterprise |
| | Text | Text color of all common text including the user roles in the login page. |
| | Links | Text color of the **Forgot Password?** link. |
| Background | Color | Background color of the login page. |
| | Image | An image for the background. Click **Upload file** to add an image.
See [Adding a Background Image to the Login Page](docId\:RWqN1sN8BhV9Dttrl3y3p). |
| Title | Show | Cloud, fancy, and enterprise layouts only.
True means visible. False means not visible. |
| | Text Title | The text title. See [Editing the Title Text on the Login Page](docId\:RWqN1sN8BhV9Dttrl3y3p).
You cannot localize the title text. |
| | Text Color | Color of the title text. |
| | Size | Size of the title text. |
| Logo | Show | **Cloud**, **Fancy**, and **Enterprise** layouts only.
True means visible. False means not visible. |
| | Scale | Display size of the logo as a percentage of the original image. |
| | Image | The logo image. Click **Upload file** to add a logo.
See [Adding a New Logo to the Login Page](docId\:RWqN1sN8BhV9Dttrl3y3p). |
| Form | Border Color | For legacy layouts only. The color of the border. |
| | Border Width | For legacy layouts only. A wide border displaces other objects on the form. To hide the border, set the width to zero. |
| | Field Text | Color of the text in the **User name** and **Password** fields. |
| | Field Background | Background color of the fields. |
| | Field Border | Color of the of the border around the fields. |
| | Field Text Size | Size of the text in the **User name** and **Password** fields. |
| | Label | Color of the words *User name* and *Password*. |
| | Button Background | Color of the **Login** button. |
| | Button Text | Color of the word *Login*. |
| Copyright | Additional Text | Additional text for your implementation, such as your copyright text. Click this link to enter text above the copyright.
See [Adding Customized Text Above the Copyright on the Login Page](docId\:RWqN1sN8BhV9Dttrl3y3p).
**NOTE**: You cannot localize the copyright. |
| | Text Color | Color of the copyright text. |
| | Links | Color of the hyperlinks in the copyright text. |
| Bars | Height | For legacy layouts only. Height of the top and bottom bars in pixels.
To hide the background, set the width to zero. For the background to appear, set the bar height to be greater than the border width. |
| | Background Color | Color of the space above the top bar and below the bottom bar. The background has a gradient with white. |
| | Border Width | Width of the top and bottom bars in pixels. To hide the bars, set the width to zero. |
| | Border Color | Color of the top and bottom bars. |
| Left Bar | Background | For cloud layouts only. Color of the left bar. |
| | Width | Width of the left bar in 15-pixel increments. To hide the bar, set the width to zero. |
| | Image | An image for the left bar. Click **Upload file** to add an image.
See [Adding an Image to the Left Bar on the Login Page](docId\:RWqN1sN8BhV9Dttrl3y3p). |
| Top Bar
| Background | For enterprise layouts only. Color of the top bar. |
| | Height | Height of the top bar in pixels. To hide the bar, set the height to zero. |
| | Image | An image for the top bar. Click **Upload file** to add an image.
See [Adding an Image to the Top Bar of the Login Page](docId\:RWqN1sN8BhV9Dttrl3y3p). |
## Adding a Background Image to the Login Page
When you fill a background using an imported image, Neurons for ITSM anchors the image at the upper left corner and either repeats the image to fill the background or crops the image to fit the background.
When using a small image, such as a logo, you expect the background to be repeated, so the login page should look OK regardless of its background size.
When using a large image, such as a landscape, you want the image to fill the background of the login page without repeats or excessive cropping.
In the table below, we show the background image size of the Neurons for ITSM login pages in a maximized browser window on two common monitor resolutions, without any cropping or repeating of the image.
| Layout | 1680 x 1050 Monitor | 1920 x 1080 Monitor |
| ------ | ------------------- | ------------------- |
| Legacy | 1680 x 871 pixels | 1920 x 901 pixels |
| Others | 1680 x 991 pixels | 1920 x 1021 pixels |
To add a new background image to the login page, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Background**, click **Upload file**.
4. Click the **select file** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/5ySpLfLxLjY3F2-o3RBkU_logofoldericon.png" alt caption size="10" width="16" height="16"}.
5. Navigate to the file of the image to add and double-click the file name. The application displays the image in place of the default background. This example shows the legacy layout.
:::Paragraph{indent="1"}
The application marks the unsaved value with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
6. Click **Save**.
## Restoring the Default Background to the Login Page
To restore the default background on the login page, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Background**, click the current image.
*Restoring the Default Background Image to the Login Page*
::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/JW6gwJtymuqCUw1Ecq0ai_clicklogindesktop.png" position="flex-start" size="40" initialPath="../../Resources/Images/help-images/click_login_desktop.png" githubPath="Content/Resources/Images/help-images/click_login_desktop.png" showCaption="false" indent="1"}
4. Click the **delete uploaded file** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/fbd_i8JpyZc8KfbTX-tDG_logodeleteicon.png" alt caption size="10" width="16" height="16"}. The application deletes the current image and displays the default background image in its place.
:::Paragraph{indent="1"}
The application marks the unsaved value with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
5. Click **Save**.
## Editing the Title Text on the Login Page
To edit the title text on the login page, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Title**, click in the **Title Text** field.
4. Edit the information.
:::hint{type="info"}
The application provides a title in English. You cannot localize this text.
:::
:::Paragraph{indent="1"}
The application marks the unsaved value with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
5. To keep your text changes, click **OK**.
6. Click **Save**.
## Adding a New Logo to the Login Page
The maximum logo dimensions are 650 pixels high by 650 pixels wide. You can scale your logo to fit the login page.
To add a new logo in the login page, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Logo**, verify that Show is set to *true*.
4. Click **Upload file**.
5. Click the **select file** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/5ySpLfLxLjY3F2-o3RBkU_logofoldericon.png" alt caption size="10" width="16" height="16"}.
6. Navigate to the file of the logo to add and double-click the file name. The application displays the new logo in place of the default logo on the login page.
7. Adjust the scale of the logo.
:::hint{type="info"}
If a logo is too large, it displaces the other objects on the login page, forcing users to scroll to enter their user names and passwords.
Scaling a logo greater than 100% reduces its image quality.
:::
:::Paragraph{indent="1"}
The application saves the value with a red triangle at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
8. Click **Save**.
## Restoring the Default Logo on the Login Page
To restore the default logo in the **Self Service** tab:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Logo**, click the current logo.
4. Click the **delete uploaded file** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/fbd_i8JpyZc8KfbTX-tDG_logodeleteicon.png" alt caption size="10" width="16" height="16"}. The application deletes the current logo and returns the default Neurons for ITSM logo in its place.
:::Paragraph{indent="1"}
The application marks the value is marked with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
5. Click **Save**.
## Adding Customized Text Above the Copyright on the Login Page
You cannot edit the Neurons for ITSM copyright statements. But you can add text that appears above them on the login page. To add text above the Neurons for ITSM copyright, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Copyright**, click in the **Additional Text **field to open the **Copyright** dialog box.
4. Edit or add copyright text.
:::Paragraph{indent="1"}
To access the other text tools, click the **menu** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/2RQSL4UV_B8kalNVdZ7Lm_menuicon223x18.png" alt caption size="10" width="23" height="18"}. You can also widen the **Translation** window until all text tools are visible.
:::
5. Enter your text:
- To apply a text style, highlight the text to be styled and then click the appropriate text tool.
- To enter text in a different language, click the **Language** menu and choose a language.
- To add a hyperlink, highlight a word or phrase in the text and click the **hyperlink** tool :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/toDgVuY9ETEVhpPLW-6CD_linkicon.png" alt caption size="10" width="17" height="16"}. Enter the link in the pop-up window and click **OK**.
6. Click **OK**.
7. Optional: To test a hyperlink, in the right pane, right-click the link and choose **Open in new tab**. If the address is valid, the destination site opens in the new browser tab.
:::Paragraph{indent="1"}
The application marks the value with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
8. Click **Save**.
## Adding an Image to the Left Bar on the Login Page
When you fill the left bar using an imported image, Neurons for ITSM anchors the image at the upper left corner and crops the image to fit the bar or enlarges the image to fill the bar. You can set the width of the left bar but not its height:
- On a 1680 x 1050 monitor, the left bar can be up to 991 pixels high.
- On a 1920 x 1080 monitor, the left bar can be up to 1021 pixels high.
First determine the dimensions of the left bar as it appears on your production servers. Then choose an image, without excessive enlargement or cropping, to fill the left bar.
To add a new background image to the login page, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Left Bar**, click **Upload file**.
4. Click the **select file** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/5ySpLfLxLjY3F2-o3RBkU_logofoldericon.png" alt caption size="10" width="16" height="16"}.
5. Navigate to the file of the logo to add and double-click the file name. The application fills the left bar on the login page with the uploaded image.
:::Paragraph{indent="1"}
The application marks the value with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
6. Click **Save**.
### Restoring the Default Left Bar on the Login Page
To restore the default image for the left bar on the login page, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Left Bar**, click the current image.
4. Click the **delete uploaded file** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/fbd_i8JpyZc8KfbTX-tDG_logodeleteicon.png" alt caption size="10" width="16" height="16"}. The application deletes the current image and displays the default background image in its place.
:::Paragraph{indent="1"}
The application marks the value with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
5. Click **Save**.
## Adding an Image to the Top Bar of the Login Page
When you fill the top bar using an imported image, Neurons for ITSM anchors the image at the upper left corner and either repeats the image to fill the bar or crops the image to fit the bar. You can set the height of the top bar but not its width.
- On a 1680 x 1050 monitor, the top bar can be up to 1680 pixels wide.
- On a 1920 x 1080 monitor, the top bar can be up to 1920 pixels wide.
If you plan to fill the top bar with a single image, such as a landscape, first determine the dimensions of the top bar as it appears on your production servers. Then, choose an image without repeats or excessive cropping to fit the top bar.
To add a new background image to the login page, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Top Bar**, click **Upload file**.
4. Click the **select file** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/5ySpLfLxLjY3F2-o3RBkU_logofoldericon.png" alt caption size="10" width="16" height="16"}.
5. Navigate to the file of the logo to add and double-click the file name. The application displays the uploaded image in the top bar on the login page.
:::Paragraph{indent="1"}
Note that the application superimposes the title (in this instance, HEAT Service Management) over the image. In this example, the text color was darkened for better contrast against the background image. See [Editing the Title Text on the Login Page](docId\:RWqN1sN8BhV9Dttrl3y3p).
:::
:::Paragraph{indent="1"}
The application marks the value with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
6. Click **Save**.
## Restoring the Default Top Bar on the Login Page
To restore the default background on the login page, do the following:
1. Access the Style Editor. See [Accessing the Style Editor](docId:4zC6JkBITfZ-f6mH1mHnp).
2. Click the **Login Page** tab.
3. Under **Top Bar**, click the current image.
4. Click the **delete uploaded file** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/fbd_i8JpyZc8KfbTX-tDG_logodeleteicon.png" alt caption size="10" width="16" height="16"}. The application deletes the current image and displays the default background in its place.
:::Paragraph{indent="1"}
The application marks the unsaved value with a red triangle :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oajM1VgKDfUhXmjL83GJs_styleeditorredtriangle.png" alt caption size="10" width="7" height="14"} at the left and the **revert** icon :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ksqAE7kpxUJnvY_s2fSR5_stylereverticon.png" alt caption size="10" width="17" height="16"} at the right.
:::
5. Click **Save**.