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")'
options:
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: http://flowframework.readthedocs.org/en/latest/TheDefinitiveGuide/PartIII/ModelViewController.html#ch-model-view-controller
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 {
margin:0;
padding:0;
background: url(//c1.staticflickr.com/1/731/21893992221_46a57b6043_h.jpg) 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.
