JakeStanger/ironbar

Fork 0

mirror of https://github.com/JakeStanger/ironbar.git synced 2026-07-11 11:15:20 +01:00

[GH-ISSUE #170] Help with styling `.workspaces` #4304

New issue

Closed

opened 2026-05-23 00:52:34 +01:00 by JakeStanger · 6 comments

JakeStanger commented

2026-05-23 00:52:34 +01:00

Owner

Originally created by @dennkaii on GitHub (May 28, 2023).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/170

border-raidus in .workspaces aint working

OS:

Screenshots

Originally created by @dennkaii on GitHub (May 28, 2023). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/170 border-raidus in .workspaces aint working OS: ![image](https://github.com/JakeStanger/ironbar/assets/70287696/1afdf48d-b9e3-4e61-aca9-e68023b04a66) **Screenshots** ![image](https://github.com/JakeStanger/ironbar/assets/70287696/3608f722-55a2-4704-9647-54de46e2bea8)

JakeStanger

2026-05-23 00:52:34 +01:00

closed this issue
added the
T:Question
label

JakeStanger commented

2026-05-23 00:52:35 +01:00

Author

Owner

@JakeStanger commented on GitHub (May 28, 2023):

CSS is case-sensitive, so you need to use .workspaces and not .Workspaces. Let me know if you still have any trouble.

@JakeStanger commented on GitHub (May 28, 2023): CSS is case-sensitive, so you need to use `.workspaces` and not `.Workspaces`. Let me know if you still have any trouble.

JakeStanger commented

2026-05-23 00:52:35 +01:00

Author

Owner

@dennkaii commented on GitHub (May 28, 2023):

still

@dennkaii commented on GitHub (May 28, 2023): still ![image](https://github.com/JakeStanger/ironbar/assets/70287696/bd540024-2e7a-4ace-bbad-7073691c3be3)

JakeStanger commented

2026-05-23 00:52:35 +01:00

Author

Owner

@JakeStanger commented on GitHub (May 29, 2023):

So this looks to be a quirk in how GTK handles border-radius with buttons. It does apply to the container, but the child buttons aren't "cropped" to the container.

I think you can achieve what you want here with a bit of padding on the .workspaces, so that you have some room on the edges to curve. Something like the below should work:

.container, window {
  background-color: rgba(0, 0, 0, 0);
}

.workspaces {
  background-color: #ccc;
  padding: 0 10px; 
  border-radius: 10px;
}

.workspaces .item {
  background-color: #ccc;
  border: none;
}

@JakeStanger commented on GitHub (May 29, 2023): So this looks to be a quirk in how GTK handles border-radius with buttons. It does apply to the container, but the child buttons aren't "cropped" to the container. I think you can achieve what you want here with a bit of padding on the `.workspaces`, so that you have some room on the edges to curve. Something like the below should work: ```css .container, window { background-color: rgba(0, 0, 0, 0); } .workspaces { background-color: #ccc; padding: 0 10px; border-radius: 10px; } .workspaces .item { background-color: #ccc; border: none; } ```

JakeStanger commented

2026-05-23 00:52:35 +01:00

Author

Owner

@A-Cloud-Ninja commented on GitHub (May 29, 2023):

Alternatively, my solution to default GTK styling on most of the widgets is to use something like

* {
  border: none;
  border-radius: 0;
  border-image: none;
  outline: none;
  background-image: none;
  box-shadow: none;
  color: inherit;
}

I throw this at the top of my CSS and it removes quite a bit of the default button styling and such.
Edit: realizing this doesn't actually solve that issue. If you just want to clip off the first and last elements (as they'd be where the corners are) you can use :first-child and :last-child selectors.

@A-Cloud-Ninja commented on GitHub (May 29, 2023): Alternatively, my solution to default GTK styling on most of the widgets is to use something like ```css * { border: none; border-radius: 0; border-image: none; outline: none; background-image: none; box-shadow: none; color: inherit; } ``` I throw this at the top of my CSS and it removes quite a bit of the default button styling and such. Edit: realizing this doesn't actually solve that issue. If you just want to clip off the first and last elements (as they'd be where the corners are) you can use :first-child and :last-child selectors.

JakeStanger commented

2026-05-23 00:52:35 +01:00

Author

Owner

@dennkaii commented on GitHub (May 29, 2023):

alr thanks both will try them

@dennkaii commented on GitHub (May 29, 2023): alr thanks both will try them

JakeStanger commented

2026-05-23 00:52:35 +01:00

Author

Owner

@dennkaii commented on GitHub (May 30, 2023):