How to change click style?

[tanvir]

Using Zorin OS 16 Lite here (Xfce, Thunar). When clicking any items in File manager & Desktop, it looks ugly with shadow and rounded rectangular. Can i change it??

[Aravisian]

That is .view:selected, .view text:selected:focus and such.
You can change the value of the color of background property.

[tanvir]

How to find and edit this?

[Aravisian]

Which theme are you using?
Locate that in your Appearance settings. Then open /usr/share/themes/That-theme-Folder...
Let's say it is Zorin-purple-dark:
/usr/share/themes/ZorinPurple-Dark/gtk-3.0
Open the .css file and set that aside for a moment.
in your home config directory, may have already made a custom css file already on another thread. If not, make one now and name it gtk.css and place it in ~/.config/gtk-3.0
Open that up and sidle it alongside of your open Zorin .css file. Your home ~/.config/gtk-3.0/gtk.css file is given First Priority of reading by the system. Changes made there will have effect before changes made in the /usr/share/themes/.../gtk.css file. Plus, it allows a Safe Place you can modify or experiment at will, without risking irretrievable data loss to the actual theme in /usr/share/themes.

Ctrl+F in the Zorin .css and search for the above;
.view text:selected
The .view property is the property of the inner widget window. It is pretty broad.
The .view text covers the text in the inner widget window.
In your case, you wish to change the background color of when objects in the view are selected (clicked on).
You can use background or background-color. Either will work in this case.
In the .view selection, most prefer to use alpha transparency - rgba, rather thana solid hex color. Go with what feels right to you.
Let's say you want it to be White. Hex is #FFFFFF. rgb is rgb(255,255,255) and... rgba is rgba(255,255,255,1.0)
We can lower the alpha to increase the opacity:
rgba(255,255,255,0.1)

You can use a color picker to find the hex codes you want or the rgb codes you want. rgba is just the rgb with an alpha you add.
There are many available, the Widget Factories both include them... or you can just google #ffffff and a color picker will be presented on your screen.

Experiment with designs and colors you like, using the Original opened Zorin-Theme gtk.css as a reference for the classes and properties.
You can change the radius with border-radius or even use a background-image if you want. Or a border-image.
Some properties to try out:

     color: blue;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
     background-color: grey;
     background-image: linear-gradient(to bottom, #fff, #000);
     background-size: auto;
     background-position: center;
     border-image: none;
     border-radius: 14px;
     border-top: 1px solid #000;
     border-left: 1px solid #000;
     border-right: 1px solid #101010;
     border-bottom: 1px solid #fff;

Background-color is the one you want. color refers to Text Color.

Gtk: CSS Properties

[Storm]

I do prefer color picker when editing gtk.css files. It's recommendable.

[tanvir]

I tried, but couldn't do it. There is a lot of .view text:selected. I don't need to change the color. As you can see when selected the qbittorrent logo on the desktop became black, the title has a shadow and there is border radius. I want that the logo will not get the black shade, no radius, and no shadow for text.
Again for the Picture folder in the file manager, I want to remove the corner radius when any file or folder is selected in the file manager (Thunar).

[Aravisian]

So you need the Border Radius property and the text shadow property.
Can you try:

.thunar .view:selected {
    border-radius: 0px;
    color: #101010;
    text-shadow: none;
}

Adjust the values as needed.
Be sure to save the changes in gtk.css, then log out and in to see the effect.

[tanvir]

It did changed inside Thunar, But the desktop is still the same.

[Aravisian]

Add the following:
(Sorry to take a moment... I do not use Desktop Icons on Zorin Lite so I had to stop and learn how to do this real quickly...)

XfdesktopIconView.view {
  background: none;
  color: #fff;
  border-radius: 0px; }
  XfdesktopIconView.view:active {
    background: rgba(255, 255, 255, 0.5);
  border-radius: 0px;
    text-shadow: none; }
  XfdesktopIconView.view .label {
    text-shadow: none; 
}

Adjust all values as needed.

Also... I learned a New Thing.
Tap ctrl+alt+esc and then click an open area of the desktop to refresh it, checking changes made in the .css without needing to log back in.

Thanks to Toz of XFCE forums for providing this info.

[tanvir]

It worked. Thanks.