Hover box colour in explorer

[xue]

Things I have tried

Saw this post so tried adding below as a custom snippet:

.nav-file-title:hover,
.nav-folder-title:hover,
.nav-file-title-content:hover,
.nav-folder-title-content:hover{
color: black !important;
}

but it effects the text colour. I’ve used the developer tool, to try to drill down which element I need to include in the snippet but can’t figure it out. I read something online about a:hover in .css(?) but I’m noob to this type of thing.

What I’m trying to do

I would like to change the hover box colour to red (or some hex colour), so it’s red whilst hovering and also fixed/stays red on active note.

[Olondre]

You can use this snippet:

/* <<----------- Opened File with Red Background ------------->> */
	.nav-file-title.is-active {
		background-color: red;
	}
/* <<------ Hovered File with Red Background ------->> */	
	.nav-file:hover {
		background-color: red;
	}

[xue]

Thanks for reply. I made a new snippet copying your code the same, turned on the snippet, reloaded it, but it didn’t change the hover colour. I also tried incorporating it into a snippet (which is working) with just colour changes (heading etc), but still didn’t work.

edit (I’m using minimal theme)

[xue]

I found in the theme wasp there is an element that can be changed to alter the colour of the folder hover (see picture). However, I wasn’t able to write the .css as a snippet to get it to work permanently - or on my actual theme. I tried this but didn’t work:

/* Coloured folder hover */

.nav-file-title.is-active
.nav-folder-title.is-active, body:not(.is-grabbing) 
.nav-file-title:hover, body:not(.is-grabbing) 
.nav-folder-title:hover {
	background-color: #8d0000; 
	color: white; 
}

[ZenMoto]

This will do it (for the default theme):

/* hover + active background color */
.nav-file-title:hover,
.nav-file-title.is-active {
    background-color: red !important;
}

/* hover + active text color */
.nav-file:hover > .nav-file-title > .nav-file-title-content,
.nav-file-title.is-active > .nav-file-title-content {
    color: blue !important;
}

NOTE: You can probably remove the !important tags. I added them to ensure that nothing overrides this code.

(If not, it’s because your theme uses a different class selector.)

[xue]

Many thanks for your + Olondre’s help. After some testing it seems that the theme I’m using “minimal” uses hsla(var) so I had to find the “–items-related-to-explorer” to override the grey colour hover on the folders in the explorer. Using what you did before plus a bit extra for folders it’s now working. I’ve posted below for others who might be looking.

Snippet for both light and dark “minimal” theme to change hover + active files and folders:

/* opened file with red background */
.nav-file-title.is-active {
    background-color: #cc1a1a;
    }

/* hovered file with red background */	
.nav-file:hover {
    background-color: #cc1a1a;
    }

/* hovered folder with red background */
.theme-dark{
    /* file navigator */
    --nav-item-background-active: #cc1a1a;
    --nav-item-background-hover: #cc1a1a;
    --nav-item-background-selected: #cc1a1a;
}

.theme-light{
    /* file navigator */
    --nav-item-background-active: #cc1a1a;
    --nav-item-background-hover: #cc1a1a;
    --nav-item-background-selected: #cc1a1a;
}

I also found a quick work around to change the colour of all hover items on “default” theme. It DOES NOT work on the “minimal” theme, but did work on the “default theme” and was kinda cool to find, so might be useful to others looking to change the “roll-over” colour of executable items/buttons.

Snippet to change hover/roll-over colour of all executables/buttons.

/* change interaction background hover colour - default theme*/
body{
    /* Backgrounds */
    --background-modifier-hover: #cc1a1a;
    --background-modifier-active-hover: #cc1a1a;
}

Thanks again for everyones’ help.

[xue]

Thanks - added a bit extra for folders and now works. XD