Arch Linux

avg.guy

Member

Registered: 2017-03-28

Posts: 10

[SOLVED] Xfce panel applet customization - bar graphs

Hi guys, Arch noob here... :)

Been scouring the web for hours trying to figure this out. So I installed Arch with XFCE and then installed the latest Greybird theme. My goal is to use Greybird as the window theme (through Window Manager), and Adwaita for everything else (through Appearance).

I'm having an issue with the indicator applets for Network Monitor and System Load Monitor: specifically, depending on which system theme is set, the bar graphs are hardly visible or plain ugly in Adwaita. Same for all other stock Xfce themes. However, they look very nice under Greybird. See below:

Adwaita:
Greybird:

So, basically, I just want to copy the bar graph style from Greybird to Adwaita, but I don't know how. I can't find which setting and where, or which resource files control the bar graphs, but they are clearly affected by the system theme.

Could anyone point me in the right direction please? I've been bashing my head against the wall almost all day now. :)

Last edited by avg.guy (2017-03-29 15:19:27)

justasug

Member

Registered: 2014-08-03

Posts: 165

Re: [SOLVED] Xfce panel applet customization - bar graphs

Try looking at and tweaking xfce-panel.rc from the theme. The best way would be to just ask the author on the Greybird issue tracker.

toz

Member

Registered: 2011-10-28

Posts: 497

Re: [SOLVED] Xfce panel applet customization - bar graphs

So, basically, I just want to copy the bar graph style from Greybird to Adwaita

Those plugins have just recently been migrated to GTK3 so xfce-panel.rc edits won't help. Since Greybird is based on Adwaita, you can grab the progressbar themeing code from Greybird's gtk-3.0/gtk-contained.css file (around line 3200):

/*****************
 * Progress bars *
 *****************/
