How to modify Login Screen CSS in WebUI?

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Phil_Ludlow

I would like to modify the CSS in the login.jsp page so our our SSO alternate login button doesn't look bad (screenshot):

We are using WebUI, and I can only find documentation for JSF UI: https://doc.nuxeo.com/nxdoc/how-to-override-the-login-page/, but this doesn't seem to apply fully to WebUI.

I've found the CSS elements to change, and even have the modifications ready, but I'm not sure where to put them. I suppose I could just edit the nuxeo_server/nxserver/nuxeo.war/login.jsp file, but that isn't good practice and would be prone to future errors.

It's too bad the CSS for the login screen can't be edited in in Studio/Configuration/Branding, otherwise this would be pretty easy. It's also unfortunate that the default CSS just looks bad when adding another login method or I wouldn't even need to do this.

Any help would be appreciated. Thanks.

Screen Shot 2020-04-16 at 9.42.54 AM.png

Gregory_Carlin

Hello,

You have catched the issue and the possible solutions I believe 🙂 : we have reported internally this problem and hope to integrate it in the future Studio releases. This is on our product management app and there are also some people who reported the same kind of problem.

Currently, by configuration, you can only play with this extension point:

<extension target="org.nuxeo.ecm.platform.ui.web.auth.service.PluggableAuthenticationService" point="loginScreen">
    <loginScreenConfig>
      <bodyBackgroundStyle>url("${org.nuxeo.ecm.contextPath}/img/login_bg.jpg") no-repeat center center fixed #333</bodyBackgroundStyle>
      <disableBackgroundSizeCover>false</disableBackgroundSizeCover>
      <removeNews>true</removeNews>
      <footerStyle>display: none;</footerStyle>
      <loginBoxBackgroundStyle>none transparent</loginBoxBackgroundStyle>
      <loginBoxWidth>300px</loginBoxWidth>
      <loginButtonBackgroundColor>#dd0f0f</loginButtonBackgroundColor>
    </loginScreenConfig>
  </extension>

You have anyway opened a support ticket on this topic, our support team will come back to you with an answer.

Regards