Login screens

Learn how to customize the login screen

Theme Extension enables you to customize the login screen which enhances the experience and provides consistency with the company’s design language. You can set the login screen to inherit the colors and layouts from the Help Center or you can configure it differently.

Login screen’s customizable elements include:

• Background - Upload the image or fill it with color.
• Announcement - Add an announcement to display a message to your customers. For example, a note about support hours, or a warning about an incident with your tool.
• Logo - Upload the image (recommended size: height 40 pixels, max. width 160 pixels). If you don’t add a logo, your help center name displays here instead. This help center name can be also modified.
• Footer - Add a piece of short information about your company, links to external resources, or anything else you need.

Layouts inherited from Help Center

When the login screen inherits all the settings from the Help Center, it mirrors certain colors to create a consistent layout. Below you can see how the colors are arranged in different elements.

native Help Center

List theme

Cards theme

Editing the elements

Info

By default, all the elements are inherited from Help Center. In order to modify them, turn off the toggle at top of each configuration panel.

Steps

1. Go to Jira Administration > Manage apps.
2. Select Log in screens under Theme Extension.
   

   

3. Select the Custom option which allows you to open the editor.
   
   Note

   The native login screen provided by Atlassian is active as default.
4. Click Next.
   

   

5. Click Elements in the top navigation and edit your selected elements.

   

Background

In order to change the background, click anywhere on the screen and select background type: Divided or Solid.

By selecting Divided background, you can configure the top and bottom graphics. Use drag and drop to upload images or choose colors using the palette. You can also decide on the position of your images.

By selecting Solid background, use drag and drop to upload your background image or choose colors using the palette. You can also select how the image fills the background.

Announcement banner

Customize your banner by using various styles and colors. Create a message and format your texts and links. You can also upload an image.

You can always preview the configuration of your banner to check the introduced formatting before saving your changes.

Logo

Customize the logo which appears in the top-left corner of the screen. Type the text and change its color. You can also upload an image.

Footer

Design the configuration of your footer by selecting the style of its background, texts and links. You can insert the footer text and customize its layout.

You can always preview the configuration of your footer to check the introduced formatting before saving your changes.

Once you’ve finished editing, apply the settings to your login screen by clicking Save & Publish.

Result

Your login screen is customized. Open the Help Center in incognito mode to check if the screen is loading properly.