Is it possible to give the XFCE taskbars/panels rounded corners?

mykai · 2021-08-16 04:05:37

There are plenty of themes that make the top corners of windows rounded, but I'm not finding any that make the panel corners rounded (assuming the panel in question is in "shrink to fit" mode of course).

Is it possible to theme the panels in this way?

Last edited by mykai (2021-08-16 04:05:56)

ToZ · 2021-08-16 10:37:50

You can use a tweak like this in ~/.config/gtk-3.0/gtk.css:

.xfce4-panel {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

...adjust the values to suit and restart the panel for it to take effect:

xfce4-panel -r

Note: adding transparent separators to the front and back end of the panel help to prevent widget overlap.

Skaperen · 2021-08-16 17:01:08

is the xfce4-panel command a new thing in 4.16?

ToZ · 2021-08-16 17:26:41

Skaperen wrote:

is the xfce4-panel command a new thing in 4.16?

It's a GTK3 tweak, so it would have been available since 4.14 - when the switch to GTK3 happened.

mykai · 2021-08-16 22:37:55

I guess I should have been more clear, is there a way to target the panels separately? Are the different panels targetable using nth-child tricks? (I'm waiting to install the gtk inspector thing while I figure out my gradients bug)

ToZ · 2021-08-16 23:09:46

mykai wrote:

I guess I should have been more clear, is there a way to target the panels separately? Are the different panels targetable using nth-child tricks? (I'm waiting to install the gtk inspector thing while I figure out my gradients bug)

Unfortunately no - separate panels are not distinguishable between each other with respect to CSS.

Edit: it is somewhat possible. See post #11 below.

Last edited by ToZ (2022-06-12 16:32:18)

mykai · 2021-08-18 01:31:33

Hmmm..... CSS is fairly powerful though (assuming gtk is using the full thing and not some stripped version). How are the panels positioned internally? Like, do they get CSS position attributes attached to them at all? Can you target *[position="absolute"][top="123px"] ?

Obviously this kind of hard coding is super fragile and would break if you ever moved the panel or anything, but for my private local use I can deal with that.

ToZ · 2021-08-18 02:06:29

Panel positioning is managed through the xfconf backend. Have a read through this thread where that setting is discussed.

mykai · 2021-08-18 02:20:09

OK thanks. Now that I figured out the gradient issue I'll try to start messing with this. Thanks for all your help in everything btw.

Tio · 2022-06-12 13:46:50

Is it possible to only target 1 panel? Like panel 1? I tried but could not figure how.

ToZ · 2022-06-12 14:14:52

If you have panels with different orientations (horizontal/vertical/deskbar), you can use the ".horizontal" or ".vertical" or
.deskbar" style class to target them:

.xfce4-panel.horizontal {background-color: red}
.xfce4-panel.vertical {background-color: green}
.xfce4-panel.deskbar {background-color: blue}

(tested on Xfce 4.16).

Tio · 2022-06-13 23:27:29

Thank you very much!

uibits · 2022-07-02 14:42:37

There are strange artifacts that appear 'under' the rounded edges when buttons in the pane are pushed, fairly randomly. Is this what is meant by "widget overlap" above? Is there a way to not have these artifacts appear without adding extra padding (in the form of "transparent separators" mentioned above)?

The artifact that appear are mostly a different color to the panel itself.

---

To try and see what was happening, I made the corner radius really big. The desktop background appears to become part of the panel such that when another application is below the panel, the desktop background "corner of the panel" appears *above* that application. It looks buggy.

Skaperen · 2022-07-02 22:42:38

are these transient artifacts that appear suddenly then go away, around the time some action is performed, such as pressing a button that is updated on the screen to show that it is being pressed? if so, perhaps it is caused by re-rendering the layers of objects and the video display scan catches it during the re-rendering. i would imagine this is more likely if any objects have an alpha channel like 1% or 99% (or 254 or 0xfe) since that will certain need a full re-render if it appears changed. or a full re-render could be happening. it would be interesting if any screen video capture (i don't know how to do it but i know some people have done it) captured it.

Nili · 2022-07-03 12:37:17

it's not related to the last posts, but i wrote it as a thank you to ToZ as i was looking for a way to do it.

The above code gave me the chance to do topside rounded on the 2nd panel.

/* XFCE bottom taskbar/panel topside rounded */
.xfce4-panel.horizontal {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px
}

Last edited by Nili (2022-07-03 12:46:58)

Tio · 2022-07-03 13:08:14

The main issue with doing round corners this way, is that it will affect more than 1 panel. This will get very weird the more panels you have. I submitted a proposal to the XFCE dev team to add the ability for round corners for panels here https://gitlab.xfce.org/xfce/xfce4-panel/-/issues/597 if anyone is interested to follow.

Nili · 2022-07-03 20:08:12

Interesting, if there are possibilities for adjustments on the panels, they are welcome tor me. I see rooms for features on the panels like rename, opened apps indicator, blurry panels. Yes i am aware there are 3rd parts plugins or code that do those things. I have tested very shortly xfce-blur-effects but there were some contradictions with shadows things explained by the author or seen by myself. So, if things of rounded, blur, or apps indicator were given a green light on the future, I would love to use em as part of Xfce.

My first top panel is not affected by the topside rounded on the 2nd panel.
If i were to take the ToZ code to gtk.css, i would had both top and down rounded, but i wanted only panel 2 to the topside rounded, whereas panel 1 i wanted untouched. So, i made some short adjustments which i posted a little above.

Maybe the GTK3 Theme Orchis helped me doing so, I haven't done other tests on other themes so far, but I will do it soon to see how it varies from themes to others.

uibits · 2022-07-10 15:07:31

Hi I had to make the panel semi-transparent to get rounded-edges on it to behave.

/* Rounded edges for panel */
.xfce4-panel.horizontal{
  border:0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background-color: rgba(27,34,36,0.92); /* semi-tranparency is only known way to have 
                                              the border-radius work consistently. */
}
#XfcePanelWindowWrapper{
  background-color: rgba(27,34,36,0.92); /* this does the Whisker menu button and tray background. */
}
#whiskermenu-button{
  background-color: transparent;         /* whisker menu button has two background layers */
}

I don't really care much to have a semi-transparent panel so if someone knows how to do it keeping an opaque panel, that'd be cool.

Sasquach69 · 2023-05-04 14:35:50

When I round the corners with the prescribed css. I often get the corner artifacts in a different color. If I unlock the panel and move it around quickly. That background rectangle moves too but not in sync. I can hide it temporarily by resizing the panel but this does not last. It seems like there is a rectangle background or layer working against the pure rounding of the css. The background "corners" seem to pick random colors for me. My panel is set for dark grey. I have used the seperators at the ends which works for the top layer, but has no baring on the "background box" I am glad to see I am not the only one with this issue and it isnt the end of the world, but a solution would be helpful. What I have tried: going to the theme folder and commenting out the line about backdrop. My current theme is Grebird-dark (but is does the same in other themes). Sometimes, like now, the corners are even blinking.
http://ss11.sytes.net/public/xfce4.panel.artifact.jpg

Last edited by Sasquach69 (2023-05-04 15:13:12)

RaySurf · 2024-10-28 09:20:46

this thread is brilliant
all the info helped

Xfce Forum

Sub domains

#1 2021-08-16 04:05:37

Is it possible to give the XFCE taskbars/panels rounded corners?

#2 2021-08-16 10:37:50

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#3 2021-08-16 17:01:08

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#4 2021-08-16 17:26:41

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#5 2021-08-16 22:37:55

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#6 2021-08-16 23:09:46

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#7 2021-08-18 01:31:33

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#8 2021-08-18 02:06:29

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#9 2021-08-18 02:20:09

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#10 2022-06-12 13:46:50

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#11 2022-06-12 14:14:52

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#12 2022-06-13 23:27:29

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#13 2022-07-02 14:42:37

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#14 2022-07-02 22:42:38

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#15 2022-07-03 12:37:17

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#16 2022-07-03 13:08:14

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#17 2022-07-03 20:08:12

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#18 2022-07-10 15:07:31

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#19 2023-05-04 14:35:50

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

#20 2024-10-28 09:20:46

Re: Is it possible to give the XFCE taskbars/panels rounded corners?

Board footer