Styling Question: How to set a different font size in a popup window?

[Schweber]

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]

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.

[Schweber]

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]

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)

[Schweber]

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]

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.