Uploaded image for project: 'Nuxeo Platform'
  1. Nuxeo Platform
  2. NXP-24873

login box background color customization does not work

    XMLWordPrintable

    Details

    • Release Notes Summary:
      The login box background color is customizable.
    • Backlog priority:
      200
    • Team:
      PLATFORM
    • Sprint:
      nxplatform 11.1.23, nxplatform 11.1.24
    • Story Points:
      0

      Description

      1. install nuxeo
      2. in Studio project add the following in XML extensions:
          <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>
        
      3. synchronize the project
      4. observe the login button being red. This confirms the contribution has been loaded correctly
      5. observe the login box background color is white although set as transparent in the contribution (see redBtWhiteBg.png)
      6. in Chrome inspector we can see the property background-color is set to transparent but is overriden (struck through, see overridenProperty.png)
      7. this is due to the following block:
        @media all and (min-width: 500px) {
          form {
            background-color: #fff;
            padding: 2.5em;
            width: 20em;
          }
        
        }

        being after the one using the contribution:

        form {
          display: flex;
          flex-direction: column;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          width: 20em;
          margin: 0;
          padding: 1em;
          background: <%=loginBoxBackgroundStyle%>;
        }
        

      Moving the block before makes it work (see redBtTransparentBg.png)

        Attachments

        1. redBtWhiteBg.png
          redBtWhiteBg.png
          1.78 MB
        2. redBtTransparentBg.png
          redBtTransparentBg.png
          2.55 MB
        3. overridenProperty.png
          overridenProperty.png
          940 kB

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 3 days
                  3d