[GH-ISSUE #693] Bar won't load CSS file #5853

New issue

Closed

opened 2026-05-23 01:53:25 +01:00 by JakeStanger · 4 comments

JakeStanger commented

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

Owner

Originally created by @ShellbackII on GitHub (Aug 8, 2024).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/693

Describe the bug
The bar seems not to read the CSS config file as described in documentation (~/.config/ironbar/style.css), or maybe more precise, doesn't apply any formating from it. When changing any value, nothing is changed on bar, not even after it's killed and restarted.

To Reproduce
Steps to reproduce the behavior:

Make any change in the css file (change the background for my example, see below)
Save the file.
According to the documentation, the change should be applied directly, but nothing changes. Not even if I use 'ironbar load-css ~/.config/ironbar/style.css'. The setting is applied if I'm putting the same in the gtk inspector CSS field, so I dont think a typo is the fault...

Expected behavior
The changed made in ~/.config/ironbar/style.css is seen on the bar

System information:

Distro: Arch Linux
Compositor: wayfire
Ironbar version: 0.16.0-pre

Configuration

Config

ironvar_defaults:
  menuicon: distributor-logo-archlinux
monitors:
  DVI-D-1:
    - name: "mainbar"
      class: "bar"
      position: "top"
      height: 20
      anchor_to_edges: true
      exclusive_zone: true
      start_hidden: false
      icon_theme: "Papirus"
      popup_gap: 7
      layer: "top"
      start: 
        - type: "custom"
          class: "menubutton"
          bar:
            - type: "button"
              name: "menubutton"
              on_click: '!nwg-drawer'
              widgets:
                - type: "image"
                  src: "icon:#menuicon"
                  size: 20
        - type: "launcher"
          name: "mainlauncher"
          icon_size: 20
          favorites:
            - thunar
            - mousepad
            - onlyoffice
            - vivaldi
          show_names: false
          show_icons: true
          reversed: false
      center:
        - type: custom
          class: weather
          bar:
            - type: button
              label: '#weather_current'
              on_click: popup:toggle
          popup:
            - type: box
              orientation: vertical
              widgets:
                - type: label
                  name: header
                  label: Prognos
                - type: box
                  widgets:
                    - type: box
                      name: dates
                      orientation: vertical
                      widgets:
                        - type: label
                          class: weather-date
                          label: '#weather_date_0'
                        - type: label
                          class: weather-date
                          label: '#weather_date_1'
                        - type: label
                          class: weather-date
                          label: '#weather_date_2'
                    - type: box
                      name: temps
                      orientation: vertical
                      widgets:
                        - type: box
                          widgets:
                            - type: label
                              class: weather-high
                              label: ' #weather_high_0'
                            - type: label
                              class: weather-avg
                              label: ' #weather_avg_0'
                            - type: label
                              class: weather-low
                              label: ' #weather_low_0'
                        - type: box
                          widgets:
                            - type: label
                              class: weather-high
                              label: ' #weather_high_1'
                            - type: label
                              class: weather-avg
                              label: ' #weather_avg_1'
                            - type: label
                              class: weather-low
                              label: ' #weather_low_1'
                        - type: box
                          widgets:
                            - type: label
                              class: weather-high
                              label: ' #weather_high_2'
                            - type: label
                              class: weather-avg
                              label: ' #weather_avg_2'
                            - type: label
                              class: weather-low
                              label: ' #weather_low_2'
        - type: "sys_info"
          format:
            - ' {cpu_percent}%'
            - ' {memory_percent}%'
            - '󰋊 {disk_percent:/}%'
      end:
        - type: "clipboard"
          icon_size: 20
          truncate.mode: 'middle'
          truncate.max_length: 20
        - type: "tray"
          name: "maintray"
          icon_size: 20
          prefer_theme_icons: true
        - type: "notifications"
        - type: "clock"
          name: "mainclock"
          format: "%Y-%m-%d %H:%M"
          format_popup: "%H:%M:%S"
          locale: "sv_SE"

Styles


.background {
    background-color: #770000;
}

Originally created by @ShellbackII on GitHub (Aug 8, 2024). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/693 **Describe the bug** The bar seems not to read the CSS config file as described in documentation (~/.config/ironbar/style.css), or maybe more precise, doesn't apply any formating from it. When changing any value, nothing is changed on bar, not even after it's killed and restarted. **To Reproduce** Steps to reproduce the behavior: 1. Make any change in the css file (change the background for my example, see below) 2. Save the file. 3. According to the documentation, the change should be applied directly, but nothing changes. Not even if I use 'ironbar load-css ~/.config/ironbar/style.css'. The setting is applied if I'm putting the same in the gtk inspector CSS field, so I dont think a typo is the fault... **Expected behavior** The changed made in ~/.config/ironbar/style.css is seen on the bar **System information:** - Distro: Arch Linux - Compositor: wayfire - Ironbar version: 0.16.0-pre **Configuration** <details><summary>Config</summary> ``` ironvar_defaults: menuicon: distributor-logo-archlinux monitors: DVI-D-1: - name: "mainbar" class: "bar" position: "top" height: 20 anchor_to_edges: true exclusive_zone: true start_hidden: false icon_theme: "Papirus" popup_gap: 7 layer: "top" start: - type: "custom" class: "menubutton" bar: - type: "button" name: "menubutton" on_click: '!nwg-drawer' widgets: - type: "image" src: "icon:#menuicon" size: 20 - type: "launcher" name: "mainlauncher" icon_size: 20 favorites: - thunar - mousepad - onlyoffice - vivaldi show_names: false show_icons: true reversed: false center: - type: custom class: weather bar: - type: button label: '#weather_current' on_click: popup:toggle popup: - type: box orientation: vertical widgets: - type: label name: header label: Prognos - type: box widgets: - type: box name: dates orientation: vertical widgets: - type: label class: weather-date label: '#weather_date_0' - type: label class: weather-date label: '#weather_date_1' - type: label class: weather-date label: '#weather_date_2' - type: box name: temps orientation: vertical widgets: - type: box widgets: - type: label class: weather-high label: ' #weather_high_0' - type: label class: weather-avg label: ' #weather_avg_0' - type: label class: weather-low label: ' #weather_low_0' - type: box widgets: - type: label class: weather-high label: ' #weather_high_1' - type: label class: weather-avg label: ' #weather_avg_1' - type: label class: weather-low label: ' #weather_low_1' - type: box widgets: - type: label class: weather-high label: ' #weather_high_2' - type: label class: weather-avg label: ' #weather_avg_2' - type: label class: weather-low label: ' #weather_low_2' - type: "sys_info" format: - ' {cpu_percent}%' - ' {memory_percent}%' - '󰋊 {disk_percent:/}%' end: - type: "clipboard" icon_size: 20 truncate.mode: 'middle' truncate.max_length: 20 - type: "tray" name: "maintray" icon_size: 20 prefer_theme_icons: true - type: "notifications" - type: "clock" name: "mainclock" format: "%Y-%m-%d %H:%M" format_popup: "%H:%M:%S" locale: "sv_SE" ``` </details> <details><summary>Styles</summary> ```css .background { background-color: #770000; } ``` </details>

JakeStanger closed this issue

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

JakeStanger commented

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

Author

Owner

@JakeStanger commented on GitHub (Aug 10, 2024):

Odd. Could you share debug logs please?

@JakeStanger commented on GitHub (Aug 10, 2024): Odd. Could you share debug logs please?

JakeStanger commented

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

Author

Owner

@ShellbackII commented on GitHub (Aug 10, 2024):

Shure... this maybe is a dumb question, but... how to aquire it?

While I'm responing, I might add that I have tried to switch from git-package to the resent release (my version is now 0.15.1). Regrettfully, that didn't solved the issue either, and it introduced another setback for me. Now it puts my bar on the wrong output, even though I specify the other one in the config. This however was working in the git-version found in AUR, so whatever caused that is now fixed.

@ShellbackII commented on GitHub (Aug 10, 2024): Shure... this maybe is a dumb question, but... how to aquire it? While I'm responing, I might add that I have tried to switch from git-package to the resent release (my version is now 0.15.1). Regrettfully, that didn't solved the issue either, and it introduced another setback for me. Now it puts my bar on the wrong output, even though I specify the other one in the config. This however was working in the git-version found in AUR, so whatever caused that is now fixed.

JakeStanger commented

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

Author

Owner

@ShellbackII commented on GitHub (Aug 10, 2024):

Well... I have found the issue why the css didn't load. I had write some color definitions in the begining (that I somehow forgot to copy when I pasted it into this issue), and apparently, I missed to put semicolon in the end of those.

Found it when I saw the error when starting in manually, strange though that I didn't see that earlier.

Anyhow, as I suspected from the beginning, the strange behaviour whas due to the crap infront of the keyboard. Sorry for this

@ShellbackII commented on GitHub (Aug 10, 2024): Well... I have found the issue why the css didn't load. I had write some color definitions in the begining (that I somehow forgot to copy when I pasted it into this issue), and apparently, I missed to put semicolon in the end of those. Found it when I saw the error when starting in manually, strange though that I didn't see that earlier. Anyhow, as I suspected from the beginning, the strange behaviour whas due to the crap infront of the keyboard. Sorry for this

JakeStanger commented

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

Author

Owner

@JakeStanger commented on GitHub (Aug 10, 2024):

No worries, glad to hear it's sorted.

Now it puts my bar on the wrong output, even though I specify the other one in the config.

Yes, unfortunately a GTK update broke v0.15.1. I released v0.16.0 as the newest stable which won't have that issue.

@JakeStanger commented on GitHub (Aug 10, 2024): No worries, glad to hear it's sorted. > Now it puts my bar on the wrong output, even though I specify the other one in the config. Yes, unfortunately a GTK update broke v0.15.1. I released v0.16.0 as the newest stable which won't have that issue.