JakeStanger/ironbar

Fork 0

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

[GH-ISSUE #327] Styling Question: How to set a different font size in a popup window? #7150

New issue

Closed

opened 2026-05-23 02:52:44 +01:00 by JakeStanger · 5 comments

JakeStanger commented

2026-05-23 02:52:44 +01:00

Owner

Originally created by @Schweber on GitHub (Oct 12, 2023).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/327

I'm using the, slightly modified, example Stylesheet and would like to reduce the font size in the clipboard popup. However, all my attempts are in vain and the font size is unchanged:

/* -- base styles -- */

* {
  font-family: FiraCode Nerd Font Med;
  font-size: 16px;
  border: none;
  border-radius: 0;
}

box,
menubar,
button {
  background-color: @color_bg;
  background-image: none;
}

button,
label {
  color: @color_text;
}

button:hover {
  background-color: @color_bg_dark;
}

.popup {
  border: 1px solid @color_border;
  padding: 1em;
}

/* -- clipboard -- */

.clipboard {
  margin-left: 5px;
  font-size: 8px;
}

.popup-clipboard {
  font-size: 8px;
}

.popup-clipboard .item {
  font-size: 8px;
  padding-bottom: 0.3em;
  border-bottom: 1px solid @color_border;
}

I'm not familiar with css at all so i guess i am missing something. Why do my font-size: entries have no effect?

Originally created by @Schweber on GitHub (Oct 12, 2023). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/327 I'm using the, slightly modified, example Stylesheet and would like to reduce the font size in the `clipboard` popup. However, all my attempts are in vain and the font size is unchanged: ``` /* -- base styles -- */ * { font-family: FiraCode Nerd Font Med; font-size: 16px; border: none; border-radius: 0; } box, menubar, button { background-color: @color_bg; background-image: none; } button, label { color: @color_text; } button:hover { background-color: @color_bg_dark; } .popup { border: 1px solid @color_border; padding: 1em; } /* -- clipboard -- */ .clipboard { margin-left: 5px; font-size: 8px; } .popup-clipboard { font-size: 8px; } .popup-clipboard .item { font-size: 8px; padding-bottom: 0.3em; border-bottom: 1px solid @color_border; } ``` I'm not familiar with `css` at all so i guess i am missing something. Why do my `font-size:` entries have no effect?

JakeStanger closed this issue

2026-05-23 02:52:44 +01:00

JakeStanger commented

2026-05-23 02:52:44 +01:00

Author

Owner

@JakeStanger commented on GitHub (Oct 12, 2023):

Hey, CSS has an idea of 'specificity', which can be quite tricky especially with GTK. What this effectively means is that you're setting the font size at the item level, which is probably a Box. The label element in that box then provides its own size rule, which is more specific than your rule, and so gets overriden.

The solution to this usually is to target a more exact element. You might be able to get away with eg .popup-clipboard .item label to target all label elements. You can use ironbar inspect to open the GTK inspector and view the elements to get a visual idea, or try a different element referenced on the wiki.

If you still can't get anywhere, let me know and I can have a play when I get time to get a working example out.

@JakeStanger commented on GitHub (Oct 12, 2023): Hey, CSS has an idea of 'specificity', which can be quite tricky especially with GTK. What this effectively means is that you're setting the font size at the item level, which is probably a `Box`. The label element in that box then provides its own size rule, which is more specific than your rule, and so gets overriden. The solution to this usually is to target a more exact element. You might be able to get away with eg `.popup-clipboard .item label` to target all label elements. You can use `ironbar inspect` to open the GTK inspector and view the elements to get a visual idea, or try a different element referenced on the wiki. If you still can't get anywhere, let me know and I can have a play when I get time to get a working example out.

JakeStanger commented

2026-05-23 02:52:44 +01:00

Author

Owner

@Schweber commented on GitHub (Oct 12, 2023):

You were right, this works:

.popup-clipboard .item label {
  font-size: 12px;
}

Thank you for your quick help!

Maybe something like your explanation could be added to the documentation. It is surely obvious to someone who knows how to deal with css but for me it wasn't obvious, because the documentation didn't list it as a stylable element.

@Schweber commented on GitHub (Oct 12, 2023): You were right, this works: ``` .popup-clipboard .item label { font-size: 12px; } ``` Thank you for your quick help! Maybe something like your explanation could be added to the documentation. It is surely obvious to someone who knows how to deal with `css` but for me it wasn't obvious, because the documentation didn't list it as a stylable element.

JakeStanger commented

2026-05-23 02:52:44 +01:00

Author

Owner

@JakeStanger commented on GitHub (Oct 12, 2023):

No problem, glad to help.

Agreed a paragraph or two on the styling page would definitely be helpful, I'll try and add something soon (or feel free to submit a PR :p)

@JakeStanger commented on GitHub (Oct 12, 2023): No problem, glad to help. Agreed a paragraph or two on the styling page would definitely be helpful, I'll try and add something soon (or feel free to submit a PR :p)

JakeStanger commented

2026-05-23 02:52:44 +01:00

Author

Owner

@Schweber commented on GitHub (Oct 12, 2023):

If i knew how to do a PR i would probably know how to write css as well. Right now, all i can do on GitHub is nagging someone with my problems while trying not to reveal my ignorance too much ;-)

But i'm going to learn it as soon as i have a use for git, i've already started to dabble with the rust track on exercism.org.

@Schweber commented on GitHub (Oct 12, 2023): If i knew how to do a PR i would probably know how to write css as well. Right now, all i can do on GitHub is nagging someone with my problems while trying not to reveal my ignorance too much ;-) But i'm going to learn it as soon as i have a use for git, i've already started to dabble with the rust track on exercism.org.

JakeStanger commented

2026-05-23 02:52:45 +01:00

Author

Owner

@JakeStanger commented on GitHub (Oct 13, 2023):

Best way to learn is to jump in and figure it out as you go :) Don't worry about how much you don't know, people are always willing to lend a hand so long as you're willing to learn.

I went to add some text and found there actually is some guidance on the styling guide already:

https://github.com/JakeStanger/ironbar/blob/master/docs/Styling%20guide.md

You can also target all GTK widgets of a certain type directly using their name. For example, label will select all labels, and button:hover will select the hover state on all buttons. These names are all lower case with no separator, so MenuBar -> menubar.

@JakeStanger commented on GitHub (Oct 13, 2023): Best way to learn is to jump in and figure it out as you go :) Don't worry about how much you don't know, people are always willing to lend a hand so long as you're willing to learn. I went to add some text and found there actually is some guidance on the styling guide already: https://github.com/JakeStanger/ironbar/blob/master/docs/Styling%20guide.md > You can also target all GTK widgets of a certain type directly using their name. For example, label will select all labels, and button:hover will select the hover state on all buttons. These names are all lower case with no separator, so MenuBar -> menubar.