Nuxeo Server

How to Customize the Login Page

This page is scheduled for review and update. Check back soon for updated content!

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.

src/main/resources/OSGI-INF/login-contribution.xml

<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>
      <videos loop="false" muted="true">
        <video src="//media.nuxeo.com/videos/login_8_10.webm" type="video/webm" />
        <video src="//media.nuxeo.com/videos/login_8_10.mp4" type="video/mp4" />
      </videos>
      <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>

It is recommended to have several video encoded with main standards. Offering a WEBM and a MP4 fallback helps you providing your video for all your users. Here is a script, using ffmpeg to encode any source with 2 pass encoding for a better result:

#!/bin/bash

IN=$1
OUT=$(echo $1 | sed 's/^\(.*\)\.[a-zA-Z0-9]*$/\1/')
SIZE=960x540

# webm 2 pass
ffmpeg -y -i $IN -f webm -threads 0 -b:v 1M -crf 22 -s $SIZE -pass 1 -an  /dev/null
ffmpeg -y -i $IN -f webm -threads 0 -b:v 1M -crf 22 -s $SIZE -pass 2 -an $OUT.webm

# mp4 2 pass
ffmpeg -y -i $IN -vcodec libx264 -f mp4 -threads 0 -b:v 1M -crf 22 -s $SIZE -pass 1 -an  /dev/null
ffmpeg -y -i $IN -vcodec libx264 -f mp4 -threads 0 -b:v 1M -crf 22 -s $SIZE -pass 2 -an $OUT.mp4

a month ago Manon Lumeau Fix wording
3 years ago Solen Guitter 42 | pdate how-to topic
4 years ago Manon Lumeau 41
4 years ago Anahide Tchertchian 40
5 years ago Manon Lumeau 39
5 years ago Manon Lumeau 38
5 years ago Solen Guitter 37
5 years ago Solen Guitter 36 | add link to the explorer
5 years ago Solen Guitter 35
5 years ago Gildas Lefevre 34 | NXDOC-363: Split the page in two, a beginner page and an advanced one
5 years ago Gildas Lefevre 33 | NXDOC-363: Update How-tos
5 years ago Anahide Tchertchian 32
5 years ago Solen Guitter 31
5 years ago Manon Lumeau 30
5 years ago Manon Lumeau 29
5 years ago Manon Lumeau 28
6 years ago Solen Guitter 27
6 years ago Solen Guitter 26
6 years ago Anahide Tchertchian 25
8 years ago Anahide Tchertchian 24
8 years ago Anahide Tchertchian 23
9 years ago Stéfane Fermigier 22
9 years ago Stéfane Fermigier 21
9 years ago Florent Guillaume 20
9 years ago Florent Guillaume 19
9 years ago Stéfane Fermigier 18
9 years ago Stéfane Fermigier 17
9 years ago Stéfane Fermigier 16
9 years ago Stéfane Fermigier 15
9 years ago Stéfane Fermigier 14
9 years ago Stéfane Fermigier 13
9 years ago Stéfane Fermigier 12
9 years ago Stéfane Fermigier 11
9 years ago Stéfane Fermigier 10
9 years ago Stéfane Fermigier 9
9 years ago Stéfane Fermigier 8
9 years ago Stéfane Fermigier 7
9 years ago Stéfane Fermigier 6
9 years ago Stéfane Fermigier 5
9 years ago Stéfane Fermigier 4
9 years ago Stéfane Fermigier 3
9 years ago Stéfane Fermigier 2
9 years ago Stéfane Fermigier 1
History: Created by Stéfane Fermigier

We'd love to hear your thoughts!

All fields required