General suggestions about styling "custom" stuff

[JustSimplyKyle]

Sys-Info

https://github.com/JakeStanger/ironbar/wiki/Sys-Info
Currently, it's only possible to rice the whole part of sys-info, not individual sections of it.
For example, I have these three modules.

I can't style them individualy, only by the full class #sysinfo #item

Scripts

You can only have one style.(according to the documentation, it's very much possible that I read this incorrectly)
https://github.com/JakeStanger/ironbar/wiki/script

Maybe a variable like class in custom would help?
https://github.com/JakeStanger/ironbar/wiki/custom

[JakeStanger]

CSS provides an nth-child selector which you can use to target individual elements. I don't think having a class property would be preferable here because it would complicate the config - you'd end up having to specify an object for each segment instead of just a string like you do now.

Example:

#sysinfo #item:nth-child(1) {
  /* this is your cpu */
}

#sysinfo #item:nth-child(2) {
  /* this is your memory */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

You can even do some basic formulae with it, which I believe GTK supports.

[JustSimplyKyle]

Oh, very interesting! I'm not too good at css, thanks!

[JustSimplyKyle]

Slight issue? I can't seem to get it to work with multiple script?

[JakeStanger]

Please share your CSS otherwise I can't help

[JustSimplyKyle]

https://0x0.st/HrbE.css

[JakeStanger]

Okay so:

nth-child is not the nth of that type, but the nth of any type in the parent. That means script#nth-child(1) will only select script modules that are the first module in the section (start, center, end).

Regular web CSS has a nth-of-type selector that would solve this, but GTK helpfully doesn't support it. For now, you can just bump up the numbers to their actual indexes in the section, and I'll make a note to add some options to make this easier.