progressbar {
  font-size: smaller;
  color: rgba(60, 60, 60, 0.4); }
  progressbar.horizontal trough {
    min-height: 6px; }
  progressbar.horizontal progress {
    min-height: 8px; }
  progressbar.vertical trough {
    min-width: 6px; }
  progressbar.vertical progress {
    min-width: 8px; }
  progressbar.horizontal progress, progressbar.vertical progress {
    margin: 0; }
  progressbar:backdrop {
    box-shadow: none;
    transition: 200ms ease-out; }
  progressbar progress {
    border-width: 0;
    box-shadow: inset 1px 1px shade(#398ee7, 0.7), inset -1px -1px shade(#398ee7, 0.7);
    border-radius: 3px; }
    progressbar progress.left {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px; }
    progressbar progress.right {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px; }
    progressbar progress.top {
      border-top-right-radius: 3px;
      border-top-left-radius: 3px; }
    progressbar progress.bottom {
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px; }
  progressbar:backdrop progress {
    box-shadow: none; }
  progressbar.osd {
    min-width: 3px;
    min-height: 3px;
    background-color: transparent; }
    progressbar.osd trough {
      border-style: none;
      border-radius: 0;
      background-color: transparent;
      box-shadow: none; }
    progressbar.osd progress {
      border-style: none;
      border-radius: 0; }

...and put it in your ~/.config/gtk-3.0/gtk.css file. Then restart xfce4-panel to have it take effect.

Edit: I should mention that the above will affect all progress bar themeing throughout the theme. If you only want to change the xfce4-panel progress bar themes, just prepend ".xfce4-panel.panel" to every progressbar directive like:

/*****************
 * Progress bars (xfce4-panel only) *
 *****************/
.xfce4-panel.panel progressbar {
  font-size: smaller;
  color: rgba(60, 60, 60, 0.4); }
  .xfce4-panel.panel progressbar.horizontal trough {
    min-height: 6px; }
  .xfce4-panel.panel progressbar.horizontal progress {
    min-height: 8px; }
  .xfce4-panel.panel progressbar.vertical trough {
    min-width: 6px; }
  .xfce4-panel.panel progressbar.vertical progress {
    min-width: 8px; }
  .xfce4-panel.panel progressbar.horizontal progress, .xfce4-panel.panel progressbar.vertical progress {
    margin: 0; }
  .xfce4-panel.panel progressbar:backdrop {
    box-shadow: none;
    transition: 200ms ease-out; }
  .xfce4-panel.panel progressbar progress {
    border-width: 0;
    box-shadow: inset 1px 1px shade(#398ee7, 0.7), inset -1px -1px shade(#398ee7, 0.7);
    border-radius: 3px; }
    .xfce4-panel.panel progressbar progress.left {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px; }
    .xfce4-panel.panel progressbar progress.right {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px; }
    .xfce4-panel.panel progressbar progress.top {
      border-top-right-radius: 3px;
      border-top-left-radius: 3px; }
    .xfce4-panel.panel progressbar progress.bottom {
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px; }
  .xfce4-panel.panel progressbar:backdrop progress {
    box-shadow: none; }
  .xfce4-panel.panel progressbar.osd {
    min-width: 3px;
    min-height: 3px;
    background-color: transparent; }
    .xfce4-panel.panel progressbar.osd trough {
      border-style: none;
      border-radius: 0;
      background-color: transparent;
      box-shadow: none; }
    .xfce4-panel.panel progressbar.osd progress {
      border-style: none;
      border-radius: 0; }

Last edited by toz (2017-03-28 11:08:25)

avg.guy

Member

Registered: 2017-03-28

Posts: 10

Re: [SOLVED] Xfce panel applet customization - bar graphs

Try looking at and tweaking xfce-panel.rc from the theme. The best way would be to just ask the author on the Greybird issue tracker.

Thanks, justasug. I might try contacting the author if I can't find a solution otherwise. :) By the way, I did comb through xfce-panel.rc for both Greybird and Adwaita until I noticed that they are exactly the same. o_O But at first I was like, "It's gotta be in here somewhere!" lol

avg.guy

Member

Registered: 2017-03-28

Posts: 10

Re: [SOLVED] Xfce panel applet customization - bar graphs

So, basically, I just want to copy the bar graph style from Greybird to Adwaita

Those plugins have just recently been migrated to GTK3 so xfce-panel.rc edits won't help. Since Greybird is based on Adwaita, you can grab the progressbar themeing code from Greybird's gtk-3.0/gtk-contained.css file (around line 3200):

Thanks, toz! That's what I've been looking for! :D

Unfortunately, I can't seem to find the gtk-contained.css file for Adwaita. I've looked under both standard and dark version of the theme, but to no avail. I did find /usr/share/themes/Adwaita/gtk-3.0/gtk.css that reads:

@import url("resource:///org/gtk/libgtk/theme/Adwaita/gtk-contained-dark.css");

But I don't know how to read that path, and filesystem-wide I can't find any folder named Adwaita that has gtk-contained-dark.css in it. Where did I go wrong? :)

Thanks again!

toz

Member

Registered: 2011-10-28

Posts: 497

Re: [SOLVED] Xfce panel applet customization - bar graphs

Adwaita is the default built-in GTK3 theme, so you won't find the individual theme files (they are embedded into gtk3). To override those settings, put the snippet into your $HOME/.config/gtk-3.0/gtk.css file - this file will take precedence over the built-in adwaita settings.

avg.guy

Member

Registered: 2017-03-28

Posts: 10

Re: [SOLVED] Xfce panel applet customization - bar graphs

Adwaita is the default built-in GTK3 theme, so you won't find the individual theme files (they are embedded into gtk3). To override those settings, put the snippet into your $HOME/.config/gtk-3.0/gtk.css file - this file will take precedence over the built-in adwaita settings.

I just tried this but it still didn't work. There wasn't anything inside gtk-3.0 folder, so I just copied the gtk.css file from /usr/share/themes/Adwaita/gtk-3.0/ and added the progress bar code to it. Also tried removing the import line, but it still doesn't change progress bars. Every time I made changes, I made sure to switch the theme back and forth to reload settings, but nothing happened.

On a different note, is there a manual somewhere that explains all of this? All I've been able to find were generic gtk theming tutorials, none of which cover what I'm looking for... :(

Thanks anyway, toz!

toz

Member

Registered: 2011-10-28

Posts: 497

Re: [SOLVED] Xfce panel applet customization - bar graphs

I just tried this but it still didn't work. There wasn't anything inside gtk-3.0 folder, so I just copied the gtk.css file from /usr/share/themes/Adwaita/gtk-3.0/ and added the progress bar code to it. Also tried removing the import line, but it still doesn't change progress bars. Every time I made changes, I made sure to switch the theme back and forth to reload settings, but nothing happened.

You need to restart the panel:

xfce4-panel -r

Make sure the import code is deleted as well. If you didn't already have a gtk.css file, then it's contents should literally be one of the two snippets posted above.

On a different note, is there a manual somewhere that explains all of this? All I've been able to find were generic gtk theming tutorials, none of which cover what I'm looking for...

There's the Arch GTK wiki page that have some good information as well as Gnome's section on Theming. But I haven't come across a comprehensive manual of any kind. Having a good understanding of GTK and it's widgets is very useful.

avg.guy

Member

Registered: 2017-03-28

Posts: 10

Re: [SOLVED] Xfce panel applet customization - bar graphs

You need to restart the panel:

xfce4-panel -r

Make sure the import code is deleted as well. If you didn't already have a gtk.css file, then it's contents should literally be one of the two snippets posted above.

Nice! It's working!!! :D You're a wizard!

Thanks toz! I'll go through the links you suggested as well and try to learn more about how all this theming works.