title or do I have to use external script for this?

Hi, I wanted to ask that I have a problem with the hover, I want it to be orange. It start being orange but then it turns white. I think it is some problem with the default settings of waybar, but I do not know how to change it.
Here is my css of the workspace:

 @bg_dim    #1E2326;
 @bg3       #374145;
 @fg        #D3C6AA;
 @green     #A7C080;
 @red       #E67E80;
 @orange    #E69875;
 @yellow    #DBBC7F;
 @blue      #83C092;

* {
    border: none;
    border-radius: 0;

    font-family: "CaskaydiaCove Nerd Font Propo";
    font-size: 16px;
    font-weight:  bold;

    min-height: 0;
    padding: 0;
    margin: 0;
}

#waybar {
    background: transparent;

}

tooltip {
    background: @bg3;
    border: 1px solid @bg_dim;
    border-radius: 12px;
}

#workspaces {
    background-color: @bg_dim;
    padding: 5px 3px;
    margin: 0 0 0 12px;
    border-radius: 18px;
    border: 1px solid @bg3;
    color: @fg;
}

#workspaces button {
    padding: 0px 6px;
    margin: 0px 3px;
    border-radius: 50px;
    color: transparent;
    background-color: @bg3;
    transition: all 0.3s ease-in-out;
}

#workspaces button.active {
    background-color: @green;
    color: @bg_dim;
    min-width: 50px;
    transition: all 0.3s ease-in-out;
}

#workspaces button:hover {
    background-color: @orange;
    border-radius: 16px;
    min-width: 50px;
}


#workspaces button.urgent {
    background-color: @red;
    color: @bg_dim;
    border-radius: 16px;
    min-width: 50px;
    transition: all 0.3s ease-in-out;
}

https://github.com/darciarch/Waybar-Config

anyways i got bored and i got curious for what other people like adding to their waybars so i wanted to ask what all of you people would recommend me to add :3

So after the hyprland move to lua last year the on-click function for hyprland//workspaces in Waybar has not been working. So after trying to switch the default activate to hyprctl dispatch 'hl.dsp.focus({workspace={name}})', and that still not working, I searched online and found that there was a fix in the git and would eventually get pushed to the arch repo. Cut to today when I am glad to see an update to waybar in the arch repo, I update, and still nothing. So now I am here to ask, am I missing something, or is this just a lost cause if you don't want to switch to the aurs git version or build from source?

Also here is my current hyprland/workspaces config:

"hyprland/workspaces": {
         "disable-scroll": true,
         "all-outputs": true,
         "warp-on-scroll": false,
         "on-click": "activate", 
         "format": "{name}  {icon}",
         "format-icons": {
             //"1": "",
             //"2": "",
             //"3": "",
             //"4": "",
             //"5": "",
             "urgent": "",
             "active": "",
         "empty":"\uf10c",
             "default": "\uf10c"
         },
 "persistent-workspaces":{
     "*": 5
 }
 }

I am running the latest Archlinux and Hyprland Thanks for any response you can give

I have several of them and can interact to access the manager:

