Cards editor

Learn more about the cards 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 Cards theme, customizable elements include:

• Background style
• Navigation bar
• Searcher and Welcome message
• Default card
• Individual card
• Custom card
• Announcement banner
• Footer
• Home link options

Note

In order to publish a custom theme, you need to save it first. Click Save as in the top toolbar.

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.

Background style

You can separately customize the top and bottom background on the site. 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. Click on either top or the bottom background.

   

3. Upload an image or choose the color using the palette, or the hex code.

   

   Note

   You can upload images in .jpg, .png and .gif formats.

4. Click Apply.

   

5. Repeat the instructions for the other background.

Result

The background styles are added to your theme.

Tip

You can change the height of the top background. To do so, hover over the border of the background and click to drag where you want.

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

Navigation bar

You can change the layout and colors of the navigation bar which is used to switch between different categories or request types groups. If you want to learn more about categories, see Categorization.

Steps

1. In the theme editor, hover over the navigation bar and click the pen icon on the right.

   

2. Select the bar type. There are two available options: tabs and drop-down list.

3. Specify the colors of the text and the buttons in different states. If you don’t want to see the particular states, uncheck the boxes next to them.

4. Click Apply.

   

   Note

   If you select tabs display type and there’s too many categories to show, the excessive ones will collapse into a More drop-down list.

Result

The Navigation bar is customized.

Searcher and Welcome message

You can change the text and style of the Searcher.

Steps

1. To customize the Searcher, hover over it and click on the pen icon.

   

2. Change the placeholder text. You can also apply variables.
3. Select the composition of colors using the palette or hex code.
4. Set the border thickness.
5. Click Apply.

   

Result

Your search bar is configured.

You can also customize the Welcome message.

Steps

1. To customize the Welcome message, hover over it and click on the pen icon.

   

2. Change the text. You can also apply variables.

3. Change the color of the text using the palette or hex code.

4. Select the font style.

5. Set the text alignment.

6. Click Apply.

   

Result

Your welcome message is customized.

Default card

You can set the default card that will be consistent in style with every newly created service project or request type.

Steps

1. To start the default card configuration, click on the brush icon in the theme editor.

   

2. Select Card type.

   

3. Click the Card style tab.
4. Check the box if the request type icon should be displayed on the card.
5. Upload an image to be visible on the card.
6. Set the position of the uploaded image.

   

7. Set the card style. Select color and thickness of the border.
8. Check the box if you want the card to have drop shadow.
9. Set the color and style of the card title and description. You can also change the background color and alignment of the text.
10. Click Apply.

    

Result

The default card is set and applied to all existing and new request types and service projects. In the future, each card that is not individually customized will inherit the default card appearance.

Individual card

You can choose one of the available cards and individually change its appearance to override the default configuration.

Steps

1. In the theme editor, click on one of the existing cards.

   

2. Turn on the Graphics toggle to enable customization.
3. Check the box if the request type icon should be displayed on the card.
4. Upload or change the existing image.
5. Change the background color using the palette or hex code.
6. Set the color and thickness of the border.
7. Check the box if you want the card to have drop shadow.

   

8. Turn on the Text toggle to enable customization.
9. Set the color and style of the card title and description. You can also change the background color and alignment of the text.
10. Click Apply.

    

Result

Each card has its individual style applied.

Custom card

In case of a special event or occasion, you can set a unique card, which is different in style from a default card.

Steps

1. To set a custom card, click Add a custom card in the theme editor.

   

2. Insert a text or an HTML code to create a fully personalized card.
3. Click Add.

   

Result

Your custom card is added.

Tip

You can change the number of cards displayed in a row using the slider visible in the editor. You can choose between 3, 4, or 5 differently sized cards in a row.

Announcement banner

You can change the text and insert variables directly into the announcement banner that your customers see when they visit your site.

Steps

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

   

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

   Image dimensions must be 80x80 px.

6. Click Save.

   

Result

Your announcement banner is applied.

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 on the bottom of the site.

Steps

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

   

2. Define the colors of the footer using the palette, or a hex code
3. Insert text into the left and right section of the footer. You can format the text, divide it into columns and apply variables.
4. 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 applied.

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. Choose the text of the link. Alternatively, you can upload an image using drag and drop.
3. Decide whether the link should redirect users to the Help Center, Customer Portal home page or a custom destination.
4. Click Apply.

   

Note

When configuring the Home link on the Customer Portal, you can also make the link redirect to the Customer Portal home page or your custom destination.

Result

The Home link is changed.

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

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