How to style calendar and systray widgets?

[delentef]

Hello,

I'm using eww in labwc (Wayland compositor). I have a eww calendar widget tthat seems to just be a GTK calendar, but I don't know how to style it: how do I change the background color of the calendar, or the wieght of the current day (to make it bold) etc. I have the same question for the widgets that are embedded in the systray: for example, the contextual menu for Steam (accessible but right click) or the menus for nm-applet (both left- and right-click menus) are completely unstyled: their background is completely transparent. How can I style them (I have a .config/gtk3-3.0/settings.ini file that workd in XFCE on X11).

Thanks for any help!

[fidelski]

I guess you did

* {
  all: unset;
}

And now you get transparent backgrounds?
Basically you style with css. You might have a look at some examples, especially the calendar one you can find in the examples directory. For the systray you can apply a class to it (name it systray) and then do something like this (just an example - I found that somewhere some time ago):

.systray image {
  margin: 0px 3px; // So there is some gap between the icons
}

.systray menu {
  background-color: $background-color;

  >menuitem {
    padding: 0px 5px;

    &:disabled label {
      color: gray;
    }

    &:hover {
      color: $highlight-color;
      background-color: $highlight-background-color;
    }
  }

  separator {
    background-color: #222222;
    padding-top: 1px;

    &:last-child {
      padding: unset;
    }
  }
}

[delentef]

Hello, thanks for your answer. I haven't styled anything, I don't even know where I can put these instructions :^) I have both XFCE/X11 and labwc/Wayland, in XFCE the systray menus are themed, not in wayland, that's all I know :^) Should I put the instructions you pasted in eww.yuck file?

Thanks again!

[fidelski]

Well maybe then you want to read some background info. There is documentation available:

https://elkowar.github.io/eww/

The above is a scss example that shows how to style the calendar.