Change desktop context menu background

General Help
1

How can I change the background color of the desktop context menu? I found the Zorin Desktop Icons extension, and the only code found in the stylesheet.css is this:

.file-label, label.file-label:backdrop {
    text-shadow: 0px 1.5px 3px rgba(0,0,0,0.85);
    color: white;
    font-weight: 600;
}

.file-label-dark, label.file-label-dark:backdrop {
    text-shadow: 0px 1.5px 3px rgba(255,255,255,0.85);
    color: black;
    font-weight: 600;
}

.file-item {
    padding: 2px;
    border-radius: 8px;
}

.file-item-hover {
   background-color: rgba(238, 238, 238, 0.2);
}

.not-found {
    color: rgb(255, 0, 0);
}

window.desktopwindow {
    background-color: rgba(0, 0, 0, 0);
}

window.testwindow {
    background-color: rgba(0, 0, 0, 100);
}

And if I try to guess the css selector for the context menu and add it, the extension stops working. Any help is appreciated :slight_smile:

2

The problem is that the context menu is a global UI element, so you cannot just change it only for the desktop. At least, as far as I know. But the selectors that I use are:

menu,
.csd .menu,
.csd .dropdown,
.csd .context-menu {
   background-color: red;
}

BTW, since these are global anyway, it's probably best to make these changes in ~/.config/gtk-3.0/gtk.css which is a more standard location.

1 Like
3

Thank you so much, it works! Do you also happen to know the selector for the context menu separators?

4

After booting up the machine just now to check again on this, my styles were only applying to the context menu from the desktop... so it looks like you can actually do this, depending on where you write the CSS rules.

The context menu separators I found these work, which seem to work:

.csd .menu separator.horizontal {
   background-color: red;
}
1 Like
5

Thank you! I'll try it out soon. Is there a way I can look up these selectors without having to ask somebody like this? I know about looking glass and GTK inspector, but they haven't been very useful in this case.

6

Unfortunately I only know of GTK inspector. It does take some time to find the right selector, and I'm not always successful. It's a shame there's no good documentation on this... unless I'm missing it entirely :smiley:

And by the way I think the previous snippet only works on some menus, but not all... Try some combination with these ones, I'll try to test them tomorrow:

separator.horizontal,
.csd .menu separator.horizontal,
.csd .popup separator.horizontal {
   background-color: red;
}
1 Like
7

Actually for me only separator {} worked for the desktop context menu. And you know, the menu that pops up when you right - click files and folders on the desktop.

1 Like
8

Oh, maybe that's all it takes then to reset the styles. Well, don't forget to share some screenshots of you desktop when you're done!

1 Like
9

Done!

10

How to achieve this look

Other than the Blur my Shell extension (blurs the taskbar, overview, screenshort background..) I used an extension called Custom Accent Colors, it adds that feature to gnome shell version 43 and 44. Now, my stylesheet is a bit of a mess since I didn't get to optimize the code, I just slapped on my custom styles to the bottom of the sheet, and also changed some stuff from the original code above it.

This extension just adds certain accent colors, I duplicated a folder from here:
/home//.local/share/gnome-shell/extensions/custom-accent-colors@demiskp/resources/

and then I added a background-image to 5 elements I think. I edited the image in GIMP, used a Guassian blur and lowered brightness by a lot, and that's pretty much it. I placed the image in this location:
/home//Pictures/Blurred-Backgrounds/Blur/

Download shell theme folder (the link will expire in one week, I'll think of something by then xd)

Extract the folder to /home//.local/share/gnome-shell/extensions/custom-accent-colors@demiskp/resources/

then use Gnome Tweaks or Zorin Appearance to set it, it's called 'Custom Accent Colors'.

Make sure you have a blurred image in this location, called 'blur.png': /home//Pictures/Blurred-Backgrounds/Blur/

and you need to insert your own username inside gnome-shell.css wherever the image is used:

image
image579×124 12.1 KB

This applies to most elements, except the opened window previews and desktop context menu, since these are Zorin's extensions:

Screenshot from 2025-07-13 18-04-28
Screenshot from 2025-07-13 18-04-28300×367 119 KB

Screenshot from 2025-07-13 18-18-19
Screenshot from 2025-07-13 18-18-19378×311 76.9 KB

To 'blur' window previews, modify stylesheet.css:
/usr/share/gnome-shell/extensions/zorin-taskbar@zorinos.com/stylesheet.css

with code:

.preview-container,
#preview-menu {
	border-radius: 10px;
	/*Modified*/
	  background-image: url("file:///home/<USER>/Pictures/Blurred-Backgrounds/Blur/blur.png");
  background-size: cover;
  background-repeat: no-repeat;
  	/*End of Modified*/
}

The classes are already used at the bottom of the file, just add the modified portion of it. And of course you will need sudo privileges to do this.

To 'blur' desktop context menu, modify:
/usr/share/gnome-shell/extensions/zorin-desktop-icons@zorinos.com/app/stylesheet.css

by adding this code:

menu,
.csd .menu,
.csd .dropdown,
.csd .context-menu {
     background-image: url("file:///home/<USER>/Pictures/Blurred-Backgrounds/Blur/blur.png");
  background-size: cover;
  background-repeat: no-repeat;
}

separator {
   background-color: rgba(255,255,255,0.15);
}
3 Likes
11

thank you a lot :wink:

1 Like