How to Customize the Login Page

The basic customization can be made by extending the service org.nuxeo.ecm.platform.ui.web.auth.service.PluggableAuthenticationService for the point loginScreen.

This point allows you to configure the Login Screen : header, footer, styles, openid providers ... The variable ${org.nuxeo.ecm.contextPath} can be used to avoid hardcoding the default application path (/nuxeo).

Let's create the component org.nuxeo.sample.loginPage.

<component name="org.nuxeo.sample.loginPage">
  <extension target="org.nuxeo.ecm.platform.ui.web.auth.service.PluggableAuthenticationService" point="loginScreen">
    <loginScreenConfig>
      <bodyBackgroundStyle>url("${org.nuxeo.ecm.contextPath}/img/newBackground.jpg") 0px 0px no-repeat #000</bodyBackgroundStyle>
      <disableBackgroundSizeCover>false</disableBackgroundSizeCover>
      <headerStyle></headerStyle>
      <footerStyle></footerStyle>
      <loginBoxBackgroundStyle>url("${org.nuxeo.ecm.contextPath}/img/newLoginBox.jpg") 0 0 no-repeat #ff0000</loginBoxBackgroundStyle>
      <loginBoxWidth>400px</loginBoxWidth>
      <logoUrl>${org.nuxeo.ecm.contextPath}/img/newLogo.png</logoUrl>
      <logoAlt>MyCompany</logoAlt>
      <logoWidth>113</logoWidth>
      <logoHeight>20</logoHeight>
    </loginScreenConfig>
  </extension>
</component>