[GH-ISSUE #1343] Per-monitor bar styling #3215

New issue

Closed

opened 2026-05-22 23:54:52 +01:00 by JakeStanger · 2 comments

JakeStanger commented

2026-05-22 23:54:52 +01:00

Owner

Originally created by @imnotpoz on GitHub (Jan 24, 2026).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/1343

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I'm always frustrated when I can't style my bars depending on which monitor they're on

Currently I have a set of niri named workspaces on my main monitor, which aren't present on the second monitor. I styled them so they're a different color to normal dynamic workspaces, as in the attached screenshot:

This works wonderfully until I open more than 7 workspaces on the second monitor:

Describe the solution you'd like

A clear and concise description of what you want to happen.
The more info here about what you are trying to achieve, the better - there's likely more than one way to go about implementing a solution.

One solution I thought of is adding a CSS class to each element that's just the monitor it's on (so for my issue I'd do .workspaces .item:nth-child(-n+7) .eDP-1 and then .workspaces .HDMI-A-1 for the rest) but not sure if that'd be considered a proper solution or not.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Running 2 entirely different ironbar instances but that would be very bad and ugly.

Additional context

Add any other context or screenshots about the feature request here.

Originally created by @imnotpoz on GitHub (Jan 24, 2026). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/1343 **Is your feature request related to a problem? Please describe.** > A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] I'm always frustrated when I can't style my bars depending on which monitor they're on Currently I have a set of niri named workspaces on my main monitor, which aren't present on the second monitor. I styled them so they're a different color to normal dynamic workspaces, as in the attached screenshot: <img width="442" height="56" alt="Image" src="https://github.com/user-attachments/assets/792de69b-39fd-43ca-bba8-460376dbf25d" /> This works wonderfully until I open more than 7 workspaces on the second monitor: <img width="443" height="54" alt="Image" src="https://github.com/user-attachments/assets/a6b6719a-5fff-4e27-9cce-4b94847aa98e" /> **Describe the solution you'd like** > A clear and concise description of what you want to happen. > The more info here about what you are trying to achieve, the better - there's likely more than one way to go about implementing a solution. One solution I thought of is adding a CSS class to each element that's just the monitor it's on (so for my issue I'd do `.workspaces .item:nth-child(-n+7) .eDP-1` and then `.workspaces .HDMI-A-1` for the rest) but not sure if that'd be considered a proper solution or not. **Describe alternatives you've considered** > A clear and concise description of any alternative solutions or features you've considered. Running 2 entirely different ironbar instances but that would be very bad and ugly. **Additional context** > Add any other context or screenshots about the feature request here.

JakeStanger

2026-05-22 23:54:52 +01:00

closed this issue
added the
T:Core Enhancement

A:Core

A:Config
labels

JakeStanger commented

2026-05-22 23:54:53 +01:00

Author

Owner

@JakeStanger commented on GitHub (Jan 24, 2026):

I don't think adding a class to every widget is the answer, but it makes sense at the top-level. This is achievable currently by setting the name property on the bar.

In my own config for example I have a bar on each monitor named as such:

let {
  $base = { ... }
} in {
  monitors = {
        DP-1 = { name = "DP-1" ..$base }
        DP-2 = { name = "DP-2" ..$base }
        DP-3 = { name = "DP-3" ..$base }
    }

}

These can then be targeted using #name (eg #DP-1), so you should be able to set up separate rules like:

#DP-1 .workspaces {
  /* ... */
}

Does this do what you want?

@JakeStanger commented on GitHub (Jan 24, 2026): I don't think adding a class to every widget is the answer, but it makes sense at the top-level. This is achievable currently by setting the [name](https://github.com/JakeStanger/ironbar/wiki/configuration-guide#32-bar-level-options) property on the bar. In my own config for example I have a bar on each monitor named as such: ```corn let { $base = { ... } } in { monitors = { DP-1 = { name = "DP-1" ..$base } DP-2 = { name = "DP-2" ..$base } DP-3 = { name = "DP-3" ..$base } } } ``` These can then be targeted using `#name` (eg `#DP-1`), so you should be able to set up separate rules like: ```css #DP-1 .workspaces { /* ... */ } ``` Does this do what you want?

JakeStanger commented

2026-05-22 23:54:53 +01:00

Author

Owner

@imnotpoz commented on GitHub (Jan 24, 2026):

It does thank you :3c

@imnotpoz commented on GitHub (Jan 24, 2026): It does thank you :3c