Hide the icon - reading view/editing view

Custom CSS & Theme Design
,
1

Hello, everyone. How can I hide the icon - reading view/editing view. I thought I could do it through Commander, but it didn’t work.

image
image317×128 1.11 KB

2

I guess you could set the CSS snippet. In the inspector, this …

visibility: hidden;

… hide the icon. You can play with that. You can hide it everywhere or make custom, note-related snippets.

Cheers, Marko

3

thanks for the answer, but I don’t know html/css well

Now I know that the class that contains this icon is called .view-actions, and the icon class itself is called clickable-icon view-action, but when I write snippets, like:

.view-actions .clickable-icon.view-action {
display: none;
}

I get all the elements disappearing, that is, it hides the entire `.view-actions’ class

4

Good point! Let’s try to “attack” it via aria-label, like this:

```css
button[aria-label*="Current view"] {
  display: none !important;
}
```

Cheers, Marko :nerd_face:

EDIT: Do not know the name if Obsidian is in another language!

2 Likes
5

Marko’s snippet works great so you could go with that.

Another option is using :nth-child(n), e.g.

body:not(.is-mobile) .view-actions .clickable-icon.view-action:nth-child(2) {
    display: none;
}

It’s completely unnecessary, but I use a variation of this in a few of my vaults and change it around occasionally depending on my mood. :sweat_smile:

[data-mode='source'] .clickable-icon.view-action:nth-child(2) {
    background-color: orange;
    border-radius: 6px;
    text-decoration: none;
    padding: 2px 4px;

    & > svg { 
        display: none; }
    &::before {
        content: '👽';
        padding-inline: 1px; }    
}

IMG_9529
IMG_9529543×184 19.5 KB

Screenshot 2025-04-12 at 9.09.54
Screenshot 2025-04-12 at 9.09.54254×150 854 Bytes

2 Likes
6

I didn’t think about :nth-child(n), which is a great idea! I’m using it often, but I’m always afraid that something will shift the position of an element/child. Especially where there are community plugins involved :smile:

image
image406×129 13.4 KB

Maybe a bad example, but just the first image with an example after searching for “toolbars” plugins.

I know this is not just for the show, so I apologise for the personal question … but

… what is the reason behind this :alien:!! :smile:

And a question for @Gribdian (just wondering for learning purposes): Why would you want to hide this?

Cheers, Marko :nerd_face:

1 Like
7

I started using Obsidian for programming. I really need code highlighting, so I use the plugin. But none of the plugins for code highlighting work in the reading view, because of a different rendering implementation (probably). Therefore, since I don’t use reading view, I don’t need its icon.

1 Like