# Style Alarm Journal Toolbar

**URL:** <https://forum.inductiveautomation.com/t/style-alarm-journal-toolbar/108830>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [July 23, 2025, 1:59pm UTC](https://forum.inductiveautomation.com/t/style-alarm-journal-toolbar/108830 "2025-07-23T13:59:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![annikaciul](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@annikaciul](https://forum.inductiveautomation.com/u/annikaciul)\
**Post date:** [July 23, 2025, 1:59pm UTC](https://forum.inductiveautomation.com/t/style-alarm-journal-toolbar/108830/1 "2025-07-23T13:59:46Z")

</div>

How do you change the style (background, font size/color, etc) of the Alarm Journal Toolbar? There aren't options for styling in the props.toolbar object like there is for rows, headers, footers, etc. I attempted adding the style object to the toolbar props, and I don't receive an error for it, but adding values like backgroundColor or borderStyle don't implement any sort of change. I've tried both typing these values in manually and copy pasting them over from other styled props to ensure I'm getting the correct connotation.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 23, 2025, 2:04pm UTC](https://forum.inductiveautomation.com/t/style-alarm-journal-toolbar/108830/2 "2025-07-23T14:04:17Z")

</div>

You'll need to do this with CSS via the adv. stylesheet / CSS theme files.

If you open the dev tools in the Designer / browser, you should be able to find the selectors you'll need:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/647cb51fca7a46dc871e6bd11df21b0063281692.png)

E.g.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/ae71f0727a42ed005bd2a91ba726026367ca8fdf.png)

```python
.ia_realtimeOrHistoricalRangeSelector__message {
    color: var(--neutral-10);
    font-size: 0.675rem;
    font-weight: 700;
}
.ia_realtimeOrHistoricalRangeSelector__calendarIcon {
    color: var(--neutral-10);
}
.ia_alarmTableComponent__toolbar {
    background-color: var(--indicator);
    border-bottom: var(--containerBorder);
}
.ia_alarmTableComponent __toolbar__ controlIcon,
.ia_alarmTableComponent __toolbar__ tab__icon--active {
    color: var(--neutral-10);
}

```

I do suggest you stick with rem units for most (if not _all_) sizes