Login Screen Customization

Support
#1

Hello,

I would like to customize the login screen similar to the image below:

screen

So the login dialog will be on the left and an image on the right.

I tried many different things with the ext-login-window, but could not make it.

Any suggestions?

Thank you,

#2

Hi,

it can be done mainly by CSS.

Here’s an example of a custom login screen app:
27

cuba-example-custom-login-screen.zip (1006.7 KB)

Here’s the corresponding styles.css:

.halo {
  // include auto-generated app components SCSS
  @include app_components;
  
  @include com_rtcab_cecls-halo-ext;

  .c-login-panel {
    background-color: rgba(255,255,255,0.8);
    width: 100%;
    margin: 0;
    border: 0;
  }
}

@media screen and (max-width: 1200px) {
  .c-login-main-layout {
    background: url("branding/background-small.jpg") !important;
  }
}
@media screen and (min-width: 1200px) {
  .c-login-main-layout {
    background: url("branding/background-medium.jpg") !important;
  }
}

@media screen and (min-width: 1800px) {
  .c-login-main-layout {
    background: url("branding/background-large.jpg") !important;
  }
}



.v-slot-c-powered-by {
  background-color: rgba(255,255,255,0.8);
  padding-top: 20px;
}

I hope this helps as an example…

Bye
Mario

1 Like
#4

Hi!

Also, you can do it without CSS customization. Just extend Login Window layout and place loginMainBox to the hbox and add Image component.

You can extend main theme from studio with Manage theme → Create theme extension. How to change branding and how to extend theme, see documentation.

So Login Window layout has following simplified code:

<layout stylename="c-login-main-layout" expand="loginWrapper">
    <vbox id="loginWrapper">
        <hbox id="customWrapper"
              height="100%"
              width="100%">
            <vbox id="loginMainBox">
                <hbox id="loginTitleBox">
                   ...
                </hbox>
                <grid id="loginFormLayout">
                   ...
                </grid>
            </vbox>

            <image id="backgroundImage"
                   width="100%"
                   height="100%"
                   scaleMode="FILL">
                <theme path="branding/background.jpg"/>
            </image>

        </hbox>
    </vbox>
    <label id="poweredByLink"/>
</layout>

Branding logo in login messages.properties:

loginWindow.logoImage = branding/logo-placeholder.png

See the attached project.
custom-login-example.zip (109.2 KB)

1 Like
#5

Hello Mario,

Thank you!

#6

Hello Roman,

I followed your example and it worked very well.

Thank you,

Claudio

#10

I cant place loginMainBox to the hbox and add Image component.
If I am doing so then 2 login apperas and unexpected error ocuurs.
@Pinyazhin

Thanks…!!

#11

can the background of the login page changed at runtime ?