Nuxeo Server

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.

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

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

We'd love to hear your thoughts!

All fields required