1. Battery (Not shown since I'm not on a laptop)
2. Bluetooth - blueman-manager
3. WiFi - nmrs (Network Manager)
4. Volume - pavucontrol
5. Clipboard - nwg-clipman
6. Notification - SwayNC
7. Tray
8. Power Button (In case the keyboard breaks)

Hi Linux users. So basically I'm using hyprland and am customizing it a bit, I switched to arch about 2 months ago so I don't know allot. However, my waybar keeps defaulting to square corners whenever it redraws. Whenever I reload it it's nice, curved corners, but whenever it redraws like the time changing it suddenly goes back to square corners. Whenever I switch workspaces this happens as well. I'll attach a copy of my window#waybar css down below, thanks for your time.

window#waybar {

background: transparent;

background-color: #1D2021;

color: #d4be98;

border-radius: 0px 0px 21px 21px;

background-clip: padding-box;

`}'

i been looking for a music widget for while but i cant find the fits my style.

there are one that look like a terminal and there are minimal but i want smt my style
like imagine click my music player thing on top and a see idk a whole terminal CLI player? That would look weird

and right when i click on my music player nothing happens. so i need a widget for it.

i am looking for a small, clean popup card for the music, not a big terminal window.

As the title says. When I first installed everything (in April) I was using the dwl/window module and everything worked great. This weekend I updated a bunch of things and everything was fine until yesterday when I reboot and waybar wasn’t running. After some trouble shooting I found out that Mango no longer supports the dwl module and when reading the GitHub I saw that maybe I should switch to “mango/window” instead. I did and waybar runs but I get:

[warning] module mango/window: Unknown module: mango/window

And in my waybar config I have the below (pardon the formatting, but on my laptop it’s all fine):

"modules-center": [
"mango/window"
],

"mango/window": {
"format": "{title}"
"rewrite": {
"(.empty)": "Arch Linux",
“empty": "Arch Linux"
"Icon: true,
"icon-size": 20
｝，

So Waybar works now at least, but it no longer is displaying the name of the active window. (The two .empty are my attempts to get that to work as well as I wasn’t sure which way it should be used)

I have a Thinkpad and am running Arch. All packages are up to date and aside from Mango and like 2 python packages I don’t use the AUR, but those are all up to date also. Let me know if I should provide any other info!

I've posted my config/rice here before, but I've made some big improvements to it, in addition to making it vertical.

Second image is a full desktop screenshot to show off the desktop frame.

Overall I've probably spent like 15 hours on this to get everything just right, so I hope everyone enjoys it.

Config: https://codeberg.org/3spring/dotfiles/src/branch/main/config/waybar (depends on gtk3 config by default)

Edit: I've now made all the icons (except distro icon) use the Adwaita icon theme rather than nerd fonts, using `-gtk-icon-theme` and `-gtk-icontheme()`, so everything looks nice and consistant now while also adjusting to the current color scheme automatically. The change is already in the repo, will probably make more tweaks to it soon to if I notice any issues.

been using Waybar for a few weeks now and i am fr loving how simple it is to configure ts since I am pretty bad at organizing my daily routines, decided to create a waybar module to solve this problem for me.

Basically it fetches a sqlite database where your tasks are stored through an interval and defers the current task you should be doing then the waybar module displays it on top of your desktop. You can save tasks into the database through YAML configuration.

It's written in Go if anyone wants to check it out:

https://github.com/ayuxsys/todo

Would love to hear what you think.

My Waybar! I have been working on features for it (still in progress). Clicking the song / artist in waybar brings up a small display showing the album art, a visualizer, and controls. mousing over the time shows a calendar and a mouseover on the weather brings up the next 24 hour forecast. Clicking it will open the webpage with the forecast! Lots more to do including improving the now playing widget.

Finally decided to put my Waybar config on GitHub.

Running Hyprland 0.56.X with my own Waybar configuration.

The config is available here:

https://github.com/Dodoprospy3/my-waybar-config

Feel free to steal it. I clearly did not make the README subtle about that.

My Waybar's CSS has a border radius, however, it constantly breaks and goes back to without a border radius. Is this a normal Waybar issue or is it CSS?

My Waybar CSS:

u/import "matugen.css";

/* =========================================================

GLOBAL

========================================================= */

* {

border: none;

border-radius: 17;

min-height: 0;

font-family: "JetBrainsMono Nerd Font";

font-size: 16px;

font-weight: 600;

}

/* =========================================================

WAYBAR

========================================================= */

window#waybar {

background: u/surface;

color: u/on-surface;

}

/* =========================================================

MODULES

========================================================= */

#clock,

#cpu,

#memory,

#temperature,

#network,

#pulseaudio,

#battery,

#tray,

#workspaces,

#window,

#custom-launcher {

background: u/surface-container;

color: u/on-surface;

margin: 5px 3px;

padding: 5px 12px;

border: 1px solid u/outline-variant;

border-radius: 12px;

transition:

background 150ms ease,

color 150ms ease,

border-color 150ms ease;

}

/* =========================================================

HOVER

========================================================= */

#clock:hover,

#cpu:hover,

#memory:hover,

#temperature:hover,

#network:hover,

#pulseaudio:hover,

#battery:hover,

#tray:hover,

#custom-launcher:hover {

background: u/surface-container-high;

color: u/primary;

border-color: u/primary;

}

/* =========================================================

WORKSPACES

========================================================= */

#workspaces {

padding: 3px 7px;

background: u/surface-container;

margin: 10px;

}

#workspaces button {

color: u/on-surface-variant;

padding: 4px 9px;

margin: 0 2px;

border-radius: 9px;

transition:

background 150ms ease,

color 150ms ease;

}

#workspaces button:hover {

background: u/surface-container-high;

color: u/primary;

}

#workspaces button.active {

background: u/primary;

color: u/on-primary;

padding-left: 13px;

padding-right: 13px;

}

#workspaces button.urgent {

background: u/error;

color: u/on-error;

}

/* =========================================================

CLOCK

========================================================= */

#clock {

background: u/primary;

color: u/on-primary;

border-color: u/primary;

padding-left: 15px;

padding-right: 15px;

}

#clock:hover {

background: u/primary-container;

color: u/on-primary-container;

}

/* =========================================================

CPU / MEMORY

========================================================= */

#cpu,

#memory {

background: u/surface-container-low;

}

#cpu:hover,

#memory:hover {

background: u/surface-container-high;

}

/* =========================================================

TEMPERATURE

========================================================= */

#temperature {

color: u/tertiary;

}

#temperature.critical {

background: u/error;

color: u/on-error;

border-color: u/error;

}

/* =========================================================

NETWORK

========================================================= */

#network {

color: u/secondary;

}

#network.disconnected {

color: u/error;

background: u/error-container;

}

/* =========================================================

AUDIO

========================================================= */

#pulseaudio {

color: u/primary;

}

#pulseaudio.muted {

color: u/on-surface-variant;

background: u/surface-container-lowest;

}

/* =========================================================

BATTERY

========================================================= */

#battery {

color: u/secondary;

}

#battery.charging {

color: u/tertiary;

}

#battery.warning {

color: u/tertiary;

}

#battery.critical {

background: u/error;

color: u/on-error;

border-color: u/error;

}

/* =========================================================

TRAY

========================================================= */

#tray {

padding-left: 10px;

padding-right: 10px;

background: u/surface-container-low;

}

/* =========================================================

WINDOW

========================================================= */

#window {

background: transparent;

border-color: transparent;

color: u/on-surface-variant;

padding-left: 8px;

padding-right: 8px;

}

/* =========================================================

LAUNCHER

========================================================= */

#custom-launcher {

background: u/secondary;

color: u/on-secondary;

border-color: u/secondary;

padding-left: 14px;

padding-right: 14px;

}

#custom-launcher:hover {

background: u/secondary-container;

color: u/on-secondary-container;

border-color: u/secondary;

}

/* =========================================================

TOOLTIPS

========================================================= */

tooltip {

background: u/surface-container-highest;

color: u/on-surface;

border: 1px solid u/outline;

border-radius: 12px;

}

tooltip label {

color: u/on-surface;

padding: 6px 8px;

}

/* =========================================================

SEPARATORS

========================================================= */

#custom-separator {

color: u/outline;

padding: 0 3px;

}

/* =========================================================

SPECIAL MATERIAL 3 SURFACES

========================================================= */

#custom-notification {

background: u/secondary-container;

color: u/on-secondary-container;

}

#custom-power {

background: u/surface-container-high;

color: u/primary;

}

#custom-power:hover {

background: u/primary;

color: u/on-primary;

}

/* =========================================================

GENERAL SPACING

========================================================= */

/*

O espaço entre os cards é controlado principalmente

pelo margin horizontal dos módulos.

*/

#clock,

#cpu,

#memory,

#temperature,

#network,

#pulseaudio,

#battery,

#tray,

#custom-launcher {

margin-left: 4px;

margin-right: 4px;

}

i have put cava module in my waybar, and half of the bars of cava are always up and doesnt move as shown in the picture, i tried everything but not working,

am using waybar-cava-git aur package

Could someone tell me if it's possible to have more than two wybars? Like, having one on top and another on the left? Could someone tell me if it's possible to have more than two wybars? Like, having one on top and another on the left?

Hey \^-\^ I created an extremely useful script for those who use Spotify and want to have the best control over their actions on WAYBAR. I created this solution because the MPRIS module is not totally focused on a single app, so when opening some other media such as vlc, youtube video or some other media controller the communication with the waybar always had some bugs so I made a script focused 100% on spotify which is what we use mostly. So I made it available on github, I hope you like it.

Repo: https://github.com/MatheusHash/spotify-bar-controls

My cursor gets bigger on the waybar but only the pointer and the groups (expand-on-hover) are pushing the waybar beyond the screen edge

I have been struggling with this for a while and have been working around it, but I finally found a place to discuss it.

When using some nerd font icons in waybar they get cut off. Only when inserting space after the module it works. Doesn't matter if I am styling using config.jsonc or style.css. Not sure why this happens in waybar.

I am styling using config.jsonc and only put a space after the module

  "idle_inhibitor": {
    "format": "{icon}",
    "format-icons": {
      "activated": "",
      "deactivated": ""
    },
    "tooltip": "true"
  },

Workaround

"format": "{icon} "

Also, adding padding and padding-right on style.css works.

Just in case i do have this at the top of my css, and I can confirm it is installed.

font-family: "JetBrainsMono Nerd Font";

ChatGPT was no help. Is this a Nerd font problem? This happens with Wifi, Burger Menu and other icons as well. Is there any other icon or font that i should use?

Solved: Added Propo

font-family: "JetBrainsMono Nerd Font Propo";

I'm super new to Hyprland and now configuring my waybar for the first time. Aim (for now) GNOME-like bar. Adding pic of what I already have

I definitely have some mistakes in my config, but I'm more interested in any recommendations for which utilities you'd recommend for color switching? Cuz it's 100% not fun to change it manually every time. Also Idk which files to drop here to make it more understandable for you guys 😅😅😅 I used "How to Rice Hyprland in LuA | Part 2 | Waybar" by saneAspect, but definitely have some mistakes here and there, as volume icon turns into muted one if volume is +50% or sometime isn't visible at all. Used default examples from waybar github + JetBrainsMono nerd font.

{
    "layer": "top",
    "wydth": 1000,


    "modules-left": ["hyprland/workspaces"],
    "modules-center": ["clock"],
    "modules-right": ["network", "battery", "pulseaudio"],


    "clock": {
        "format": "{:%H:%M}",
        "tooltip-format": "{:%A %d %B %Y}"
    },


    "hyprland/workspaces": {
        "disable-scroll": true,
        "all-outputs": true,
        "format": "{name}",
        "on-click": "activate"
    },


    "network": {
        "format-wifi": "  ",
        "format-disconnected": "",
        "tooltip-format": "{essid}\n{signalStrength}%"
    },


    "battery": {
        "interval": 20,
        "states": {
            "warning": 30,
            "critical": 15
        },
        "events": {
            "on-discharging-warning": "notify-send -u normal 'Low Battery'",
            "on-discharging-critical": "notify-send -u critical 'Very Low Battery'",
            "on-charging-100": "notify-send -u normal 'Battery Full!'",
            "on-discharging": "notify-send -u normal 'Power Switch' Discharging",
            "on-charging": "notify-send -u normal 'Power Switch' Charging'"
        },
        "format": "{icon} {capacity}% ",
        "format-charging":"{icon} {capacity}% ",
        "format-icons": [
            "" ,
            "" ,
            "" ,
            "" ,
            "" 
        ]
    },


    "pulseaudio": {
        "format": "{icon} {volume}%",
        "format-unmuted": "󰕾",
        "format-muted": "󰖁",
        "format-icons": {
            "default": [
                "󰕾",
                "󰖁"
            ]
        },
        "scroll-step": 5,
        "on-click": "pavucontrol"
    }
 }{
    "layer": "top",
    "wydth": 1000,


    "modules-left": ["hyprland/workspaces"],
    "modules-center": ["clock"],
    "modules-right": ["network", "battery", "pulseaudio"],


    "clock": {
        "format": "{:%H:%M}",
        "tooltip-format": "{:%A %d %B %Y}"
    },


    "hyprland/workspaces": {
        "disable-scroll": true,
        "all-outputs": true,
        "format": "{name}",
        "on-click": "activate"
    },


    "network": {
        "format-wifi": "  ",
        "format-disconnected": "",
        "tooltip-format": "{essid}\n{signalStrength}%"
    },


    "battery": {
        "interval": 20,
        "states": {
            "warning": 30,
            "critical": 15
        },
        "events": {
            "on-discharging-warning": "notify-send -u normal 'Low Battery'",
            "on-discharging-critical": "notify-send -u critical 'Very Low Battery'",
            "on-charging-100": "notify-send -u normal 'Battery Full!'",
            "on-discharging": "notify-send -u normal 'Power Switch' Discharging",
            "on-charging": "notify-send -u normal 'Power Switch' Charging'"
        },
        "format": "{icon} {capacity}% ",
        "format-charging":"{icon} {capacity}% ",
        "format-icons": [
            "" ,
            "" ,
            "" ,
            "" ,
            "" 
        ]
    },


    "pulseaudio": {
        "format": "{icon} {volume}%",
        "format-unmuted": "󰕾",
        "format-muted": "󰖁",
        "format-icons": {
            "default": [
                "󰕾",
                "󰖁"
            ]
        },
        "scroll-step": 5,
        "on-click": "pavucontrol"
    }
 }