How to replace Activities word with any image in Gnome Shell

By
M. Zinoune

For this tutorial I will use Gnome Shell 3.4 and its default theme, but this will work also on 3.2 and pretty much on any theme that doesn’t already use an
image for Activities. You will need user-theme extension, gnome-tweak-tool, an image and of course GNOME 3.2+.

.

.

First we copy default shell theme to our local themes folder.
Shell theme lies on

 /usr/share/gnome-shell/theme/*

and we copy these files to

 ~/.themes/mydefault/gnome-shell/

We run gnome-tweak-tool and we choose “mydefault” theme. Then we open gnome-shell.css inside. ~/.themes/mydefault/gnome-shell/

On line ~331 we will find the css responsible for the panel. We modify it to look like this:

….....

/* Panel */

#panelActivities {
border: none;
background-image: url("gnome.png");
background-position: 5px 4px;
width: 63px;
height: 24px;
color: rgba(0,0,0,0.0);
}

#panelActivities:hover {
transition-duration: 300;
background-image:  url("gnome.png");

}
#panelActivities:active,
#panelActivities:overview {
background-image:  url("gnome.png");
}

#panel {
    background-color: black;
    font-weight: bold;
    height: 1.86em;
}

…......

gnome.png is our example image (you can replace it with whatever) and you should put it inside gnome-shell directory.

If you will use another image don’t forget to change the dimensions on

#panelActivities

width: 63px;
height: 24px;

to match your image dimensions. If you need to adjust the height of the panel change the

#panel {
 ….
 height: 1.86em;
 }

As you see above, we can use 3 different images for the 3 different states
of shell activities.

That’s all, Hit

Alt+F2
 "rt"

Enter

Well quite simple 🙂