Arch Linux

Mikicrep

Member

Registered: 2023-07-13

Posts: 16

Website

xfce4 remove background from panel applets

https://i.imgur.com/ybDawGH.png
top left apple icon has no background, but it still shows with it
time. sound. show desktop, dock items have background
network manager applet for some reason has no background

how do i make background transparent

eda2z

Member

From: Woodstock, IL

Registered: 2015-04-21

Posts: 71

Re: xfce4 remove background from panel applets

I used this solution:

https://docs.xfce.org/xfce/xfce4-panel/ … rent-panel

Mikicrep

Member

Registered: 2023-07-13

Posts: 16

Website

Re: xfce4 remove background from panel applets

I used this solution:

https://docs.xfce.org/xfce/xfce4-panel/ … rent-panel

but its panel only, i need help with applet background

toz

Member

Registered: 2011-10-28

Posts: 513

Re: xfce4 remove background from panel applets

Try something like this in ~/.config/gtk-3.0/gtk.css (create the file if it doesn't exist):

/* make all panel buttons transparent */
    .xfce4-panel.background button,
    .xfce4-panel.background button.flat,
    .xfce4-panel.background button:active, 
    .xfce4-panel.background button:hover, 
    .xfce4-panel.background button:active:hover
    {
	    border-color: transparent;
	    background-color: transparent;
	    background-image: none;
	    color: #fcfcfc;
	    box-shadow: none;
	    transition: none; 
	    text-shadow: none;
    }

...and restart the panel for it to take effect:

xfce4-panel -r

Mikicrep

Member

Registered: 2023-07-13

Posts: 16

Website

Re: xfce4 remove background from panel applets

```
[14:15][mikicrep@mikicrep-pc] | /home/mikicrep% cat .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;
   background-color: transparent;
   //opacity: 80%;
}

.xfce4-panel.background {
  background-color: rgba(0,0,0,0.0);

  .xfce4-panel.background button,
  .xfce4-panel.background button.flat,
  .xfce4-panel.background button:active,
  .xfce4-panel.background button:hover,
  .xfce4-panel.background button:active:hover
  {
    border-color: transparent;
    background-color: transparent;
    background-image: none;
    color: #fcfcfc;
    box-shadow: none;
    transition: none;
    text-shadow: none;
  }```
Result: still same as before

Mikicrep

Member

Registered: 2023-07-13

Posts: 16

Website

Re: xfce4 remove background from panel applets

Try something like this in ~/.config/gtk-3.0/gtk.css (create the file if it doesn't exist):

/* make all panel buttons transparent */
    .xfce4-panel.background button,
    .xfce4-panel.background button.flat,
    .xfce4-panel.background button:active, 
    .xfce4-panel.background button:hover, 
    .xfce4-panel.background button:active:hover
    {
	    border-color: transparent;
	    background-color: transparent;
	    background-image: none;
	    color: #fcfcfc;
	    box-shadow: none;
	    transition: none; 
	    text-shadow: none;
    }

...and restart the panel for it to take effect:

xfce4-panel -r

reply is before this post, i forgot to tag you

toz

Member

Registered: 2011-10-28

Posts: 513

Re: xfce4 remove background from panel applets

   //opacity: 80%;

I don't believe that "//" is a valid comment indicator in css - use "/* */" blocks instead.

}```

Maybe errant backticks in your css file? Or possibly your using an incorrect indicator for code blocks. Parsing errors in gtk.css files can lead to the whole file not being properly processed.

Try removing the line with the double-backslashes and restarting the panel. If it still doesn't work, does adding the following snippet remove the background from the clock applet:

#clock-button {background: transparent;}

...and the whiskermenu?

#whiskermenu-button {background: transparent;}

Last edited by toz (2023-10-26 00:21:17)