Apps documentation
Theme Extension for Jira Service Management
Cloud Server/Data Center
Theme Extension for Jira Service Management

Cloud

Server/Data Center

Documentation
FAQ
Release notes
Articles & Videos
Last updated May 26, 2024

Visual

Understand how to determine the look of your Page.

The Visual category of the Page settings editor allows you to configure multiple aspects of your Page’s look, like changing the active template or configuring the colors of different sections, fonts and headers.

Below you can see an example of the already configured Page with highlighted components. By comparing the components to their names you can easier find your way around the editor.

Theme Extension for Jira Service Management - Page layout
Theme Extension for Jira Service Management - Page layout
  1. Main section
  2. Navigation section
  3. Primary font
  4. Secondary font
  5. Hyperlink
  6. Page name
  7. Selected element
  8. Header
  9. Top menu elements

Configuration

To learn about configuring your Page so that its visual layer is customized, watch the Quick Guide and read the steps below.

Quick Guide

Steps

Note

By accessing the Visual category of the editor you can see the color compositions of the active Template and the layout of the Theme which has been selected during the creating Page process. You can change them or move to configuring the Main section, Navigation section and Other elements colors.

  1. Set the colors of the Main section using the color picker, HEX code, or RGB codes.
Tip

Use the Minus icon to turn off the configuration of individual colors. That way they’ll automatically match the background color to create the best possible composition. You can always configure them manually by clicking the Plus icon.

  1. Turn on the toggle next to Show icons next to the items if you want the request type icons to be visible on your Page.

  2. Set the colors of the Navigation section using the color picker, HEX code, or RGB codes.

Info

By default cards inherit the color or design of Background set in Navigation section colors.

  1. Optionally, you can configure the Other elements section also by using the color picker, HEX code, or RGB codes.

  2. Move to Cards settings and select Card grid. You can choose between: Tiles, Photos, Horizontal and Metro. To set Card background, use the color picker, HEX code, or RGB codes. You can also add an image.

    Tip

    To choose the most suitable card grid for your Page, you can check different grids that are available for your cards by navigating to the Cards theme section.

  3. By using the Photos, Horizontal and Metro grid you can configure Card background and also add Card image. Simply drop a selected file and it will be attached to your cards.

Note

It’s possible to skip attaching any file to your cards. As a result, the cards visible on your Page will present only plain text with no set layout.

Result

The visual layer of you Page is configured.

Next up

To finish the Page configuration, proceed to publishing. You can also continue editing by moving to the General category of the Page settings.