How to customize the Nextcloud login page with additional HTML, CSS and Javascript

[DalekDave]

Thank you so much for your work on Breeze Dark. I love it, use it on my KDE desktop, and now - thanks to your work - on my Nextcloud instance.

I want to customize the Nextcloud login page with additional HTML (a text page underneath the Nextcloud login box), additional CSS and Javascript interacting with the aforesaid additional HTML and CSS.

When Breeze Dark for Nextcloud used to be a theme rather than a Nextcloud app, I could do that by working on the page templates and the guest CSS.

Now Breeze Dark became an app, I have not yet figured out how to do that.

Please could you give me a few brief pointers to get me started?

Thanks again! : :+1:

[mwalbeck]

I more or less see 2 ways of achieving this. Either create your own app with the changes or create your own theme with the changes you want.

If you decide to do a theme you more or less already know what to do and it should work nicely together with the Breeze Dark theme. The only caveat is the Nextcloud devs have deprecated the old themes and recommend creating apps instead. It doesn't seem like they intend to remove the functionality anytime soon, but it'll probably happen at some point. This is one of the reason why I ported the theme to an app.

An app should also work nicely with the Breeze Dark theme, but will probably require more work to get going and maintain. An app doesn't have to be published in the app store, but can just be installed manually like a theme would. Afterwards it can just be enabled in Nextcloud's app menu.

Hope that helps. Let me know if you have any other questions

[SLYtiger16]

@DalekDave An option for you, although it lacks the JS integration you mentioned is to use the Custom CSS app I use this for all of my own customizations on the Breeze Dark App. You could also use the Login Notes App to display a text box below the login screen as you mentioned. I also use this and it is rather helpful and along the lines of what you were seeking. No answer for the JS part though...

[DalekDave]

@mwalbeck thank you for your advice. I didn't respond until I spent the weekend on the task. I did finally get my login page theming working OK at https://collaboration.cafe

I don't currently have any experience of creating apps for Nextcloud so, until I do, I chose to create a theme.

The solution for adding lots of login page HTML and CSS was to put all the HTML in the $footer variable of the public function getLongFooter(). Then I added all the CSS into the guest.css file. Then I added the includes for the custom Javascript into the head of the layout.guest.php file.

Inside the theme folder, I therefore created a directory called core, with a subdirectory js for the Javascript, a subdirectory called css for the CSS files, a subdirectory called fonts for the WOFF fonts, a subdirectory called img for the images, and a subdirectory called templates for the page template file.

I copied layout.guest.php and layout.public.php from the Nextcloud /core/templates directory. I copied the guest.css file from the Breeze Dark app (in /apps/breezedark/css so that I would have a template of minimum CSS required for styling the Nextcloud elements in the page. Then I pasted my custom CSS into that guest.css, pasted my custom CSS files at the top (before the Breeze Dark Nextcloud CSS) in the logical order of inclusion (Javascript CSS first, followed by the CSS for the custom HTML included in layout.guest.php.

Then, I started troubleshooting the display problems by opening up my Firefox inspector and identifying what CSS was causing problems and what CSS modifications were required for styling stuff the way I wanted.

It was a lot of hassle, and I ended up with a lot of redundant CSS in my final guest.css, but in the end I got everything working. Occasionally, I put some hard-coded CSS in the HTML tags of my custom HTML in layout.guest.php.

One has to overpower the styling in Nextcloud's /core/css/guest.css and, a couple of times, the styling in the Breeze Dark app's guest.css in /apps/breezedark/css/guest.css

I guest this is not a very elegant solution - full of messy hacks - but it did work... Hope this helps someone else in the future.

@SLYtiger16 thank you for your advice. I do indeed have the Custom CSS app enabled, plus Nextcloud's Theming app, plus Breeze Dark, and they all seem to co-exist troublefree in Nextcloud 18... Don't know whether this will still be the case in later versions of Nextcloud.

[DalekDave]

P.S. In the end, I didn't actually do anything to layout.public.php but I have not yet tested whether there are any anomalies in that public page resulting from my CSS hacks....

[jonasled]

I think there is a bug in the plugin. I also tried to style the login page. The problem is, the custom stylesheet from breeze-dark is included, but on the backend it fails with the folowing message: Error: Call to a member function getUID() on null

[mwalbeck]

@jonasled Yeah, that is a bug. Thanks for pointing it out. I'm currently putting together a fix.

[mwalbeck]

@jonasled It should now be fixed in 20.0.6 and 21.0.1

[KaiBuskirk]

heading over to [matrix] see what yall are up to there... kai