Home > Blogs > VMware vCloud Blog


Customize vCloud Director 5.1 Login Style and Logo

By: Andrea Siviero, PSO Solutions Architect at VMware

In the long trip to getting a “cloud” up and running, customers I’ve worked with at some point reach the moment where customization of the portal is needed, and of course the first step is using the company logo on the login page.

With vCloud Director 1.5.x it was an easy step: just upload your image on the branding option and presto, you have your own logo on vCD 1.5 login page, like this:

…with a logo in top left login:

Of course styling has to be completed, but with your own logo you can start feeling at home ;-)

With vCloud Director 5.1, the look and feel has been improved compared to previous releases, but customers I’m working with have found it harder than previous releases to customize the login page, especially the logo.

The first thing that you’ll notice is that changing the logo option in the branding menu will NOT affect the login page, but only the small logo on bottom page AFTER user has been logged on:

While the login page won’t have any company logo, but only the VMware logo in top left corner:

Customers have of course become disappointed and have asked, ”Where is my logo, dude?”

On the VMware Knowledge Base, you will get find 2 CSS files:

  • cloud-director-51-login-template.css
  • cloud-director-51-template.css

So the next phase is to start using the cloud-director-51-login-template.css. You can upload this as a cloud administrator in the panel shown above. When you are done with this, the logo and the background should be gone already. You need to close and re-open the browser to see the changes.

I’m not a web designer and this article has no scope on using CSS/HTML language, but I’ll show you how I’ve been able to customize the login page in an easy way and obtain a fully customized login page like this:

I’ve used 2 very simple tools:

  • Firefox with the embedded Web Developer Tool – I’m using the latest version available (18.0.2) but I think any other modern browser has similar tools.
  • TextWrangler (free text editor with Language markup hightlight)

With the Inspect and Stlye Tools of Firefox, you can graphically select objects on the login page and customize their CSS style using the embedded Style option –  this will apply dynamically to all of the settings.

Once happy with the HTML markup, just write it down to your custom-css and upload to vCloud director using “the login page theme” option. For example, you can customize the CSS that you have previously downloaded from the KB article.

The company logo can be placed on any webserver publicly available, so there is no need to modify changes on vCloud director – changes will be fully supported and can be reverted with a single click.

So keep calm and let the vCloud styling begin ;-)

Below is a copy and paste of the modified css that I created that produces the customized login page you see above:

/*
****************************************************************************
Login Page:
This includes login page’s background, label etc.
****************************************************************************
*/
/* The background of login page */
html {
background: -moz-linear-gradient(top, #2674A4, #00458A); /* Mozilla firefox */
background: -webkit-gradient(linear, left top, left bottom, from(#2674A4), to(#00458A)); /* Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#2674A4′, endColorstr=’#00458A’); /* IE 5.5&7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#2674A4′, endColorstr=’#00458A’)”; /* IE 8&9 */
}
input {
width: 190px;
padding: 5px 25px;

font-family: Arial, sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

background: #fff;
border: 1px solid #fff;
border-radius: 5px;

box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
table.outertable {
margin: auto;
width: 95%;
}

/* To remove vmware logo which is located on top left corner of login screen */
#vmwareLogo {
display: none;
}

/* To remove image below vmware logo. It consists of several trianges */
#appBgImage {
display: none;
}

/* To change font and color of error messages on login page */
#error, #sessionMessage {
font-size: 12pt;
font-weight:normal;
color: #AB3A3A;
display: none;
font-family: Arial;
}

/* Style of provider name on login page. It takes effect only if provider name is not “vmware vcloud director” */
.title {
background:url(‘http://sd.keepcalm-o-matic.co.uk/i/keep-calm-with-vcloud-style.png’) no-repeat top transparent;
text-align: center;
height:200px;
width: 200px;
font-size:0;
back-ground-size:100%;
border-radius:100px;
}

/* Positioning of credential window and styles for labels inside it */
#credentials {
position: relative;
margin: 0 auto;
top: 200px;
width: 670px;
height: 250px;

color: #004C8A;
font-family: arial;
font-weight: normal;
font-size: 12pt;

padding-bottom: 0px;
padding-top: 50px;
border-spacing: 0px;

background: #f3f3f3;
border: 1px solid #fff;
border-radius: 50px;

box-shadow: 1px 5px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Style of login button */
.login {
-moz-box-shadow: 1px 1px 0px 0px #214166;
-webkit-box-shadow: 1px 1px 0px 0px #214166;
background: #56c2e1;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0D83DB), color-stop(1, #01508C) );
background:-moz-linear-gradient( center top, #0D83DB 5%, #01508C 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0D83DB’, endColorstr=’#01508C’);
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:18px;
font-weight:bold;
text-decoration:none;
border: 1px solid #46b3d3;
width: 110px;
height: 40px;

float:right;
padding: 0px 5px;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

border-radius: 5px;
cursor: pointer;

box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);

}

.login:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);

box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.login:focus {
position: relative;
bottom: -1px;

background: #56c2e1;

box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
.focus {
border: 1px solid #21EDFF;
}

.verticalLine {
border-left: none;
border-right: 1px solid #449AD4;
padding: 0.01px;
width: 0.01px;
}

table tr.errorMsgRow {
height: 20px;
vertical-align: top;
}
#authenticatebar {
height: 6px;
width: 175px;
}

For future updates, be sure to follow @vCloud and @VMwareSP on Twitter!

Andrea currently works at VMware as Solution Architect in the professional services organization. He acts as an architect and specialist for VMware’s  customers and service providers to deliver VMware Cloud technologies and next generation desktop services.

One thought on “Customize vCloud Director 5.1 Login Style and Logo

  1. suresh

    Hi ,

    Good article.Could you please share, how to change the vSphere web client Login Style and Logo.

    Regards,
    Suresh

Comments are closed.