Nemo toolbar element outlines

[johnsonmt01]

I like the Yaru look of having permanent outlines around toolbar elements in Nemo, as seen here:

https://www.omgubuntu.co.uk/2022/01/official-yaru-theme-for-cinnamon-desktop

How can I modify the gtk.css in Mint-YZ to create this effect?

[SebastJava]

To find and do some quick tests on these toolbar buttons, you should try the GtkInspector. It is a wonderful tool that does many things. I can't describe it all but the two things you will probably find most helpful here are:

• The top-left button to select an object. Then use the scrolldown menu under this button to see the CSS nodes and the CSS selectors.
• Click on the CSS tab to try some CSS mods and test your experiments instantly, "on the fly"

This means you need to install the libgtk-3-dev package. Yes, it is monstrously big, but it should be all okay. Find some documentation here: https://wiki.gnome.org/Projects/GTK/Inspector

Unfortunately, Control-Shift-D doesn't work with Nemo. You need to do

nemo --quit
GTK_DEBUG=interactive nemo

to open the Inspector on Nemo.

What!? It didn't work? Yes it did, but your Inspector is hiding in a window behind Nemo, just click and drag and you'll see :)

So, i just did a quick try and, as opposed to your question about your window borders, i was more lucky here. Using this wonderful Inspector, i quickly found the right combination:

toolitem button.flat.image-button {border: 1px solid red; }

I tried this directly, instantly in the Inspector, under the CSS tab. I didn't have to force refresh nor logout/login. Instant success:

Please note that i am currently quite busy so i suggest you first try https://forums.linuxmint.com/viewforum.php?f=211 if you have any other questions.

[SebastJava]

I forgot to mention: once you are satisfied with your tests on GtkInspector, the fast and easy way to go is to add your new CSS coding at the end of the gtk.css file. This way your coding will override the previous CSS codings.

And i guess your borders colors should be #bdbdbd, so, just place this line at the end of the gtk.css file:

toolitem button.flat.image-button {border: 1px solid #bdbdbd; }

[johnsonmt01]

Thank you for the details, your sample image is exactly what I'm trying to achieve. Unfortunately, the gtk.css coding you provided isn't working for me. This may be because I'm using Debian 11, which has Cinnamon 4.8.6.

If you could please describe the steps you used in GTK Inspector to discover the correct "toolitem" entry, I could try the same steps with my older version of Cinnamon.

[SebastJava]

Step by step

1. read about the GtkInspector: https://wiki.gnome.org/Projects/GTK/Inspector
2. apt install libgtk-3-dev
3. nemo --quit; GTK_DEBUG=interactive nemo
4. Use the top-left button to "Select an Object" (see screenshot ↑) EDIT: Using this pointer, click on the Nemo toolbar button to select it.
5. Try to choose enough CSS selectors to narrow-down your selection to all that you want, but no more. Try some tests with some more simple, generic things, such as button {border: 1px solid #bdbdbd; }. These tests can be made instantly in the GtkInspector, under the CSS tab. Note: You usually need to try many things, many times before success. Sometimes, just removing a space " " can make the difference. Find all about the CSS selectors in https://www.w3schools.com/cssref/css_selectors.php
6. Once you find the CSS that works, copy-paste it at the end of the gtk.css file. Save and then force refresh with a simple switching back and forth in the GUI or CLI: gsettings set org.cinnamon.desktop.interface gtk-theme 'Mint-Y'; sleep 0.5; gsettings set org.cinnamon.desktop.interface gtk-theme 'Mint-Yz-Base'

P.S.: All this is just some quick "hacking". The "good school" procedure is to go with the Sass compiling, as somewhat briefly summarized in https://github.com/SebastJava/mint-yz-theme/blob/master/Do-It-Yourself.md You could start with some simple "fun experiments", using the Widget Factory, as part of the gtk-3-examples package.

---

A more generic, englobing example with the Widget Factory:

button.flat.image-button {border: 1px solid red; }

[SebastJava]

EDIT on line 4.

[johnsonmt01]

It worked! Thank you for the directions. After experimenting with GTK Inspector, and testing different versions of CSS, I added the following to gtk.css:

toolitem .image-button {border: 1px solid #bdbdbd; }
toolitem .image-button:disabled {border: 1px solid #bdbdbd; }

This is exactly the result I was hoping for; thanks again!