Customize CSS & HTML on a roadmap portal
- Sujeet Pathak
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 header and footer as well as customized HTML code to 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 edit board settings 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 “Save” button on top right hand corner.
If you click on ‘Close’ 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 which are not yet published, click on ‘Discard unpublished changes’ button.
This will discard only that part of custom CSS & HTML code which 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 preview of certain pages as explained below.
Public roadmap portal
You can see preview of default not logged-in page of 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.
However, custom CSS & HTML changes if added for those pages which are not visible in the preview, shall still get applied at respective locations when you publish the changes.
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: