Hide buttons in the editor?

There should be an option to hide the buttons in the editor - if you know your shortcuts this might give you valuable space - especially in the browser on a notebook screen.

I got this idea from @schmidhauser who posted it on github.

As far as I see this does not exist yet? If not, maybe this is interesting for @hengiesel?

2 Likes

@kleinerpirat’s CSS Injector addon will let you hide the buttons, though not so conveniently as with a shortcut. You can even target the specific buttons whose shortcuts you have learnt and leave the rest.

You’ll probably need the WebView inspector addon to get the css targetting data.

In the new Editor code, the shortcuts are created along with the buttons, so not rendering the toolbar at all would also mean no shortcuts.

Maybe something more feasible would be to make the toolbar collapsible?

2 Likes

Couldn’t we theoretically hide the button div in the DOM, while retaining the Svelte component (and thus the shortcut)?

1 Like

I just wrote a simplistic add-on that allows you to hide anything in the editor (that isn’t inside a shadow-DOM): Hide editor elements (by id, class, CSS selector) - AnkiWeb

(By default, it hides the inline- and blockFormatting button groups. Haven’t tested on prior versions, only dev build.)

4 Likes

Can you tell me please how to configure it to hide three list buttons and attach pictures and record audio buttons?

Config:

{
    "classes": [],
    "ids": [
        "blockFormatting"
    ],
    "selectors": [
        "[title^='Record audio']",
        "[title^='Attach pictures/audio/video']"
    ]
}

I just updated the add-on for 2.1.50+.

2 Likes

Thank you very much for update.
I forgot to ask for Latex / Mathjax group. Please can you help?

This makes the config a bit simpler, because all of them are under the button group #template:

{
    "classes": [],
    "ids": [
        "blockFormatting",
        "template"
    ],
    "selectors": []
}
1 Like

Adding "template" also hid </> icon that allows to edit html. I’d like to keep it.

Sounds like you’re using an Anki version below 2.1.45. You can use the same approach as

and add the Latex / MathJax button under “selectors” using the tooltip that’s displayed on hover.


For further info, use https://www.w3schools.com/cssref/css_selectors.asp.

Now I have it like this:


{
    "classes": [],
    "ids": [
        "blockFormatting"
    ],
    "selectors": [
        "[title^='Record audio']",
        "[title^='Attach pictures/audio/video']",
        "[title^='Latex / MathJax']"
    ]
}

and I am on Anki Version ⁨2.1.49 (dc80804a)⁊, Python 3.8.1 Qt 5.15.1 PyQt 5.15.1.
And it shows both Fx and </> icons. Adding "template" hides both icons.
I am forced to use this version because of other add-ons.
There is only tooltip for </> but no for Latex / MathJax.

Sorry, I didn’t remember correctly when that HTML editor button was removed.
This selector will hide the buttons you want to hide:

#template > .btn-group > :not(#cloze):nth-child(-n+4)

Explanation: nth-child(-n+4) selects the first four buttons, but we don’t want to hide the cloze button which is in-between the recording- and MathJax buttons, so we use :not(#cloze) to exclude it from the list.

Please note that the selector might have to be adjusted if an add-on inserts its button into the #template group.


To not further bloat this thread with questions regarding my add-on, please dm me instead if you need further assistance.

1 Like

I could remove some buttons from the Anki editor, But I’ve tried this to hide this top bar (Front), But I couldn’t do that.

{
    "classes": [
        "label-container svelte-51o1xe"
    ],
    "ids": [],
    "selectors": []
}

Could you please help me do that if possible? Thanks

I don’t remember exactly how I implemented the class selection, but I might not have included support for space-separated class strings. You could try removing the svelte-51o1xe or moving the whole string to the selectors array instead (like “.label-container.svelte-51o1xe”).

I’ve hidden all the elements, But sometimes they go back to the way they were (shown).
Do you know what the problem is?

  • This is my config :
{
    "classes": [
        "sticky-container  svelte-1lvjgme",
        "container svelte-14e7rtp container-fluid"
    ],
    "ids": [],
    "selectors": []
}
1 Like

I have tried It on Anki V 2.1.65 + But It Doesn’t work. This is my this is my configuration :

{
"classes": [
    "sticky-container svelte-1lvjgme",
    "container svelte-14e7rtp container-fluid",
    "sticky-container d-flex svelte-1lvjgme",
    "floating svelte-oyrkgl",
    "popover svelte-13br6di dark",
    "button-group-item svelte-1wfg5gy",
    "editor-toolbar svelte-1jmvn33",
    "horizontal-resizer svelte-a9irxb",
    "tag-editor svelte-14r83e2",
    "collapse-label svelte-1hjb121",
    "tag-editor svelte-1abeqln",
    "collapse-badge svelte-1u1j1u5",
    "collapsible svelte-19cn6dv full-hide measuring"
    ],
"ids": [
      "blockFormatting",
      "template"
],
"selectors": []
}

Please any help to hide or delete them permanently !