HowTo: adjust the UI of Nextcloud to your own needs with Custom CSS

📑 How to
, ,
1

The UI of Nextcloud may not always fit your needs or single applications may not always provide the look and feel you expect. There may also be some visual glitches introduced with a new version of Nextcloud or individual apps.

Of course it is always a good idea to report issues to the maintainers or even contribute possible fixes. But you can also change the UI in your own Nextcloud instance without changing the code of the Nextcloud core or any of the apps.

One way to this, is to create a custom theme in the /themes folder of your Nextcloud instance. This folder also contains a file README with instructions and an example which you can copy and modify according to your needs. However this also means you need to have to modify a PHP file and mistakes there could mean that your Nextcloud instance becomes unusable.

The Custom CSS app

Another option is to use the Custom CSS app which allows to add additional CSS rules to Nextcloud. The idea is to override or extend existing rules, so the UI of Nextcloud or individual apps gets changed. For example if you don’t like the rounded corners around the main content area in Nextcloud 32, you can add the following custom rules:

/* Remove rounded corners and margins for the content frame */

:root
{
  --body-container-radius: 0px !important;
  --body-container-margin: 0px !important;
}

[data-theme-light],
[data-theme-dark],
[data-theme-light-highcontrast],
[data-theme-dark-highcontrast] {
  --body-container-margin: 0px !important;
}

/* Also remove rounded corners in mobile view */

#content {
  border-radius: 0px !important;
}

Note that text in /* … */ is a comment which will be ignored. Adding !important to a rule makes sure, that rule overrides the existing definition.

Also keep in mind, that newer Nextcloud or app versions may change the structure the CSS or introduce new rules, so when updating Nextcloud or any of your apps it’s a good idea to check, if the UI still works as expected.

How Recover from a broken UI

If you accidentally created rules which break the UI you can use OCC commands. See the documentation in the Custom CSS repository.

Custom CSS rules ready to use

A set of custom CSS rules for Nextcloud 32 and a number of apps is also provided on my website: Nextcloud 32, Custom CSS | Arno Welzel

Since I use and maintain these rules for my own production Nextcloud instance as well, they also get updated if needed. If newer major Nextcloud versions require updated rules, I will also post an updated version on the website and link to it if needed.

2 Likes