How do I hide some plugin icons on the sidebar using only CSS?

[noob-sidian]

What I’m trying to do

I’m trying to make it so some plugin icons on the sidebar are hidden since I never have a need to click them but I also don’t want to disable the plugin because it works in the background.

I’m trying to hide the Custom sort and the Templater buttons.

I want to do this using just CSS because I want to keep my plugins to bare minimum.

Things I have tried

I tried the following to no avail.

div[aria-label='Toggle custom sorting'],
div[aria-label='Templater'],
{
	display: none;
}

[ariehen]

You can right click in the lower / open space of the ribbon and uncheck the ones you want to hide.

You can also arrange the order and hide/unhide them in Settings > Appearance > Ribbon menu -> Manage.

The CSS to hide them would be:

.clickable-icon[aria-label='Templater'],
.clickable-icon[aria-label='Toggle custom sorting'] {
    display: none;
}

[noob-sidian]

Oh wow, I never thought about right clicking. That’s a whole lot easier than messing with CSS. Thanks @ariehen

Also my original CSS apparently worked fine. The reason why the icon wasn’t hiding was because I forgot to re-enable the CSS in the settings (whoops -_-)

[ariehen]

In this case you’ve got a few options.