How to Customize The Vcenter/VCSA Login Screen on Vmware/Vcenter 7.0 – An introductory Tutorial

The video goes over the majority of what I wanted to convey. It isn’t scripted, so we have some fun when things don’t go well.

Anyway, here’s some code blocks with helpful information in case checking the Youtube description is below you.

LOCATION FOR IMAGE STORAGE:
https://[VCSAaddress]/websso/resources/img/

LOCATION FOR THE CSS FILE [FOR SSH/PUTTY]:
/usr/lib/vmware-sso/vmware-sts/webapps/ROOT/resources/css/clr-ui.min.css

SOME OF THE CSS I ENDED UP CHANGING TO ACHIEVE THE RESULT I DID:
.login-wrapper .login {
    background: #292929;
    color: white;

    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    margin-left: 500px;
    min-height: 100vh;
    min-width: 35em;
    opacity: 92%;
    -moz-box-shadow: 0px 10px 42px -1px rgba(0,0,0,0.92);
    box-shadow: 0px 10px 42px -1px rgba(0,0,0,0.92);

    animation: 2865.31ms cubic-bezier(0.6, -0.42, 0, 1.38) 145.297ms 1 normal forwards running slide-right;
    transform: translateX(-210%);
}

@keyframes slide-right {
  to {
    transform:translateX(0);
  }
}


.btn-primary .btn, .btn.btn-primary {
    border-color: #6b8e5a;
    background-color: #9acd82;
    color: #323731;
    font-weight: bolder;
    height: 50px;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
    border: 3px solid #ffffb5;
}

.login-wrapper .login .title {
    line-height: 12;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: -6px;
    margin-bottom: -189px;
    font-size: 1.333333rem;
    color: white;
    background-image: url(../../resources/img/IntelNUCVcenterWallpaper_transparent.png);
}


.login-wrapper {
    display: -ms-flexbox;
    display: flex;

    background-size: auto 100%;
    background-max-height: ;
    background-position-y: top;
    
    background-color: #9acd82;
    background-image: url(../../resources/img/Jackharvest_Dog_2560x1080plus.png);
    
    background-repeat: no-repeat;
}

.footer {
    position: absolute;
    left: 550px;
    bottom: 20px;
    font-weight: bold;
    padding: 10px;
    color: #7B7E81;
    padding-left: 44px;
}


input[type=date], input[type=datetime-local], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=time], input[type=url] {
   
    color: #cbfeb4;

}

Please remember to share some of your discoveries! I’d love to see what others come up with. Ask any questions you may have in the comments below. I’ll do my best to answer them.

• How to Customize The Vcenter/VCSA Login Screen on Vmware/Vcenter 7.0 – An introductory Tutorial
• How to change your Intel NUC Boot Logo. For reals this time.
• How to change the host server icon in vsphere 7.0 (and 6.7u3)
• How to change the computer/server avatar/icon/image on vsphere summary page
• No Space Left On Device vmware_locker_tools error when upgrading ESXI 6.7