Help customizing XFCE theme?

[zenzen]

Hi there folks,

This question doesn't really have much to do with Zorin OS, but I'm hoping some of you could help me a little CSS edit that is bothering me.

I'm currently using Debian 12 with XFCE 4.18, and I installed Catppuccin's GTK theme as I've used it before on Gnome and I really like it. The only issue is the rounded corners that appear on certain context menus, like when I right-click some file or icon:

I know why this is happening (it's because I disabled XFCE's default window manager as I'm using i3) but I don't know how to make the corners not rounded. Specifically, I don't know which CSS selector I need to use to target this.

Any ideas on how can I find this? Thanks!

EDIT: I found and tried the solution mentioned here, with no luck:

Xfce, GTK and Qt: remove rounded corners using css

[applecheeks37]

So just going by this:
xfce:xfce4-panel:theming [Xfce Docs]
And specifically this part here:
Quit the current xfce panel process:

xfce4-panel -q

Start the panel process with GtkInspector debugging enabled (Note: This will load an inspector window for each individual panel plugin):

GTK_DEBUG=interactive xfce4-panel

I haven't tried that, but it might possibly give you a selector you can use? I haven't touched the CSS myself in a long time, so I might take a longer look later. Trying to find the specific selector seems hard to find even in their own docs.

I'm manually looking through the CSS of the theme you're using, looking for anything with border-radius. Unfortunately there's a lot, but a few stick out to me:
decoration
.csd.popup decoration
tooltip.csd decoration
messagedialog.background.csd decoration

These seem to all be listed under the "Window Decorations" portion, so my assumption is "decoration" applies to everything, and possibly one of the other ones has something to do with it? Unfortunately I can't test anything at work right now lol. There's also a lot of "lists" that have radius set, but i'm unsure on what lists they affect.

[Aravisian]

In addition, you may want to include the classes menu, .menu, .csd menu

[zenzen]

Yeah, I glanced over it as well but there are far too many places to check so I thought maybe someone had already answered this. Even on the XFCE forums this is a very common question with no answer

Using the GTK inspector I see that I can apply CSS rules on the fly, and I narrowed it down to the menu element as recommended by Aravisian. You can see the context menu is now perfectly sharp:

Interestingly, when I save the changes in both the gtk.css and gtk-dark.css files, they don't seem to work. I know these are the files because other changes, like making the panel red or something obvious like that, work fine.
Even using !important or writing the rule at the bottom of the file doesn't work. I used both the gtk-3.0 and gtk-4.0 to be sure...

Thanks for the help by the way, this alone is already a big improvement!

[zenzen]

Turns out that this has been solved already. I only now thought to look in the repository, even though it's been archived.

The solution:

menu,
.csd .menu,
.csd .dropdown,
.csd .context-menu {
    border-radius: 0px;
}

Thank you both for the help!

[Ponce-De-Leon]

And do you have to change the Theme File itself or create with this an extra .css File?

[zenzen]

You can just change the CSS file for that theme in particular. Note that some themes, like Catppuccin, come with different colors, which means there are that many files to change so that it works evenly no matter the color.

In my case the file is located at:

~/.local/share/themes/catppuccin-frappe-yellow-standard+default/gtk-3.0/gtk.css