Budgie Panel Theme

Can we use repeated svg / png images as a background for the panel ?
And can we change the foreground and background of the panel , because it is really hard to tweak the theme manually.

The panel currently uses gtk css theming.

To do more complex image based stuff can be done but only by changing code. Basically you would need to introduce Cairo based drawing of the panel.

If you are lucky, your theme should have a gtk-3.0 folder with a gtk.css file.
Prefer /usr/share/theme/nameoftheme/gtk-3.0 path (edit gtk.css with sudo) to ~/.themes/nameoftheme/gtk-3.0 or your theme won’t be applied to apps launched with superuser (synaptic, nemo).

If they opted for the gresource way, it’ll be more complicated to set up at first.

Here’s the part where I changed my panel color:

.budgie-panel {
transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
background-color: #2F343F;
color: #d8d0d0;
font-weight: 500;

Here’s one I found through an express search

.budgie-panel {
background-image: none;
background-color: rgba(0,0,0,0.9);

The fourth value of rgba sets the transparency level.

Note that there’s a background-image element, I’m not sure if it can be used to set an image as panel background though. I haven’t tried.

Here’s a great help for rendering colors and matching rgba with hex colors.

And don’t hesitate to use a color picker (e.g. gpick) if you need consistency or if you found your perfect color somewhere.


Yaaay, it worked out. A m a z i n g.


Please share the solution you have creatively made!

1 Like

So, I appended a class to /usr/share/themes/{{Current-Theme-Name}}/gtk-3.0/gtk.css :

.budgie-panel {
background-image : url(’…/panel-background.png’);

And the Image at /usr/share/themes{{Current-Theme-Name}}/panel-background.png is
Here, it is a transparent one, so it won’t be visible on browser, but works perfectly.

Note : Strong patterns get irritating after a certain time.
Credits for the pattern :https://www.heropatterns.com