can i make the bar look smaller?

[edpyt]

[JakeStanger]

Assuming you mean reduce the width, yes.

GTK will expand the bar to fit the smallest widget down to the target "height" (width on vertical bars). This will take margin/padding into account from your styles. You likely need to update your CSS to achieve this.

[edpyt]

/* also tried with height: 7px */

#bar {
width: 7px;
}

.workspaces {
width: 7px;
}

.notifications {
width: 7px;
}

output:

2025-05-18T17:06:14.155734Z ERROR ironbar::style: 78: 
   0: Failed to load CSS
   1: style.css:7:7'width' is not a valid property name

It seems that gtk does not allow setting a fixed width?
I googled that you can set min-width, but it did not help much

P.S. thanks for ironbar. really like it! ❤️

[JakeStanger]

I'm glad you like it!

You're correct, GTK does not allow setting specific width/heights in styles because it follows a very strong responsive design approach. It's more likely related to padding and margins as I said before.

If you share your full stylesheet I can take a look.

[edpyt]

here it is on my dotfiles repo:
https://github.com/edpyt/dotfiles/blob/3da1d8729275d12b385b707f0dfd0f6f0c1e906e/.config/ironbar/style.css

and ironbar config:
https://github.com/edpyt/dotfiles/blob/3da1d8729275d12b385b707f0dfd0f6f0c1e906e/.config/ironbar/config.json

niri workspaces
https://github.com/edpyt/dotfiles/blob/3da1d8729275d12b385b707f0dfd0f6f0c1e906e/.config/niri/config.kdl#L21

naive padding and margin configuration

[JakeStanger]

There's nothing in your ironbar styles directly that would add padding. I reckon it's the base GTK theme.
https://github.com/edpyt/dotfiles/blob/3da1d8729275d12b385b707f0dfd0f6f0c1e906e/.config/gtk-3.0/settings.ini#L2

If you run ironbar inspect you can use the GTK inspector tool to select one of the buttons, then change the dropdown in the top left to 'CSS Nodes'. That'll give you an overview of the current styles applying to that widget, and show you if it's coming from the theme.

Once you identify the property, you can override it by simply setting a new value in your style.css.

Alternatively you can probably just play around with some rules and see if anything happens.

button {
  margin: 0;
  padding: 0;
}

[edpyt]

ahahah look how small it is now 😄:

button {
  margin: 0;
  padding: 0;
}

worked for me

THANKS for your work! 🔥🔥🔥