Style Alarm Journal Toolbar

Ignition
,
1

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.

1 Like
2

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
image1685×461 67 KB

E.g.

image
image823×169 12.4 KB

.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

2 Likes