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 in 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.
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.
Selector type | Name | Element/section applied |
|---|---|---|
id | activity-item | Id for activities table section. |
class | roadmap-activity-item | Individual activity row |
class | roadmap-portal-cards | Listing page cards lists section |
class | roadmap-card | Individual cards on listing page |
class | roadmap-cards-filter | Listing page filter container |
class | roadmap-comments | Issue comments tab on details page |
class | roadmap-similar-items | Issue details page similar items section tab. |
class | roadmap-description | Description field section on issue details page |
id | vote-count | Vote count box on issue details |
class | vote-total-count | Vote count on details page, count number css |
class | vote-count-label | Vote label css |
class | roadmap-back-listing | Back to listing button on issue details |
class | roadmap-login-vote | Login button on details page. |
class | btn-add-vote | Add vote button |
class | btn-remove-vote | Remove vote button |
class | btn-add-behalf-vote | Add vote on behalf of link button |
class | btn-remove-behalf-vote | Remove vote on behalf of link button |
class | btn-subscribe | Subscribe link button on details page |
class | roadmap-login-btn | Login button header section |
class | roadmap-issue-details | Issue details page section excluding header |
class | roadmap-filter-bg | Filter section |
class | roadmap-card-vote | Vote box on listview listing |
class | listing-vote-count | Vote count on listing |
class | listing-comment-count | Comment count on listing |
class | roadmap-header-navbar | Portal’s header bar |
class | roadmap-header-search | Search bar |
class | roadmap-user | |
class | roadmap-search-input | Search bar |
class | roadmap-search-input-icon | Search bar |
class | roadmap-header-tabs | Header tabs |
class | roadmap-header-link-text | Header link text |
class | roadmap-sort-dropdown | Sorting dropdown |
class | roadmap-header-sort | Sorting dropdown |
class | roadmap-login-btn | Login buttom |
class | roadmap-board-title | Title of the board |
class | roadmap-board-description | Description of the board |
Refer below wireframes that display some samples of the classes to identify HTML defined by default classes. User can also apply CSS to other elements on portal by inspecting the element class.
Without login view
After login view
Example:
Custom footer:
