Sunday, June 12, 2011

Gnome3 Customization | Change Panel Colour n Transparency

The default opaque panel on top of gnome3 is like eating milk n chala curry.
The /usr/share/gnome-shell/theme/panel-border.svg is the main file to be changed to change its appearance.

Now wake the gimp expert in you

open the file /usr/share/gnome-shell/theme/panel-border.svg in gimp

must be root to do it

sudo gimp /usr/share/gnome-shell/theme/panel-border.svg

modify the file as you wish

here i deleted the whole image

ctrl + a

then took the brush tool choose colour black (default)

set Opacity to 52

made the brush image large enough to cover the full image

painted once in the image

then choose orange colour,

set Opacity to 100

painted a line in the bottom, this will appear as the bottom border.

saved it as


because in gimp does not support saving a file in .svg format.
Also i don't know whether svg can handle alpha channel.

now the pic will look like as shown

Now open up the file /usr/share/gnome-shell/theme/gnome-shell.css


goto the section

#panel {
    color: #ffffff;
    background-color: black;
    border-image: url("panel-border.png") 1;
    font-size: 8.5pt;
    height: 1.86em;

change the line border-image: url("panel-border.svg") 1;


border-image: url("panel-border.png") 1;

save the file

reload the gnome3 desktop by hitting


then enter


hit Enter

Happy Hacking


  1. Thanks for this tip.

    When I do this though the unity bar with file, view, go, bookmarks, help is displayed behind the gnome panel.. How do I remove the unity panel?


  2. That’s what I was looking for. I am talking about all topics bundled in this blog. They all are really very useful for me as well as for my team. We are definitely going to use its highlighted information.ฟิลเลอร์