List editor

Learn more about the list theme customization

When adding a theme to one of your sites, you can manually change all the details of the existing templates or create new templates from scratch. With List theme, customizable elements include:

• Color compositions
• Announcement banner
• Footer
• Home link options
• Welcome message and Title

Note

You can insert variables in the text to show your customers different and personalized data. All the variables are available by hovering over the bulb icon which is visible at any compatible element.

Color compositions

You can choose from the unlimited combinations of colors to create your own unique pallet which is consistent with your company’s design language.

Steps

1. When adding a theme, select one of the available templates or create a new one.

2. Before clicking Apply, you can:

• Change the name of the theme. Your input can be up to 24 characters long.
• Check the box if the request type icons should be displayed along with the request types’ names.
• Choose the primary color using the pallet or hex code.
• Choose the secondary color.
• Choose the complimentary color. You can specify which elements should be highlighted with the color by checking the adequate checkboxes.

  

Tip

Based on the choice of the primary color. You can automatically match the remaining colors by turning on the toggle.

Result

The colors are added to your theme.

Once you’ve added the color palette to your theme, you can further customize other elements of the site.

Announcement banner

You can change the text and insert variable parameters directly into the announcement banner which is presented to the customers who visit your site.

Steps

1. In the theme editor, click Elements and select Announcement banner from the drop-down list.

   

2. Customize the appearance of the banner:

• Choose the text color.
• Choose the background color.
• Specify if the drop shadow and card border should be applied.
• Insert the announcement text. You can also upload an image using drag and drop.

3. Click Save.

   

Result

Your announcement banner is added.

Editing permissions

The option to edit the announcement banner can be made available to all the agents in Jira Service Management. They will be able to access only the announcement banner configuration panel, without seeing the rest of theme editor. To allow the agents for editing the banner, the administrator needs to grant them permissions related either to the Customer Portal or Help Center.

To grant permission for editing banner on the Customer Portal, go to your Project’s Portal settings and select the proper option below the Announcements section:

To grant permission for editing banner on the Help Center, go to Applications > Jira Service Management Configuration and select the proper option below the Help Center section:

Footer

You can change the text and insert variable parameters into the footer located at the bottom of the site.

Steps

1. In the theme editor, click Elements and select Footer from the drop-down list.

   

2. Customize your footer:

• Insert text into the left and right section of the footer. You can format the text, divide it into columns and apply variables.

3. Click Apply.

   

Tip

You can choose to hide the footer using the toggle at the top of the panel. The toggle is turned on by default.

Result

Your footer is added.

Home link options

You can change the text, style and destination of the Home link located in the top-left corner of the site.

Steps

1. In order to edit the Home link, click on the pen icon in the theme editor.

   

2. Customize the Home link:

• Create the link text which should contain up to 20 characters. Alternatively, you can upload an image using drag and drop.
• Decide whether the link should redirect users to the Help Center, Customer Portal home page or a custom destination.

3. Click Save.

   

Note

• When configuring the Home link on the Customer Portal, you can also make the link redirect to the Customer Portal home page.
• You can insert an absolute or relative URL into the link. An absolute URL contains the entire address from the protocol (HTTPS) to the domain name like https://deviniti.com/ whereas relative URL contains only the location of the resource without the full web address like /theme-extension/latest/list-theme/.

Result

The Home link is customized.

Welcome message and Title

In the editor you can change the title of the Help Center page and create the bolded welcome message which is presented to your customers. You can also add variables to your Welcome message.

Steps

1. Click on the existing welcome message.
2. Enter you custom message and click the tick icon. You can simply edit your messages by clicking and typing the desired text. To finish editing, click the tick icon.

   

Result

Your welcome message is customized.

Searcher

In the editor you can change the placeholder text which is visible on the searcher. You can also hide it from any customer visiting your site. Searcher also supports variables which can be inserted into the placeholder text.

Steps

1. Click on the searcher and start typing.
2. Save changes by clicking on the tick icon.

   

3. Optionally, you can hide the searcher by clicking on the eye icon which is visible above the search bar.

   

Result

Your searcher is customized.

Saving as a new style

Once you fully customized your list theme, you can save it as a new style that can later be used throughout the app.

Steps

1. To save the theme, click Save as in the top right corner.

   

2. Enter the name of your theme style.
3. Click Save.

   

Result

Your theme is saved as a style. You can now make visible to the customers by clicking Publish.