Nextcloud, the popular open-source file sync and share software, is known for its robustness and extensive feature set. One of the standout features of Nextcloud is its app ecosystem, allowing users to extend its functionality according to their needs. However, with great power comes the need for customisation, and the ability to reorder and hide apps in the top bar has long been a coveted feature among Nextcloud enthusiasts. This need became even more pressing when the beloved App Order app broke with Nextcloud 25 and onwards. But fear not, as the Custom CSS app has emerged as a saviour, providing a new path to easy customisation.

In this blog post, we’ll delve into the world of the Custom CSS app for Nextcloud. We’ll explore how it allows you to take control of your Nextcloud instance’s appearance by customising the top bar, all while drawing parallels to the void left by App Order’s demise.

The Importance of Customisation

Before we dive into the specifics of the Custom CSS app, let’s understand why customisation is crucial for Nextcloud users.

1. Tailored Experience: Every user has different preferences and workflows. Customisation empowers users to tailor their Nextcloud experience to their liking, making it more efficient and enjoyable.
2. Productivity Boost: By reordering or hiding apps that are rarely used, users can streamline their workspace, reducing clutter and increasing productivity.
3. Branding: Organisations often require a consistent look and feel across all their tools, including Nextcloud. Customisation allows them to apply corporate branding to their Nextcloud instance.
4. Accessibility: Customisation can also improve accessibility by allowing users to make visual adjustments that suit their needs, such as increasing font sizes or using specific color schemes.

App Order’s Demise

For years, Nextcloud users relied on the App Order app to reorder and hide apps in the top bar. It was a straightforward and user-friendly solution, making customisation accessible to all. However, as Nextcloud evolved, so did its underlying architecture. When Nextcloud 25 was released, the App Order app was no longer compatible, leaving users in a dilemma. This created a gap that needed to be filled.

Enter the Custom CSS App

The Custom CSS app, developed by the Nextcloud community, has emerged as a versatile and powerful alternative to the App Order app. It allows users to apply custom CSS styles to their Nextcloud instance, including the top bar. Let’s take a closer look at its features and how it addresses the need for app customisation:

1. Easy Installation: Like other Nextcloud apps, the Custom CSS app can be installed with a few clicks from the Nextcloud app store, making it accessible to all users.
2. Granular Control: While the App Order app primarily focused on reordering and hiding apps, the Custom CSS app provides more granular control. You can not only reorder and hide apps but also tweak their appearance, change fonts, colors, and even add your own custom styles.
3. Community-Driven Development: The Custom CSS app is developed by the Nextcloud community, ensuring that it remains up-to-date and compatible with the latest Nextcloud releases. This community support is vital for the longevity of customisation solutions.
4. Minimal Code Knowledge Required: While it’s true that the Custom CSS app allows for complex customisation, you don’t need to be a CSS wizard to use it. Many users share their CSS snippets and themes, making it easy to find and apply customisation without writing code.
5. Undo and Reset: Making a mistake with your custom CSS can be nerve-wracking, but with the Custom CSS app, you can undo or reset your customisations by clearing your added styles, providing a safety net for users experimenting with CSS.
6. Future-Proofing: With ongoing development and community support, the Custom CSS app is well-positioned to adapt to future changes in Nextcloud, ensuring that your customisations remain relevant.

How to Use the Custom CSS App

Using the Custom CSS app is relatively straightforward:

1. Install the App: While logged into your Nextcloud instance as the administrator, navigate to Apps section and search for “Custom CSS” and install the app.
2. Access the App: Once installed, you can access the Custom CSS app from Administration settings -> Theming. Scroll down to the bottom to find the Custom CSS heading and the text-box to add your styles.
3. Customise to Your Heart’s Content: Use the Custom CSS app’s interface to add your CSS code. You can start with small changes, like hiding and reordering apps, and gradually explore more advanced customisation as you become comfortable.
4. Apply Changes: Once you’re satisfied with the added CSS styles, hit the Save button. The styles should apply immediately.
5. Undo or Reset: Don’t forget the safety net! If something goes wrong or you want to revert your changes, clear the added CSS styles and click on Save to reset any added custom styles.

Examples

1. Hide Specific Apps from the Top Menu Bar

For hiding apps from the menu bar, use the following CSS style:

/* Hide the Files app */
.app-menu-main .app-menu-entry[data-app-id=files] { display: none !important; }

/* Hide the Dashboard app*/
.app-menu-main .app-menu-entry[data-app-id=dashboard] { display: none !important; }

Here, the value of data-app-id can be set depending on what app you want to hide from the menu bar. This is useful in instances when the desired app to be hidden cannot be disabled natively or is required to be kept enabled but not accessed.

2. Reorder Apps in the Top Menu Bar

For reordering apps in the menu bar, use the following CSS style:

/* Display apps in the order Dashboard > Activity > Contacts > Announcement center */
.app-menu-main .app-menu-entry[data-app-id=dashboard] { order: 0; }
.app-menu-main .app-menu-entry[data-app-id=activity] { order: 1; }
.app-menu-main .app-menu-entry[data-app-id=contacts] { order: 2; }
.app-menu-main .app-menu-entry[data-app-id=announcementcenter] { order: 3; }

Note that the default order value for any app is 0. So, reordering can be done by using increasing (1, 2, 3…) or decreasing (-1, -2, -3…) values. Apps will be ordered in ascending order of the integer values set.

---

Finding the right data-app-id value for the desired app can be done in the following three ways:

1. Using Apps page. Click on any app and in the URL bar, the last name should be the value for that app (.../settings/apps/installed/<app_name>). For example, for Dashboard app, the URL may look like this: http://nextcloud.local/index.php/settings/apps/installed/dashboard
2. Using occ app:list command (requires access to server running the Nextcloud instance)
3. Using Inspect Element on the app (right click on the target app in menu -> Inspect)

Limitations

Using Custom CSS styles is a double-edged sword. While it provides insane customisation possibilities, it can be also be rendered broken and non-functioning just as easily. Although unlikely for releases to come, there is a non-zero possibility that the names of selectors used for your custom CSS styles may change, and would require the administrator to once again check and update the required styles. This needs to be kept in mind especially when a lot of such styles have been added, as maintaining them might get tedious down the road.

Conclusion

The Custom CSS app in Nextcloud has stepped up to fill the void left by the App Order app, offering users even more powerful customisation options. Whether you’re an individual user looking to declutter your Nextcloud interface or an organisation aiming to align Nextcloud with your branding, this app has you covered.

Customisation is not just about aesthetics; it’s about creating an environment that suits your needs and enhances your productivity. With the Custom CSS app, Nextcloud users can continue to enjoy a tailored and efficient experience, all while keeping pace with Nextcloud’s ongoing development.

As the Nextcloud community continues to thrive, we can look forward to more exciting developments and new customisation opportunities. So, go ahead, unleash your creativity, and make your Nextcloud instance truly yours with the Custom CSS app!