Separator

[MadFatVlad]

Hello! Would it be possible to add a config setting for a module separator? For now i have to use "|" symbol in "format"

[Alexays]

You can probably achieve this result with css style

[mliszcz]

@MadFatVlad have you found a solution?

Looks like GTK CSS does not support pseudo-elements:

#pulseaudio::after {
  content: "·";
}

style.css:41:12Invalid name of pseudo-class

I'm looking for swaybar's separator_symbol equivalent.

[rhssk]

@mliszcz Stumbled upon the same issue. Once possible workaround is to define a custom block which serves as a separator:

"custom/separator": {
    "format": "|",
    "interval": "once",
    "tooltip": false
},

Then it's possible to just insert the module in "modules-*" sections:

"modules-right": [
    "custom/weather",
    "custom/separator",
    "network"
],

Styling is quite straight-forward:

#custom-separator {
  color: #1B5E20;
  margin: 0 5px;
}

[mliszcz]

@rhssk thanks for your comment!

The problem with custom block approach is that you have to manually insert the separator between every pair of blocks.

I worked around this using only css (works fine for simple separators like dot or pipe): https://github.com/mliszcz/dotfiles/blob/76ff7c99d6fab88e0e0f5d88b8ec398afe9c14f2/waybar/.config/waybar/style.css#L72-L79

You can use background-position/-size to create a solid/gradient background that looks like a border. See https://stackoverflow.com/a/18529578.

You can then use following selector to style all the labels:

#waybar > box:nth-child(2) > box:nth-child(3) > * > label {}

[jorgecastro05]

I did a line separator with a border-right property: For example:

#language, #pulseaudio, #network, #memory, #temperature, #battery, #clock, #tray {
    padding-right: 8px;
    padding-left: 8px;
    border-right: 1px solid #6c3483;
}

Maybe this could help you.

[xsbee]

I did a line separator with a border-right property: For example:

#language, #pulseaudio, #network, #memory, #temperature, #battery, #clock, #tray {
    padding-right: 8px;
    padding-left: 8px;
    border-right: 1px solid #6c3483;
}

Maybe this could help you.

Would be all fine if and only if :not(:last-child) selector worked with GTK CSS. So either separators must be manually inserted as mentioned or native support for separators be built in as it is in polybar or i3status. @Alexays should consider putting this feature natively because the workaround are tiresome and same effect can't be achieved by limited CSS alone.