Waybar Height Expands to Non-English Fonts Height in Window Title and Custom Menu CSS

Waybar is highly customizable bar for Sway and Wlroots based compositors. It is available in all major distributions.

Waybar's configuration is reading ~/.config/waybar/config.jsonc for module settings and ~/.config/waybar/style.css for appearance.

 

Non-English Font in Window Title Expand the Bar's Height

Non-English fonts in the window title of window title module expand the bar height. It is annoying. To prevent it, setting maring-top and margin-bottom to minus value like margin-top: -30; and margin-bottom: -30; is the trick. See:

#custom-actwt {
  margin-top: -30px;
  margin-bottom: -30px;
  margin-left: 6px;
  margin-right: 6px;
}

 

Waybar Menu CSS

Waybar has custom menu module. See: waybar-menu (5), by $ man 5 waybar-menu in terminal. The useful CSS properties and their values are:

/* msh added - tooltip css */
tooltip {
  background: #111111;
  border: 2px solid #ff00ff;
  border-radius: 9px;
}
tooltip label {
  color: #eeeeee;
  font-size: 20px;
  overflow: auto; padding: 12px;
}
menu {
  background-color: #222222;
  border: 2px solid #0000ff;
  border-radius: 6px;
}
menuitem {
  color: #eeeeee;
  overflow: auto; padding: 12px;
  margin: 9px;
}
menuitem:hover {
  background-color: #0000ff;
  color: #ffffff;
  border-radius: 6px;
}
menuitem label {
  font-size: 20px;
}
separator {
  border: solid 1px #ff00ff;
  margin: 0 9px;
}

 

Minimalist Waybar style.css

* {
  /* `otf-font-awesome` is required to be installed for icons */
  font-family: "Dejavu Sans Mono";
  font-size: 14px;
  min-height: 0;
  border: 0;
  overflow: auto; padding: 0;
  margin: 0;
}

window#waybar {
  background-color: #222222;
  color: #eeeeee;
}

#language,
#custom-battnoti {
  overflow: auto; padding: 0 9px;
  border-radius: 6px;
}

#tray,
#custom-battnoti,
#language,
#wireplumber,
#custom-audiocc,
#network,
#battery,
#clock,
#backlight,
#custom-power {
  margin-right: 20px;
}

#custom-actwt {
  margin-top: -30px;
  margin-bottom: -30px;
  margin-left: 6px;
  margin-right: 6px;
}

#custom-binds,
#custom-actws,
#custom-hyprmenu,
#custom-next {
  margin: 0 6px;
}

#custom-wsnum1,
#custom-wsnum2,
#custom-wsnum3,
#custom-wsnum4,
#custom-wsnum5,
#custom-wsnum6,
#custom-wsnum7,
#custom-wsnum8,
#custom-wsnum9,
#custom-wsnum10 {
  border-radius: 2px;
  overflow: auto; padding: 0 9px;
  color: #888888;
}

#custom-wsnum1.active0,
#custom-wsnum2.active0,
#custom-wsnum3.active0,
#custom-wsnum4.active0,
#custom-wsnum5.active0,
#custom-wsnum6.active0,
#custom-wsnum7.active0,
#custom-wsnum8.active0,
#custom-wsnum9.active0,
#custom-wsnum10.active0 {
  border-radius: 2px;
  overflow: auto; padding: 0 9px;
  background-color: #000000;
  color: #ffffff;
}

#custom-wsnum1.active1,
#custom-wsnum2.active1,
#custom-wsnum3.active1,
#custom-wsnum4.active1,
#custom-wsnum5.active1,
#custom-wsnum6.active1,
#custom-wsnum7.active1,
#custom-wsnum8.active1,
#custom-wsnum9.active1,
#custom-wsnum10.active1 {
  border-radius: 2px;
  overflow: auto; padding: 0 9px;
  background-color: #333333;
  color: #ff00ff;
}

#language:hover,
#custom-battnoti:hover,
#custom-binds:hover,
#custom-next:hover,
#custom-wsnum1:hover,
#custom-wsnum2:hover,
#custom-wsnum3:hover,
#custom-wsnum4:hover,
#custom-wsnum5:hover,
#custom-wsnum6:hover,
#custom-wsnum7:hover,
#custom-wsnum8:hover,
#custom-wsnum9:hover,
#custom-wsnum10:hover {
  background-color: #555555;
  color: #ffff00;
}

/* msh added - tooltip css */
tooltip {
  background: #111111;
  border: 2px solid #ff00ff;
  border-radius: 9px;
}
tooltip label {
  color: #eeeeee;
  font-size: 20px;
  overflow: auto; padding: 12px;
}
menu {
  background-color: #222222;
  border: 2px solid #0000ff;
  border-radius: 6px;
}
menuitem {
  color: #eeeeee;
  overflow: auto; padding: 12px;
  margin: 9px;
}
menuitem:hover {
  background-color: #0000ff;
  color: #ffffff;
  border-radius: 6px;
}
menuitem label {
  font-size: 20px;
}
separator {
  border: solid 1px #ff00ff;
  margin: 0 9px;
}

 

Waybar config.jsonc

// -*- mode: jsonc -*-
{
  // "layer": "top", // Waybar at top layer
  // "position": "bottom", // Waybar position (top|bottom|left|right)
  // "height": 30, // Waybar height (to be removed for auto height)
  // "width": 1280, // Waybar width
  // "spacing": 20, // Gaps between modules (4px)
  // Choose the order of the modules
  "modules-left": [
      "custom/hyprmenu",
      "custom/next",
      "custom/wsnum1",
      "custom/wsnum2",
      "custom/wsnum3",
      "custom/wsnum4",
      "custom/wsnum5",
      "custom/wsnum6",
      "custom/wsnum7",
      "custom/wsnum8",
      "custom/wsnum9",
      "custom/wsnum10",
      "custom/binds",
      "custom/actws",
      "custom/actwt"
  ],
  "modules-right": [
      "tray",
      "custom/battnoti",
      "hyprland/language",
      "wireplumber",
      "network",
      "battery",
      "clock",
      "backlight",
      "custom/power"
  ],
  "tray": {
      // "icon-size": 21,
      "spacing": 10
  },
  "hyprland/language": {
      "format": "{short}",
      "on-click": "hyprctl --quiet switchxkblayout at-translated-set-2-keyboard next"
  },
  "clock": {
      "timezone": "Asia/Yangon",
      "tooltip-format": "{:%Y %B}\n{calendar}",
      "format": "{:%F %a %R}",
      "format-alt": "{:%Y-%m-%d}"
  },
  "backlight": {
      "format": "{percent}% "
  },
  "battery": {
      "states": {
          // "good": 95,
          "warning": 30,
          "critical": 15
      },
      "format": "{icon} {capacity}%",
      "format-full": "{icon} {capacity}%",
      "format-charging": " {capacity}%",
      "format-plugged": " {capacity}%",
      "format-alt": "{time} {icon}",
      // "format-good": "", // An empty format will hide the module
      // "format-full": "",
      "format-icons": ["", "", "", "", ""]
  },
  "network": {
      // "interface": "wlp2*", // (Optional) To force the use of this interface
      "format-wifi": "",
      "format-ethernet": "{ipaddr}/{cidr} ",
      "tooltip-format": "{essid} ({signalStrength}%)\n{ifname}: {ipaddr}/{cidr} ",
      "format-linked": "{ifname} (No IP) ",
      "format-disconnected": "Disconnected ⚠",
      "format-alt": "{ifname}: {ipaddr}/{cidr}"
  },
  "wireplumber": {
      "format": " {volume}%",
      "format-muted": "🗙 {volume}%",
      "on-click": "alacritty -T \"mshfloat\" -e mshabcdi",
      "max-volume": 150,
      "scroll-step": 0.2
  },
  "custom/power": {
      "format" : "⏻",
"tooltip": false,
"menu": "on-click",
"menu-file": "$HOME/.config/waybar/power_menu.xml", // Menu file in resources folder
"menu-actions": {
	"exit": "~/.config/hypr/power-hypr exit",
	"reboot": "~/.config/hypr/power-hypr reboot",
	"poweroff": "~/.config/hypr/power-hypr poweroff",
	"suspend": "systemctl suspend",
	"hibernate": "systemctl hibernate"
}
  },
  "custom/battnoti": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/waybar/wbbattnotionoff",
      "tooltip": false,
      "on-click": "ii bnc toggle; pkill -- -SIGRTMIN+20 waybar",
      "signal": 20
  },
  "custom/wsnum1": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 1",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 1",
      "signal": 1
  },
  "custom/wsnum2": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 2",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 2",
      "signal": 2
  },
  "custom/wsnum3": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 3",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 3",
      "signal": 3
  },
  "custom/wsnum4": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 4",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 4",
      "signal": 4
  },
  "custom/wsnum5": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 5",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 5",
      "signal": 5
  },
  "custom/wsnum6": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 6",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 6",
      "signal": 6
  },
  "custom/wsnum7": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 7",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 7",
      "signal": 7
  },
  "custom/wsnum8": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 8",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 8",
      "signal": 8
  },
  "custom/wsnum9": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 9",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 9",
      "signal": 9
  },
  "custom/wsnum10": {
      "format": "{}",
      "interval": "once",
      "exec": "~/.config/hypr/wsnum-hypr 10",
      "return-type": "json",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace 10",
      "signal": 10
  },
  "custom/hyprmenu": {
      "format": "menu",
      "interval": "once",
      "tooltip": false,
      "on-click": ""
  },
  "custom/next": {
      "format": " - ",
      "interval": "once",
      "tooltip": false,
      "on-click": "hyprctl --quiet dispatch workspace emptynm",
      "on-click-right": "hyprctl --quiet dispatch workspace m-1"
  },
  "custom/binds": {
      "format": "  ",
      "interval": "once",
      "tooltip": false,
      "on-click": "~/.config/hypr/cusmsg-hypr"
  },
  "custom/actws": {
      "format": "{}",
      "exec": "~/.config/hypr/actwswt ws",
      "interval": "once",
      "tooltip": false,
      "on-click": "~/.config/hypr/switch-wswd ws",
      "signal": 11
  },
  "custom/actwt": {
      "format": "{}",
      "exec": "~/.config/hypr/actwswt wt",
      "interval": "once",
      "tooltip": false,
      "on-click": "~/.config/hypr/switch-wswd wd",
      "signal": 12
  }
}

 

Waybar menu.xml

<?xml version="1.0" encoding="UTF-8"?>

<interface>

  <object class="GtkMenu" id="menu">

      <child><object class="GtkMenuItem" id="exit">
          <property name="label">Exit</property>
      </object></child>

      <child><object class="GtkMenuItem" id="reboot">
          <property name="label">Reboot</property>
      </object></child>

      <child><object class="GtkMenuItem" id="poweroff">
          <property name="label">Poweroff</property>
      </object></child>

      <child><object class="GtkSeparatorMenuItem" id="delimiter1"/></child>

      <child><object class="GtkMenuItem" id="suspend">
          <property name="label">Suspend</property>
      </object></child>

      <child><object class="GtkMenuItem" id="hibernate">
          <property name="label">Hibernate</property>
      </object></child>

  </object>

</interface>

Comments

Post a Comment

Popular posts from this blog

printf - Printing with format

Image
printf formats and prints its arguments according to format, a character string which contains three types of objects: plain characters, which are simply copied to standard output, character escape sequences which are converted and copied to the standard output, and format specifications, each of which causes printing of the next successive value.   To Get Zero Leading Number $ printf "%03d" 1 $ 001   To Print Line by Line Including Speces in Terminal Interactive script in terminal sometime requires to clear terminal's face and print line by line without flickering the terminal's face. In that case, using printf "%-*.*s%s\n" "$MINCOL" "$MAXCOL" "string of the line" is a trick. For breaking down, %-*.*s is for width i.e., minimum number of columns and maximum number of columns. In above example, "$MINCOL" and "$MAXCOL" are variables of minimum and maximum...
Read more

rebase or no-rebase for git pull

Image
In the following scenario, the safest option is using git pull --rebase or setting configuration by git config pull.rebase true . Analysis of the scenario Current state on Remote : File aaaaa.txt exits and file bbbbb.txt does not exist yet. Current state on Local : File aaaaa.txt does not exist and file bbbbb.txt has been created. In above scenario and local repository on the computer, git push will fail with the following message: To https://codeberg.org/minsoehan/ttmy.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'https://codeberg.org/minsoehan/ttmy.git' hint: Updates were rejected because the remote contains work that you do not hint: have locally. This is usually caused by another repository pushing to hint: the same ref. If you want to integrate the remote changes, use hint: 'git pull' before pushing again. hint: See the 'Note about fast-forwards' in 'git push -...
Read more

dmmsh-wlr for managing outputs in Wayland using wlr-randr

Managing outputs in Wayland is smooth and easy by using wlr-randr while some compositors such as sway and hyprland have their own tools to manage outputs. See: sway-output(5) man page and Monitors - Hyprland Wiki respectively. To automate managing the outputs, the following dash script is provided by mshii. #!/bin/dash # check if it is run as root and exit if [ $(($(id -u))) -eq 0 ]; then exit 0 fi # test if it is already running and exit SCRIPTNAME= " $(basename -- $0) " if pidof -x " $SCRIPTNAME " -o $$ > /dev/null 2>&1; then notify-send -t 2700 "clean exit" "the script is already running" exit 0 fi # chech if it is in terminal or exit isinterminal_func () { case " $(ps -o stat= -p $$) " in *+*) echo "in terminal, continue..." ;; *) notify-send -t 2700 "clean exit" "please run it in terminal." ; exit 0 ;; esac } # simp...
Read more