Panel Gradient

Mellowbob · 2021-10-03 23:53:33

How would I create a gradient background for my panel in 4.16.2? I see some old posts, but I'm not sure where even to install the suggested ones in this version ... gtk2, 3 or 4?

Might be easiest just to create a png and use that ...

ToZ · 2021-10-04 01:52:27

Or, you can theme it via css. Something like this in ~/.config/gtk-3.0/gtk.css:

.xfce4-panel, .xfce4-panel * { background-image: linear-gradient(to bottom, shade(#ff0000, 0.85), shade(#0000ff, 0.85)); border: transparent; }

Mellowbob · 2021-10-04 02:35:19

Perfect!

Question 1: I thought xfce4 was now using gtk4, but it appears that it gtk3. Good to know.

Question 2: Can I do the same on window title bars? I just tried naming the titlebar

.xfce4-titlebar, .title * {...

But that doesn't seem to work.

ToZ · 2021-10-04 02:54:39

Mellowbob wrote:

Question 1: I thought xfce4 was now using gtk4, but it appears that it gtk3. Good to know.

Yes, still based on GTK3.

Question 2: Can I do the same on window title bars?

Yes and no. For CSD windows, you can use the ".titlebar" designator:

.titlebar { background-image: linear-gradient(to bottom, shade(#ff0000, 0.85), shade(#0000ff, 0.85)); border: transparent; }

For SSD windows (the old style titlebars), you need to theme the xfwm4 theme.

Mellowbob · 2021-10-04 03:34:39

Thanks. I'll have to play with this later this week.

Mellowbob · 2022-01-24 22:21:29

ToZ wrote:

Or, you can theme it via css. Something like this in ~/.config/gtk-3.0/gtk.css:
.xfce4-panel, .xfce4-panel * { background-image: linear-gradient(to bottom, shade(#ff0000, 0.85), shade(#0000ff, 0.85)); border: transparent; }

Trying to do this again using 4.16.3 and adding the above to my gtk-3.0 destroys the panel and I need to logout, delete the session, and login to get the session working again. I did modify the line to:

.xfce4-panel, .xfce4-panel * { background-image: linear-gradient(to bottom, shade(#537CAC, .2), shade(#CBE3EC, .6)); border: transparent;

This was cut/paste and changing to the original suggestion doesn't seem to work either smile

I have no idea what I'm doing wrong ...

ToZ · 2022-01-24 23:47:00

Which GTK theme are you using? The above code mostly works with Adwaita - still needs some tweaking.

Can you post back the full content of your gtk.css file?

Mellowbob · 2022-01-25 00:14:47

ToZ wrote:

Which GTK theme are you using? The above code mostly works with Adwaita - still needs some tweaking.
Can you post back the full content of your gtk.css file?

Sure. I've changed my panel to use an image and that really might be the best route to go since it "just works". But, here is the file:

~/.config/gtk-3.0] bob$ cat gtk.css
.scrollbar {
  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;
  -GtkRange-slider-width: 25;
  -GtkRange-stepper-size: 8;
}

@import 'colors.css';

/*.xfce4-panel, .xfce4-panel * { background-image: linear-gradient(to bottom, shade(#537CAC, .2), shade(#CBE3EC, .6)); border: transparent; }  */

/* .xfce4-titlebar, .title * { background-image: linear-gradient(to bottom, shade(#537CAC, 2), shade(#CBE3EC, .6)); border: transparent; } */

wnck-pager { background-color: #4096BF; }
wnck-pager:selected { background-color: #eeeeff }
wnck-pager:hover { background-color: #11ffff; }
de]

The command I used to restart the panel was "xfce4-panel --restart" which I think should be right?

Theme: clearlooks-phenix

Last edited by Mellowbob (2022-01-25 00:16:02)

ToZ · 2022-01-25 02:29:23

You have the statement commented out (inside of /* ... */).

Try this (as your complete gtk.css file) - it includes some tweaks:

.scrollbar {
  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;
  -GtkRange-slider-width: 25;
  -GtkRange-stepper-size: 8;
}

@import 'colors.css';

.xfce4-panel, .xfce4-panel button { background-image: linear-gradient(to bottom, shade(#537CAC, .2), shade(#CBE3EC, .6)); border: transparent; border-radius: 0; }  
#systray-6 box { background-image: linear-gradient(to bottom, shade(#537CAC, .2), shade(#CBE3EC, .6)); border: transparent; border-radius: 0;}

/* .xfce4-titlebar, .title * { background-image: linear-gradient(to bottom, shade(#537CAC, 2), shade(#CBE3EC, .6)); border: transparent; } */

wnck-pager { background-color: #4096BF; }
wnck-pager:selected { background-color: #eeeeff }
wnck-pager:hover { background-color: #11ffff; }

You will need to change the "6" in "systray-6" to be the actual systray widget number on your system. You can get this by hovering over the Status Tray Plugin Item in Panel Preferences > Items tab.

And of course, you might want to change the colors to match your system colors.

Mellowbob · 2022-01-25 17:14:33

Before I continue to make changes to my gtk.css file I have to figure out why more than one "xfce4-panel --restart" basically borks my session. I get a popup saying (I hope this is correct since I can't copy/paste the message):

GDBus:Error.org.freedesktop.DBus.Error.ServiceUnknown: The name org.xfce.Panel was not provided by any service files.

One way I can generate this is:
Out comment the three wnck-pager setting lines
restart ... all works
re-enable the wnck settings
restart ... oh no, no panel to restart

At this point I need to log out of the session, remove the session files in a VT, log back in and all is well.

ToZ · 2022-01-25 23:24:18

Are you running the command as root? It will only work if you run it as your user account.

You might also try running it like this:

xfce4-panel -q
xfce4-panel

...to see if it makes a difference.

Mellowbob · 2022-01-26 00:51:59

Okay, deleting the panel with -q and restarting with no args works perfectly. I'm still not figuring why -r causes a crash? I've discovered that even when I make no changes at all to the gtk file it still crashes intermittently.

Your updated .css file works perfectly as well. Thanks!

BTW, I'm not running a root. Running as user. However, I find that if I do the -r command in alt-F2 window it works better than from a terminal. Odd?

Last edited by Mellowbob (2022-01-26 00:53:08)

ToZ · 2022-01-26 01:00:06

Mellowbob wrote:

BTW, I'm not running a root. Running as user. However, I find that if I do the -r command in alt-F2 window it works better than from a terminal. Odd?

Yes it is odd. Something is looking for the panel before the panel is up and running. That shouldn't be happening. Would be interesting to see if you can replicate this error in a new, fresh user account.

Mellowbob · 2022-01-26 22:00:48

ToZ wrote:

Mellowbob wrote:
BTW, I'm not running a root. Running as user. However, I find that if I do the -r command in alt-F2 window it works better than from a terminal. Odd?
Yes it is odd. Something is looking for the panel before the panel is up and running. That shouldn't be happening. Would be interesting to see if you can replicate this error in a new, fresh user account.

It is the theme. I switched from Clearlooks-Phenix to Greybird and it works just fine. I'm not in love with the first choice, really just a test, but I wonder if it would nice and/or possible to have list list of themes which work? smile

Xfce Forum

Sub domains

#1 2021-10-03 23:53:33

Panel Gradient

#2 2021-10-04 01:52:27

Re: Panel Gradient

#3 2021-10-04 02:35:19

Re: Panel Gradient

#4 2021-10-04 02:54:39

Re: Panel Gradient

#5 2021-10-04 03:34:39

Re: Panel Gradient

#6 2022-01-24 22:21:29

Re: Panel Gradient

#7 2022-01-24 23:47:00

Re: Panel Gradient

#8 2022-01-25 00:14:47

Re: Panel Gradient

#9 2022-01-25 02:29:23

Re: Panel Gradient

#10 2022-01-25 17:14:33

Re: Panel Gradient

#11 2022-01-25 23:24:18

Re: Panel Gradient

#12 2022-01-26 00:51:59

Re: Panel Gradient

#13 2022-01-26 01:00:06

Re: Panel Gradient

#14 2022-01-26 22:00:48

Re: Panel Gradient

Board footer