adding background color when app is running

[ahmetkotanci]

I added apps to the bar and I want if the application is running then give it a background color. Tried below css code but didn't work

this is .json

  "custom/firefox": {
     " format": "{}  ",
      "on-click":` "firefox",
}

this is .style.css

    #custom-firefox:active {
        background-color: #333333;
}

[RobertMueller2]

The custom module doesn't set any classes. If you want any, you'd have to add an exec directive and have the executed script add the class to its json output. Here's an example:

{
    "layer": "top", // Waybar at top layer
    "position": "top", // Waybar position (top|bottom|left|right)
    "height" : 50,
    "modules-center": ["custom/test-output"],

    "custom/test-output": {
      "format": "{} <span>icon</span>",
      "exec": "~/tmp/test-output4.sh",
      "on-click" : "firefox",
      "return-type":"json",
      "hide-empty-text": true,
      "interval": 1,
    },
}

#custom-test-output.normal {
    background: #000000;
}

#custom-test-output.running {
    background: #ff0000;
}

and the test script:

#!/bin/sh

TEXT=""
TOOLTIP="not running";
CLASS=normal

if ps -u $(whoami) 2>/dev/null | grep -q firefox ; then
  TOOLTIP="running";
  CLASS=running
fi

printf '{"text": "%s", "tooltip": "%s", "class": "%s"}\n' "$TEXT" "$TOOLTIP" "$CLASS"

[ahmetkotanci]

Thanks I managed this with a similar way you show

config;

"custom/firefox": {
       "format": " {} ",
       "exec": "/home/user/.config/scripts/firefox_state.sh",
       "on-click": "firefox",
       "on-right-click": "killall firefox",
       "return-type": "json",
       "interval": 5,
    }

firefox_state.sh script;

#!/bin/bash
if pgrep firefox > /dev/null; then
    echo '{"text":"","class":"firefox-running"}'
else
    echo '{"text":"","class":"firefox-not-running"}'
fi

css content;

#custom-firefox.firefox-running {
    background-color: #505050;
}
#custom-firefox.firefox-not-running {
    background-color: #000000; 
}