Use custom CSS on a release page

You can apply your custom CSS for release page components to modify the look and feel of the release pages as per your requirements. You can add custom CSS, custom header HTML and custom footer HTML.

How to add custom CSS for a release page

Go to ARNR in-project screen
Navigate to Release pages & widgets tab
Click on the relevant release page where you want to add custom CSS
Click on Customize HTML & CSS button

In the customize HTML & CSS menu, you can add custom CSS, custom header, and custom footer HTML
When you add the custom CSS & HTML code in the left-hand pane, release page preview shall get updated in the right hand pane.
Click on Publish changes button to make your changes public.
If you wish to restore to last published custom CSS state, click on Discard unpublished changes button.

Notable Existing CSS Classes for each template

Template 1

Release Page Haeder

Element	ID	Class	Description/Note
Header	`release-detail`	`arn-widget-header`/`page-detail`	The header of the release page.
Logo	`arnReleasePageLogo`	-	The release page logo
Title	-	`display-4`	Release page title/name
Description	-	`display-6`	Release page description
Subscribe button	`subscribe-btn`	`subscribe-btn`	Subscribe button
RSS Feed button	`rssfeed-btn`	`rssfeed-btn`	RSS feed button
Whole search bar	-	`search-bar`	The whole search bar, including the Search input, search clear icon, and search icon.
Search Input	`release-page-search`	-	Search input
Search Clear Input	`arn-search-clear-btn`	-	Search input clear button(cross icon)
Search Icon	`arn-search-btn`	-	Search icon ()

Release page data list

Element	ID	Class	Description/Note
Release the page data list	`releasePageDataList`	-	This is a list of all the releases and their data.
Releases background	`arn-widget-content`	`arn-releases-page`	Release the page card's background

Card

Element	ID	Class	Description/Note
Card	-	`card`	Each release card container
Card body	-	`card-body`	The card body contains the data of issues
Like button	-	`btn-outline-success`	Like button
Dislike button	-	`btn-outline-danger`	Dislike button

Show more button

Elements	ID	Class	Description/Note
Show more	`btnReleasePageShowMore`	-	A button to show more, which expands the issue list

Subscribe and RSS feed pop-ups(This is common in all templates)

Elements	ID	Class	Description/Note
Pop-up	-	`modal-content`	Pop-up for both Subscribe and RSS feed.
Close	`subscribeClose`	-	Close icon
Subscribe Popup body	`subscribePopupBody`	`modal-body`	Subscribe popup body
Subscribe now	-	`subscribe-now`	Subscribe now text
Subscribe detail	-	`subscribe-detail`	Subscribe description
Subscribe email input	`subscriberEmail`	-	The email input for the subscribe pop-up
Subscribe button	`subscribeBtn`	-	The subscribe button on the pop-up
Subscribe success message	-	`alert-success`	The subscribe success message

Template 2

Release Page Header

Element	Class	Description/Note
Header	`release-page-header`	Release page header
Logo	`release-logo`	Release page logo
Release Page Title	`release-detail-title`	Release page title
Release Page Details	`release-detail`	Release page detail/header
Release Page Description	`release-detail-desc`	Release page description

Release change logs

Element	ID	Class
Release change log	`release-change-log`	`release-change-log`
Release page data list	`releasePageDataList`	-
Release name	-	`release-name`
Release row	-	`release-row`
Release date oval	-	`oval`
Release date	-	`release-date`
Release month year	-	`release-month-year`
Change log card	`changelogCard`	-
Card	-	`card`
Card body	-	`card-body`
Issue detail row	-	`row`
Rectangle of Field 2	-	`rectangle`
Field 2	-	`field-2`
Show more button text	-	`show-more-btn-txt`
Show more button	`btnReleasePageShowMore`	`show-more-btn`
Horizontal Line	-	`hr-line`
ARNR branding	-	`powerd-by`

Template 4

Issue Types(Fields)

Element

ID

Class

Description/Note

Field 2

-

arnr-{field-2}

badge-pill(For Common)

It can be used for any field except Jira’s single-line or multi-line text fields.

You can use this like:
arnr-bug, arnr-epic, etc.

Field 1

-

field-1

Field 3

-

field-3

Release page header

Element	ID	Class	Description/Note
Header	-	`release-page-header`	Release page header
Logo	`releaseLogoImg`	`release-logo`	Release page logo
Release Page Title	-	`release-detail-title`	Release page title
Release Page Details	-	`release-detail`	Release page detail/header
Release Page Description	-	`release-detail-desc`	Release page description
Search input	`release-page-search`	-
Search bar	-	`search-bar`
Clear search button	`arn-search-clear-btn`	-
Search button	`arn-search-btn`	-
Search icon	-	`fa-search`

Release page change logs

Element	ID	Class	Description/Note
Release change log	`release-change-log`	`release-change-log`