Customize certain CSS elements of the roadmap portal so that it can match them with your brand identity. As an admin, you can add customized CSS to the header and footer as well as customized HTML code to the footer of the roadmap portal so that you can include certain elements to that section.

How to add custom CSS and HTML code?

• Go to Roadmap portal app within your Jira service management project.

• Click on Actions (…) >> Advanced settings

• Click on Customize Html & CSS for the required board.

• Navigate to Customize HTML & CSS tab on the board settings page.

• Add code for custom CSS properties & custom footer HTML in the left-side input boxes.

• Whatever the code added shall be autosaved in the draft.

• The preview on the right hand shall get updated once custom code is autosaved.
  

  

Publish changes

• To publish custom CSS & HTML changes to your roadmap portal, click on Publish changes button on top right hand corner.

• If you do not click on Publish changes button, then the changes shall remain autosaved in draft but will not reflect on the roadmap portal.

Discard unpublished changes

• If you want to discard custom CSS & HTML changes that are not yet published, click on Discard unpublished changes button.

• This will discard only that part of custom CSS & HTML code that is not published yet and other code which is already published shall remain.

Preview of roadmap portal

• Preview of your roadmap portal shall get updated when custom CSS & HTML code is autosaved to the draft.

• Preview is provided only as a visual aid and changes shall not reflect on the roadmap portal unless you save the changes.

• There are limitations in showing previews of certain pages as explained below.

  • Public roadmap portal

    • You can see preview of the default not logged-in page of the roadmap portal and also navigate to issue details page by clicking on any issue card.

    • However, if user clicks on login button, then preview of login page & logged-in page of roadmap portal shall not be visible in the preview.

  • Private or restricted roadmap portal

    • By default login page of the roadmap portal shall be shown in the preview.

    • However, if user clicks on login button, then preview of login page & logged in page of roadmap portal shall not be visible in the preview.

  • Off roadmap portal

    • By default off roadmap portal banner shall be shown in the preview.

Notable Existing CSS Classes

There are several CSS classes defined by default that you can use.

roadmap-header-navbar
roadmap-header-search
roadmap-user
roadmap-search-input
roadmap-search-input-icon
roadmap-header-tabs
roadmap-header-link-text
roadmap-sort-dropdown
roadmap-header-sort
roadmap-login-btn 
roadmap-board-title
roadmap-board-description

Refer below wireframes to identify HTML defined by default classes.

Without login view

After login view

Example:

Custom footer: