[GH-ISSUE #593] Upower CSS selectors wrong on wiki #5816

New issue

Closed

opened 2026-05-23 01:53:10 +01:00 by JakeStanger · 2 comments

JakeStanger commented

2026-05-23 01:53:10 +01:00

Owner

Originally created by @ForgotMyPasswd on GitHub (May 18, 2024).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/593

Describe the bug
I'm trying to change the background of the upower module to match the colours of my powerline segment. While I have been able to change the colour of the container as a whole using .upower { background-color: @shade4; } , I can't seem to change the icon background and the label background with any of the css properties listed in the wiki.

To Reproduce
Steps to reproduce the behavior:

Use .upower .button, .upower .button .contents, .upower .button .icon, .upower .button .label to set background-color or color
Reload ironbar css
See that there is no change

Expected behavior
The background to change after setting background-color

System information:

Distro: Arch Linux
Compositor: Hyprland 0.40.0
Ironbar version: Git

Configuration

Config

anchor_to_edges: true
position: top
icon_theme: Papirus-Dark
height: 42

start:

- type: workspaces
  all_monitors: false
  name_map:
    '1': ""
    '2': "󰈹"
    '3': ""
    '4': ""
    '5': ""
    '6': ""

- type: label
  label: ""
  class: pl-arrow-left1

end:

- type: label
  label: ""
  class: pl-arrow-right5
  
- type: tray
  direction: right_to_left
  icon_size: 25

- type: clipboard
  icon: 󰅍
  max_items: 10
  icon_size: 30
  truncate:
    mode: end
    length: 50

- type: label
  label: ""
  class: pl-arrow-right4

- type: "upower"
  format: "{percentage}%"
  icon_size: 25
  name: upower-btn

- type: label
  label: ""
  class: pl-arrow-right3

- type: clock

- type: label
  label: ""
  class: pl-arrow-right2

- type: custom
  class: toggle-virtual-keyboard
  bar:
  - type: button
    name: toggle-virtual-keyboard-btn
    on_click: '!~/.config/ironbar/wvkbd-toggle.sh'
    widgets:
    - type: image
      src: icon:input-keyboard-symbolic
      size: 25
      name: toggle-virtual-keyboard-btn-image

- type: custom
  bar:
  - type: button
    name: window-actions-btn
    on_click: popup:toggle
    widgets:
    - type: image
      src: icon:preferences-system-windows
      size: 25
      name: window-actions-btn-image
  class: window-action-menu
  popup:
   - orientation: vertical
     type: box
     widgets:
     - type: label
       label: Window Actions
       name: header
     - type: button
       label: Close Window 󰅗
       on_click: '!hyprctl dispatch killactive'
     - type: button
       label: Toggle Floating 󰖲
       on_click: '!hyprctl dispatch togglefloating'
     - type: button
       label: Move to Next Workspace 󰁔
       on_click: '!hyprctl dispatch movetoworkspace +1'
     - type: button
       label: Move to Previous Workspace 󰁍
       on_click: '!hyprctl dispatch movetoworkspace -1'
     - type: button
       label: Change Layout 
       on_click: '!hyprctl dispatch layoutmsg orientationcycle'

- type: label
  label: ""
  class: pl-arrow-right1

- type: notifications
  show_count: true
  icons:
    closed_none: 󰍥
    closed_some: 󱥂
    closed_dnd: 󱅯
    open_none: 󰍡
    open_some: 󱥁
    open_dnd: 󱅮

Styles

@define-color color_bg #11111b;
@define-color color_bg_alt #181825;
@define-color color_bg_hover #313244;
@define-color color_border #181825;
@define-color color_border_active #cba6f7;
@define-color color_text #cdd6f4;
@define-color color_urgent #f38ba8;

@define-color shade1 #311B92;
@define-color shade2 #4527A0;
@define-color shade3 #512DA8;
@define-color shade4 #5E35B1;
@define-color shade5 #673AB7;
@define-color shade6 #7E57C2;
@define-color shade7 #9575CD;
@define-color shade8 #B39DDB;

/* -- base styles -- */

* {
    font-family: Noto Sans Nerd Font, sans-serif;
    font-size: 16px;
    border: none;
    border-radius: 0;
}

box, menubar, button {
    background-color: @color_bg;
    background-image: none;
    box-shadow: none;
}

button, label {
    color: @color_text;
}

button:hover {
    background-color: @color_bg_hover;
}

scale trough {
    min-width: 1px;
    min-height: 2px;
}

#bar {
    border-top: 0px solid @color_border;
}

.popup {
    border: 1px solid @color_border;
    padding: 1em;
}

/* -- clipboard -- */

.clipboard {
	background-color: @shade5;
    margin-left: 0px;
    font-size: 1.1em;
}

.clipboard .btn .icon:hover {
    background-color: @color_bg_hover;
    color: @color_text;
}

.clipboard .btn .text-icon {
	background-color: @shade5;	
}

.popup-clipboard {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clipboard .item {
    padding-bottom: 0.3em;
    background-color: @color_bg_alt;
    border-bottom: 1px solid @color_border;
}

.popup-clipboard .item .btn-remove {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clipboard .item .btn-remove:hover {
    background-color: @color_bg_hover;
    color: @color_text;
}

/* -- clock -- */

.clock {
	background-color: @shade3;
    font-weight: bold;
}

.popup-clock {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clock .calendar-clock {
    color: @color_text;
    font-size: 2.5em;
    padding-bottom: 0.1em;
}

.popup-clock .calendar {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clock .calendar .header {
    padding-top: 1em;
    border-top: 1px solid @color_border;
    font-size: 1.5em;
}

.popup-clock .calendar:selected {
    background-color: @color_border_active;
}

/* -- launcher -- */

.launcher .item {
    margin-right: 4px;
}

.launcher .ifix examtem:not(.focused):hover {
    background-color: @color_bg;
}

.launcher .open {
    border-bottom: 1px solid @color_text;
}

.launcher .focused {
    border-bottom: 1px solid @color_border_active;
}

.launcher .urgent {
    border-bottom-color: @color_urgent;
}

.popup-launcher {
    padding: 0;
}

.popup-launcher .popup-item:not(:first-child) {
    border-top: 1px solid @color_border;
}


/* -- music -- */

.music:hover * {
    background-color: @color_bg_alt;
}

.popup-music .album-art {
    margin-right: 1em;
}

.popup-music .icon-box {
    margin-right: 0.4em;
}

.popup-music .title .icon, .popup-music .title .label {
    font-size: 1.7em;
}

.popup-music .controls *:disabled {
    color: @color_border;
}

.popup-music .volume .slider slider {
    border-radius: 100%;
}

.popup-music .volume .icon {
    margin-left: 4px;
}

.popup-music .progress .slider slider {
    border-radius: 100%;
}

/* notifications */

.notifications .text-button{
    background-color: @shade1;
}

.notifications .count {
    font-size: 0.6rem;
    background-color: @color_text;
    color: @color_bg;
    border-radius: 100%;
    margin-right: 3px;
    margin-top: 3px;
    padding-left: 4px;
    padding-right: 4px;
    opacity: 0.7;
}

/* -- script -- */

.script {
    padding-left: 10px;
}


/* -- sys_info -- */

.sysinfo {
    margin-left: 10px;
}

.sysinfo .item {
    margin-left: 5px;
}


/* -- tray -- */

.tray {
	background-color: @shade5;
    margin-left: 0px;
}

/* -- upower -- */
/* Attempting to theme the icon + label backgrounds*/

.upower {
	background-color: @shade4;
	color: @shade4;
}

.upower .button .contents{
	background-color: @shade4;
	color: @shade4;
}

.upower .button .icon{
    background-color: @shade4;
    color: @shade4;
}

.upower .button .label{
    background-color: @shade4;
    color: @shade4;
}

.upower #upower-btn{
    background-color: @shade4;
    color: @shade4;
}

.popup-upower {
    background-color: @color_bg_alt;
    color: @color_text;
}


/* -- volume -- */

.popup-volume .device-box {
    border-right: 1px solid @color_border;
}

/* -- workspaces -- */

.workspaces .item {
    background-color: @shade1;
}

.workspaces .item.focused {
    box-shadow: inset 0 -3px;
    background-color: @shade1;
    color: @color_border_active;
}

.workspaces .item:hover {
    box-shadow: inset 0 -3px;
}

/* -- custom: powerlines -- */

.pl-arrow-left1 {
   background-color: @color_bg;
   color: @shade1;
   font-size: 35px;
   margin: 0px;
}

.pl-arrow-right1 {
   background-color: @shade2;
   color: @shade1;
   font-size: 35px;
   margin: 0px;
}

.pl-arrow-right2 {
   background-color: @shade3;
   color: @shade2;
   font-size: 35px;
   margin: 0px;
}

.pl-arrow-right3 {
   background-color: @shade4;
   color: @shade3;
   font-size: 35px;
   margin: 0px;
}

.pl-arrow-right4 {
   background-color: @shade5;
   color: @shade4;
   font-size: 35px;
   margin: 0px;
}

.pl-arrow-right5 {
   color: @shade5;
   font-size: 35px;
   margin: 0px;
}

/* -- Virtual Keyboard --*/

.toggle-virtual-keyboard #toggle-virtual-keyboard-btn {
    background-color: @shade2;
}

.toggle-virtual-keyboard #toggle-virtual-keyboard-btn-image {
    background-color: @shade2;
}

/* -- Window Management Buttons -- */

.window-action-menu #window-actions-btn {
    background-color: @shade2;
}

.window-action-menu #window-actions-btn #window-actions-btn-image{
    background-color: @shade2;
}

.popup-window-action-menu #header {
    color: @color_text;
    font-size: 1.2em;
    border-bottom: 1px solid @color_text;
    padding-bottom: 0.4em;
    margin-bottom: 0.8em;
}

Screenshots

(the duplicate icon in the tray is due to me exiting and running the bar very quickly during testing)

Originally created by @ForgotMyPasswd on GitHub (May 18, 2024). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/593 **Describe the bug** I'm trying to change the background of the upower module to match the colours of my powerline segment. While I have been able to change the colour of the container as a whole using `.upower { background-color: @shade4; } `, I can't seem to change the icon background and the label background with any of the css properties listed in the wiki. **To Reproduce** Steps to reproduce the behavior: 1. Use `.upower .button`, `.upower .button .contents`, `.upower .button .icon`, `.upower .button .label` to set `background-color` or `color` 3. Reload ironbar css 4. See that there is no change **Expected behavior** The background to change after setting `background-color` **System information:** - Distro: Arch Linux - Compositor: Hyprland 0.40.0 - Ironbar version: Git **Configuration** <details><summary>Config</summary> ``` anchor_to_edges: true position: top icon_theme: Papirus-Dark height: 42 start: - type: workspaces all_monitors: false name_map: '1': "" '2': "󰈹" '3': "" '4': "" '5': "" '6': "" - type: label label: "" class: pl-arrow-left1 end: - type: label label: "" class: pl-arrow-right5 - type: tray direction: right_to_left icon_size: 25 - type: clipboard icon: 󰅍 max_items: 10 icon_size: 30 truncate: mode: end length: 50 - type: label label: "" class: pl-arrow-right4 - type: "upower" format: "{percentage}%" icon_size: 25 name: upower-btn - type: label label: "" class: pl-arrow-right3 - type: clock - type: label label: "" class: pl-arrow-right2 - type: custom class: toggle-virtual-keyboard bar: - type: button name: toggle-virtual-keyboard-btn on_click: '!~/.config/ironbar/wvkbd-toggle.sh' widgets: - type: image src: icon:input-keyboard-symbolic size: 25 name: toggle-virtual-keyboard-btn-image - type: custom bar: - type: button name: window-actions-btn on_click: popup:toggle widgets: - type: image src: icon:preferences-system-windows size: 25 name: window-actions-btn-image class: window-action-menu popup: - orientation: vertical type: box widgets: - type: label label: Window Actions name: header - type: button label: Close Window 󰅗 on_click: '!hyprctl dispatch killactive' - type: button label: Toggle Floating 󰖲 on_click: '!hyprctl dispatch togglefloating' - type: button label: Move to Next Workspace 󰁔 on_click: '!hyprctl dispatch movetoworkspace +1' - type: button label: Move to Previous Workspace 󰁍 on_click: '!hyprctl dispatch movetoworkspace -1' - type: button label: Change Layout  on_click: '!hyprctl dispatch layoutmsg orientationcycle' - type: label label: "" class: pl-arrow-right1 - type: notifications show_count: true icons: closed_none: 󰍥 closed_some: 󱥂 closed_dnd: 󱅯 open_none: 󰍡 open_some: 󱥁 open_dnd: 󱅮 ``` </details> <details><summary>Styles</summary> ```css @define-color color_bg #11111b; @define-color color_bg_alt #181825; @define-color color_bg_hover #313244; @define-color color_border #181825; @define-color color_border_active #cba6f7; @define-color color_text #cdd6f4; @define-color color_urgent #f38ba8; @define-color shade1 #311B92; @define-color shade2 #4527A0; @define-color shade3 #512DA8; @define-color shade4 #5E35B1; @define-color shade5 #673AB7; @define-color shade6 #7E57C2; @define-color shade7 #9575CD; @define-color shade8 #B39DDB; /* -- base styles -- */ * { font-family: Noto Sans Nerd Font, sans-serif; font-size: 16px; border: none; border-radius: 0; } box, menubar, button { background-color: @color_bg; background-image: none; box-shadow: none; } button, label { color: @color_text; } button:hover { background-color: @color_bg_hover; } scale trough { min-width: 1px; min-height: 2px; } #bar { border-top: 0px solid @color_border; } .popup { border: 1px solid @color_border; padding: 1em; } /* -- clipboard -- */ .clipboard { background-color: @shade5; margin-left: 0px; font-size: 1.1em; } .clipboard .btn .icon:hover { background-color: @color_bg_hover; color: @color_text; } .clipboard .btn .text-icon { background-color: @shade5; } .popup-clipboard { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item { padding-bottom: 0.3em; background-color: @color_bg_alt; border-bottom: 1px solid @color_border; } .popup-clipboard .item .btn-remove { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item .btn-remove:hover { background-color: @color_bg_hover; color: @color_text; } /* -- clock -- */ .clock { background-color: @shade3; font-weight: bold; } .popup-clock { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar-clock { color: @color_text; font-size: 2.5em; padding-bottom: 0.1em; } .popup-clock .calendar { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar .header { padding-top: 1em; border-top: 1px solid @color_border; font-size: 1.5em; } .popup-clock .calendar:selected { background-color: @color_border_active; } /* -- launcher -- */ .launcher .item { margin-right: 4px; } .launcher .ifix examtem:not(.focused):hover { background-color: @color_bg; } .launcher .open { border-bottom: 1px solid @color_text; } .launcher .focused { border-bottom: 1px solid @color_border_active; } .launcher .urgent { border-bottom-color: @color_urgent; } .popup-launcher { padding: 0; } .popup-launcher .popup-item:not(:first-child) { border-top: 1px solid @color_border; } /* -- music -- */ .music:hover * { background-color: @color_bg_alt; } .popup-music .album-art { margin-right: 1em; } .popup-music .icon-box { margin-right: 0.4em; } .popup-music .title .icon, .popup-music .title .label { font-size: 1.7em; } .popup-music .controls *:disabled { color: @color_border; } .popup-music .volume .slider slider { border-radius: 100%; } .popup-music .volume .icon { margin-left: 4px; } .popup-music .progress .slider slider { border-radius: 100%; } /* notifications */ .notifications .text-button{ background-color: @shade1; } .notifications .count { font-size: 0.6rem; background-color: @color_text; color: @color_bg; border-radius: 100%; margin-right: 3px; margin-top: 3px; padding-left: 4px; padding-right: 4px; opacity: 0.7; } /* -- script -- */ .script { padding-left: 10px; } /* -- sys_info -- */ .sysinfo { margin-left: 10px; } .sysinfo .item { margin-left: 5px; } /* -- tray -- */ .tray { background-color: @shade5; margin-left: 0px; } /* -- upower -- */ /* Attempting to theme the icon + label backgrounds*/ .upower { background-color: @shade4; color: @shade4; } .upower .button .contents{ background-color: @shade4; color: @shade4; } .upower .button .icon{ background-color: @shade4; color: @shade4; } .upower .button .label{ background-color: @shade4; color: @shade4; } .upower #upower-btn{ background-color: @shade4; color: @shade4; } .popup-upower { background-color: @color_bg_alt; color: @color_text; } /* -- volume -- */ .popup-volume .device-box { border-right: 1px solid @color_border; } /* -- workspaces -- */ .workspaces .item { background-color: @shade1; } .workspaces .item.focused { box-shadow: inset 0 -3px; background-color: @shade1; color: @color_border_active; } .workspaces .item:hover { box-shadow: inset 0 -3px; } /* -- custom: powerlines -- */ .pl-arrow-left1 { background-color: @color_bg; color: @shade1; font-size: 35px; margin: 0px; } .pl-arrow-right1 { background-color: @shade2; color: @shade1; font-size: 35px; margin: 0px; } .pl-arrow-right2 { background-color: @shade3; color: @shade2; font-size: 35px; margin: 0px; } .pl-arrow-right3 { background-color: @shade4; color: @shade3; font-size: 35px; margin: 0px; } .pl-arrow-right4 { background-color: @shade5; color: @shade4; font-size: 35px; margin: 0px; } .pl-arrow-right5 { color: @shade5; font-size: 35px; margin: 0px; } /* -- Virtual Keyboard --*/ .toggle-virtual-keyboard #toggle-virtual-keyboard-btn { background-color: @shade2; } .toggle-virtual-keyboard #toggle-virtual-keyboard-btn-image { background-color: @shade2; } /* -- Window Management Buttons -- */ .window-action-menu #window-actions-btn { background-color: @shade2; } .window-action-menu #window-actions-btn #window-actions-btn-image{ background-color: @shade2; } .popup-window-action-menu #header { color: @color_text; font-size: 1.2em; border-bottom: 1px solid @color_text; padding-bottom: 0.4em; margin-bottom: 0.8em; } ``` </details> **Screenshots** ![image](https://github.com/JakeStanger/ironbar/assets/96489361/e4a4507f-6347-4d67-a5c0-c5efa194be6b) (the duplicate icon in the tray is due to me exiting and running the bar very quickly during testing)

JakeStanger closed this issue

2026-05-23 01:53:10 +01:00

JakeStanger commented

2026-05-23 01:53:10 +01:00

Author

Owner

@ForgotMyPasswd commented on GitHub (May 18, 2024):

I managed to fix this by using

.upower .contents{
	background-color: @shade4;
	color: @shade4;
}

It seems that .buttons is not needed, the wiki should be updated to reflect this.

@ForgotMyPasswd commented on GitHub (May 18, 2024): I managed to fix this by using ```css .upower .contents{ background-color: @shade4; color: @shade4; } ``` It seems that `.buttons` is not needed, the wiki should be updated to reflect this.

JakeStanger commented

2026-05-23 01:53:11 +01:00

Author

Owner

@JakeStanger commented on GitHub (May 18, 2024):

Looks like there's a mistake in the wiki, .upower and .button are the same element. You can use ironbar inspect to open the inspector and view this.

I'll get the docs amended shortly.

@JakeStanger commented on GitHub (May 18, 2024): Looks like there's a mistake in the wiki, `.upower` and `.button` are the same element. You can use `ironbar inspect` to open the inspector and view this. I'll get the docs amended shortly.