Apps documentation
Theme Extension for Jira Service Management
Theme Extension for Jira Service Management
Guides
FAQ
Release notes
Last updated Dec 1, 2020

Login screen

This section provides information about login screen customization with Theme Extension for Jira Service Management app.

Using Theme Extension you can customize the login screen which reflects your brand consistent with the rest of the service platform.

Here are the options you have for the login screen:

  • 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 warning that you have an incident in 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.

By default, all elements are inherited from Help Center. You can modify them during the configuration process described below.

Inherited from Help Center

Below you can see how this feature works and which colors are used depending on your Help Center configuration.

Use case #1: native Help Center

Login screen element Help Center configuration
Top background Banner background or uploaded graphics
Bottom background Gray
Announcement banner Color which bases on the banner background (It’s implemented by Atlassian, we only copy it to our login screen.)
Logo Logo
Footer Powered by Jira Service Desk or Powered by Jira Service Management (from JSM 4.14)
Inherited login screen: Native Help Center in Theme Extension for Jira Service Management
Inherited login screen: Native Help Center in Theme Extension for Jira Service Management

Use case #2: List theme

Login screen element Help Center configuration
Top background Color #2 from List configuration
Bottom background Color #1 from List configuration
Announcement banner Color #1 from List configuration or color configured in the Announcement banner
Logo Text or uploaded graphics configured in the Home Link
Footer Color #1 from List configuration or color configured in the Footer
Inherited login screen: List Help Center in Theme Extension for Jira Service Management
Inherited login screen: List Help Center in Theme Extension for Jira Service Management

Use case #3: Cards theme

Login screen element Help Center configuration
Top background Uploaded graphics or color configured in the Top background
Bottom background Uploaded graphics or color configured in the Bottom background
Announcement banner Color configured in the Announcement banner
Logo Text or uploaded graphics configured in the Logo
Footer Color configured in the Footer
Inherited login screen: Cards Help Center in Theme Extension for Jira Service Management
Inherited login screen: Cards Help Center in Theme Extension for Jira Service Management

Configuration

Warning
Before you start, log in as a user with the Jira Administrators global permission.

Steps

To customize login screen:

  1. Go to Jira Administration > Manage apps.

  2. Select Log in screens under Theme Extension.

    Login screen: global configuration in Theme Extension for Jira Service Management
    Login screen: global configuration in Theme Extension for Jira Service Management

  3. Select Custom which allows you to open edit mode.

    Note
    After installation, the option Default is set to active. It means that you use native login screen provided by Atlassian.

  4. Click Next.

    Login screen: global configuration in Theme Extension for Jira Service Management
    Login screen: global configuration in Theme Extension for Jira Service Management

  5. Click Elements in the top navigation and edit the following elements as you wish.

    Login screen: Edit mode in Theme Extension for Jira Service Management
    Login screen: Edit mode in Theme Extension for Jira Service Management

    • Background

    Select between Divided (as native) and Solid background. Upload graphics or use colors to fill backgrounds.

    Login screen: Background settings in Theme Extension for Jira Service Management
    Login screen: Background settings in Theme Extension for Jira Service Management

    Login screen: Background settings in Theme Extension for Jira Service Management
    Login screen: Background settings in Theme Extension for Jira Service Management

    • Announcement banner

    Type a message and format it using basic options: Text styles, Bold, Italic, Bullet list, Numbered list, Link. You can also select colors for text and background, and upload image (optionally). The recommended size is 80 x 80 pixels.

    Login screen: Announcement banner settings in Theme Extension for Jira Service Management
    Login screen: Announcement banner settings in Theme Extension for Jira Service Management

    • Logo

    Type text which replaces native Help Center or upload a logo. Select color to make the text visible.

    Login screen: Logo settings in Theme Extension for Jira Service Management
    Login screen: Logo settings in Theme Extension for Jira Service Management

    • Footer

    Select how many columns do you need: 1, 2, 3. Type a message, bold if you need, add a link. You can also select colors for text, background, and link.

    Login screen: Footer settings in Theme Extension for Jira Service Management
    Login screen: Footer settings in Theme Extension for Jira Service Management

  6. To apply the displayed configuration to your login screen, click Save and publish.

    Login screen: Edit mode in Theme Extension for Jira Service Management
    Login screen: Edit mode in Theme Extension for Jira Service Management

Result

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

Login screen customized by Theme Extension for Jira Service Management
Login screen customized by Theme Extension for Jira Service Management

Need help?

If you can’t find the answer you need in our documentation, raise a support request*.
*Include as much information as possible to help our support team resolve your issue faster.