How to modify Login Screen CSS in WebUI?

Phil_Ludlow — Thu, 16 Apr 2020 16:03:54 GMT

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.

Re: How to modify Login Screen CSS in WebUI?

Gregory_Carlin — Sun, 19 Apr 2020 16:25:49 GMT

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

topic How to modify Login Screen CSS in WebUI? in Nuxeo Forum

How to modify Login Screen CSS in WebUI?

Re: How to modify Login Screen CSS in WebUI?