Theming: Custom CSS

🍱 Features & apps
1

A very cool app to hide items such as the remember login checkbox or the contacts menu – without editing the original CSS files.

Thanks @juliushaertl! :+1:

https://apps.nextcloud.com/apps/theming_customcss
https://github.com/juliushaertl/theming_customcss

5 Likes
2

ya… i thought so, too. until i remebered that i can’t code in css :frowning:
any examples for like hiding contacts menu or remember login? or even sign in without chat?

3 
.remember-login-container {
	display: none;
}
#contactsmenu {
	display: none;
}

Disabling in config.php would of course be the better solution.

1 Like
4

Do you want this as default action?
This should be dine with a setting in the app.

1 Like
5

@anon99252149

thanks for the hints. i wouldn’t have know any of those, myself.

as for the sign in without chat i’m gonna ask if yomeone has an idea about it… :slight_smile:

6

I am new using NextCloud and following the topic, I would like to hide/disable the “search menu” (header top right side next to contactsmenu) and “Files>SETTINGS” menu (bottom left hand side) but only for Groups/users and not affecting the admin.

As per my above request, I am struggling to find out the right names to disable their icons in the CSS Custom app, so just wonder if there is any command or name list for all of them…much appreciated if you could point me in the right direction :slight_smile:

Thank you very much for your attention and support.

7

@gonzdi the following should do the trick with the searchbutton:

#searchbox {
	display: none;
}

Not displaying the settings button in files app is way harder, because the simple way would hide the settings button of ALL apps, not only files.

If your users are in a nextcloud group, you an limit the customCSS app to this group in app administration.

You can see the needed class and id names in the source coude of the webite. You can view this in your browser.

But ATTENTION: The buttons will only be hidden. Someone with technical knowledge can make them visible and use them. It’s not possible to prohibit the use of a button via css.

2 Likes
8

Maybe this is your solution? You can enable the chat on login in preferences of the chat app and hide both buttons on login page.

3 Likes
9

Hi Swindhab,
beforehand, thank you very much for taking your time to answer my doubts.

I am trying the code lines to disable the searchbox, but it is not working, as the search icon is still showing in the bar menu. Any alternative suggestion?.

Moreover, definitely, I will dive in properly in the option you are propossing to disable the settings menu.

Thank you very much for your attention and have a nice weekend.

1 Like
10

Sorry, the code I posted was not right. Take this and it should work (will hide not the id but the class searchbox. Difference is the . instead of the #):

.searchbox {
	display: none;
}
2 Likes
11

Any idea why Custom CSS is not working for me? I tried changing the header image, but the CSS I entered wasn’t being picked up.
I had to edit the server.scss file directly for it to be picked up.

12

Hi Swindhab,

thanks for your post. However, it´s still showing the searching box, even though I have tried both options:

.searchbox {
display: none;
}

and also

.searchbox {
display: none !important;
}

any other idea to disable this one?.

Thank you very much in advance.

1 Like
13

What is the version of your nextcloud? Is the customCSS plugin woking in general? Did you save the changes und reload the website? Is the use of the plugin limited to a specific usergroup?

This should hide the settings button in the menu on the left side (for ALL apps, not only files app)

#app-settings {
display: none;
}
2 Likes
14

Hi Swindhab,

finally I have got all of them hidden, so thank you very much for your support.
However, I am trying to remove/hide from the CSS the header-right “settings” menu button without remove the “logout” one, as I do not want the user to access to the settings option but still be able to logout from their session. I have tried different options from the Custom CSS app, but they are

  • type and it is not being easy for me to get it. Please, can you shed some light on this matter?.

    Thank you very much in advance for your support.

    Kind regards.

    • 15

    You mean like this?

    li[data-id="settings"] {
display: none;
}
    2 Likes
    16

    Hi Swindhab,

    it is working fine for specific items, however, when I try to remove the “settings>sharing” item in the settings>personal left hand menu option, it is a

  • option but does not work:
    image

    Please, can you advice?.
    Thank you very much for your full support and attention.

    Kind regards.

    • 17

    I don’t get what you mean with a “*” option?? Maybe you want to make a list what to hide (with screenshots?). Maybe I can help…
    For example I don’t understand what your picture should show me, as it is the code for “accessibility settings” and not “sharing settings” as you described in your text…

    1 Like
    18 
    li a[href="/nextcloud/index.php/settings/user/sharing"] {
display: none !important;
}
    5 Likes
    19

    Hi Steffen,

    that´s exactly what I need to get everything properly customized!. Thank you very much for all your support and patience. Have a great day. Kind regards :slight_smile:

    20

    hint hint :wink: the currency you show your gratitude here on the forum is measured in :heart: - so why not just giving him a heart for every positive answer? hint hint

    2 Likes