How to hide buttons at side menu and right click

ℹ️ Support
1

Dear All, many thanks for that useful cloud server.
Is it possible to hide/deactivate several buttons at side and right click? If yes, then how? Picture attached below
Reason is a simplify interface: less button then less misclicks and problems for end users.
Please correct if I mismatched with theme, topic or any other.
Thanks in advance and best regards.
Nextcloud:29.0.5 Ubuntu:24.04 PHP: 8.1.29

hide buttons

2

Yes. You can hide each one of them with Custom CSS. You need this app:
App-Id theming_customcss
App-Name Custom CSS
Summary Adjust the Nextcloud theme with custom CSS
Categories customization
Repository GitHub - nextcloud/theming_customcss
Issue-Tracker Issues · nextcloud/theming_customcss · GitHub
Not-shipped (not included) App available in appstore
Appstore https://apps.nextcloud.com/apps/theming_customcss

Then you must find out the CSS selectors with the dev tools of your browser and hide them.

You could have find the answer in this forum with a query. I explained this a lot of times already. Maybe you find some helpfull examples → here ←

1 Like
3

Sorry for my noobs language, I’m not very skilled and think it would be better ask instead of fix. So please correct me if something wrong, it would be very helpful.

  • I have installed Custom CSS and find at Admin settings → Theming → Custom CSS a field where to place a code/text/string.
  • Then I have found some code for a button at browser in developer mode.
Спойлер

search_button

  • So string to hide this button will be like this?

.pendingshares .icon-clippy { display: none; }
.pendingshares {
pointer-events: none;
cursor: default;
}

4

Dear ernolf,
I have tried various versions of

li a[data-id="settings"] {
display: none !important;
}

where data-id was data-v-018c4203 or data-v-7387953c
If I make settings empty like “” side menu completely disappearing
I also try pendingshares / Pending shares / app-navigation-item-qcvqz
Unfortunately any combination of it does not work ((

I have found another way that’s working more or less:

li a[href="/apps/files/pendingshares"] {
display: none !important;
}

However empty buttons/balloons are still on place and it looks very weird (pic below).
bufer

Also I can’t apply that solution for a right click menu, because I don’t find href=“…” parameter.

I have read a dozen of similar topics, but did not find a clear or working solution. I would be very appreciate for any guide.

5

You must hide the complete div, not only its content.

This is the css to remove the items which you want to remove from the left bar and to let other elements fill up the free space:

li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="personal"] {
    display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="recent"] {
    display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="favorites"] {
    display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="sharingout"] {
    display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="deletedshares"] {
    display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="pendingshares"] {
    display: none;
}

… and this is the CSS to remove the items from the three dots/context menu:

li.action.files-list__row-action-favorite {
    display: none;
}
li.action.files-list__row-action-view {
    display: none;
}
li.action.files-list__row-action-edit-locally {
    display: none;
}

… or group everything together like this for better readability:

li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="personal"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="recent"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="favorites"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="sharingout"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="deletedshares"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="pendingshares"],
li.action.files-list__row-action-favorite,
li.action.files-list__row-action-view,
li.action.files-list__row-action-edit-locally {
    display: none;
}

By now, you should have recognized the pattern, you will be able to make any element disappear like that.

Just don’t give up too quickly and “think like the browser” :wink:

Much and good luck,
ernolf

1 Like
6

Amazing, looks so simple. Especial after several hours that was spent on search → try and repeat. A big field to grow up. I will try)
Is it comes from CSS language or in general coding experience?
NC specialist have left the team and it’s my new headache, hope temporary)
And thanks again for super-mega-support! :star_struck:

7

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