How to change the login page background

This question popup during a client meeting. The direct answer is: “It’s a feature Neos offer” … but the rendering is so flexible that we don’t need a feature to allow change the appearance of the login form, let’s see:

How to do that ?

First you need to create a file Configuration/Views.yaml:

  requestFilter: 'isPackage("TYPO3.Neos") && isController("Login") && isAction("index")'
    templateRootPathPattern: 'resource://Your.SitePackage/Private/Templates'

Basically you say: “Please Flow if the current request is in the package TYPO3.Neos within to controller Login and only for the index action, can you ask Fluid to get the template from my own package”.

For a full documentation about Views.yaml:

In your site package, create Resources/Privates/Templates/Login/Index.html and copy the same file from the Neos package. Edit the file and you have all the power of Fluid to change your login form. Why not adding weather forecast or other kind of dashboard, you just need to create some ViewHelper and edit the markup.

For our use case, you can add an inline CSS:

        html {
            background: url(// no-repeat center fixed;
            -webkit-background-size: cover; /* pour anciens Chrome et Safari */
            background-size: cover; /* version standardisée */
        .neos #neos-login-box {
            background: rgba(20,20,20,.6);
            padding: 40px;
        .neos form {
            margin-bottom: 0;
        .neos input[type="text"], .neos input[type="password"] {
            background-color: white;
            border-color: white;
            opacity: .8;
        .neos input:hover[type="text"], .neos input:hover[type="password"],
        .neos input:focus[type="text"], .neos input:focus[type="password"] {
            opacity: 1;
        .neos #neos-login-box .neos-actions button.neos-login-btn {
            background-color: black;

You can also include an external CSS with:

<link rel="stylesheet" href="{f:uri.resource(path: 'Styles/Login.css', package: 'Your.SitePackage')}" />

You need to specify the package without this Fluid will try to load the CSS from the Neos package, remember the Views.yaml the current request is in the Neos package.


I’d love to revive that old tradition to release each version with a new login screen (that is, wallpaper …).

We could make this a setting (well, I assume we can) which simply points to the Fluid template to use - what do you think?


I can send a small PR to add a settings to just overload the default CSS, to make this improvement easier and let’s choose a default background image for 2.1 or maybe even for 2.0.x


I promise this one since age, so here it is:

This change make it really easy with no hack to load custom stylesheet for the login screen

1 Like

I like this feature!

But I’m not a big fan of having a new custom loading screen with each release, doesn’t look very professional to me. Also it’s an extra waste of our resources to find yet another image with every release with no gain.
And TYPO3’s login pictures were pretty horrible TBH.

I agree with you on this point. I see this feature as a nice and easy way to make Neos more “custom” for client project. Client feel more at home with a nice image that make sense in their business context. And I hate using too much the Views.yaml because you need to take care to “port” change from upstream to your own template … and who take care of this before it break :wink:

1 Like

Exactly! These kind of customizations are just awful, where you replace part of Neos and then keep up with the changes to that part. It’s almost as bad as implementing own frontendRoutePartHandler :smile: