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

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.

image

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;
}
1 Like

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;
}
1 Like

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 -_-)

2 Likes

In this case you’ve got a few options. :tada:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.