Whitelabel Cheat Sheet

[cbunge]

I wanted to gather any helpful CSS that folks have developed over time in a centralized post.

Note: This is a wiki post and others can contribute directly to it.

• Add the code to code blocks
• Add code to most appropriate section (add as needed)
• Any information is helpful!

Buttons

• Close ‘X’ Icon Override

svg.close-icon{
   filter: invert(48%) sepia(79%) saturate(100%) hue-rotate(86deg) brightness(0%) contrast(100%);
}

• Hide Local Username & Password login block

#login-form h3.text-center {display:none!Important;}
#loginBtn button.btn-default {display:none!Important;}

Catalog

• Resize Catalog Wiki / Order Form

.catalog-item-details .catalog-item-body .catalog-item-content {
	max-width: 40%;
}

• Replace Complete with Submitted text

dl.order-details dd.complete {
	text-indent: -9999px;
  	line-height: 0; 
}

dl.order-details dd.complete::after {
	content: "Submitted"; 
	display: block;
	line-height: initial;
	text-indent:0px;
}

Color

• Change Color of Required Bar

.required-bar { 
height: 24px;  
width: 2px;    
position: absolute;  
margin: 
4px;    
z-index: 3;   
background-color: #e31430;
}

Images

• Change Login Background Image

.login-body {
  background-image: url('path/to/your/image.jpg');
  background-size: cover; /* Adjust this as needed */
  background-repeat: no-repeat; /* Optional: prevents image tiling */
}

• Resize Markdown Images via label
  • Example Markdown

  ![rabbit](https://demo.morpheusdata.com/assets/branding/140x40/rabbitmq-d64573aaf029cb5797a02ff6d0fc58d1.svg)
  

  • Resize CSS

  img[alt=rabbit] { width: 200px; }
  

Inputs

hides name field on instance provisioning modal

div.instance-step-name label[for=name] {
    display: none!important;
}
div.instance-step-name label[for=name] + div {
    display: none!important;
}

• Hides “Auto - Cluster” and “Auto - Datastore” Options from Provisioning

div.disk-datastore option[value="auto"] {
     display: none;
}
 
div.disk-datastore option[value="autoCluster"] {
     display: none;
}

Policies

• Change color identifier for enabled/disabled policies

div.policies-list tr div span.policy-option, div.policies-list tr div span.policy-description{
    color: #00c04b!important;
}

div.policies-list tr.inactive div span.policy-option, div.policies-list tr.inactive div span.policy-description{
    color: #ff7f7f!important;
}

Round Borders

.dashboard .status section {
    border-radius: 12px;
    box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.1);
}

button, .button {
    border-radius: 4px;
}

.tabs-alt li input[type=radio]:checked + label {
    color: #78c5e1;
    border: 1px solid #78c5e1;
    border-radius: 4px;
    height: 32px;
    padding: 0 18px;
    line-height: 32px;
    display: inline-block;
    margin-right: 1px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 300;
}

.form-control {
    border-radius: 4px;
}

input.form-control, select.form-control {
    border-radius: 4px;
}

textarea.form-control {
    border-radius: 4px;
}

.CodeMirror {
    border-radius: 4px;
}

.form-control {
    border-radius: 4px;
    /* -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075);
}

Shadows

• Add Shadow to Shopping Cart Icon

header li.item.cart img {
 filter: drop-shadow(2px 4px 6px black);
}

Tables

• Alternate Row Colors on Role Edit Tables

.siteAccess-list tr:nth-child(even), .site-permissions-list tr:nth-child(even), .instance-types-permissions-list tr:nth-child(even), .app-templates-permissions-list tr:nth-child(even), .report-types-permissions-list tr:nth-child(even), .persona-permissions-list tr:nth-child(even), .catalog-item-type-permissions-list tr:nth-child(even), .vdi-pool-permissions-list tr:nth-child(even)
{
  background-color: #A2D9EF;
  color:white;
}

Tags

.tags:before {
    content: "TAGS";
}
  
.page-resource-header .tags {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
  
.page-resource-header .tags ul {
    column-count: 3;
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
}
  
.page-resource-header .tags ul li {
    padding: 6px 6px;
    margin: 0px 6px 0px 0px;
    background-color: inherit;
    color: inherit;
    border-radius: 4px;
    flex: 1 0 25%;
}
  
  
.page-resource-header .tags ul li span.key {
    font-weight: bolder;
}
  
  
.page-resource-header .tags ul li span.value {
    margin-left: 6px;
}

Text

• Globally change font

body {
    font-family: wingdings;
    font-weight: 300;
}

URLS

• Hide Policy and Terms of Service Links

.disclaimer {
  display: none;
}

.policies {
  display: none;
}

• Security Banner Link Colors

.security-banner a:link {color:#008000};

User Avatars

.user-avatar-container {
    width: 35px;
    height: 35px;
    border: 0px solid #4d4d4d;
}

TAGS and LABELS

• With v6.0 enhancing the Label capability , it may be useful to separate Tags and Labels when looking at Instances details

.page-resource-header .tags-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.tags:before {
    content: "TAGS";
}
.labels:before {
    content: "LABELS";
}

[cbunge]

You could do something like this to override globally:

body {
    font-family: wingdings;
    font-weight: 300;
}

[Ollie-Phillips]

Where the user needs input validation, and it is necessary to use a custom input in place of a standard ui input, then it is often desirable to hide the standard ui control.

This example CSS hides the standard instance name control in the provisioning modal UI, to avoid confusion between this and the custom control.

// hides name field on instance provisioning modal
div.instance-step-name label[for=name] {
    display: none!important;
}
div.instance-step-name label[for=name] + div {
    display: none!important;
}

[Ollie-Phillips]

Yes, target the disclaimer class

.disclaimer{
    color: #hexCodeOfChoice; 
}

[#5]

Hey,
I would like to add a link to a document with helpful information on the login page. Would this be possible via the CSS? Unfortunately, I can only insert text in my own tests, but not a clickable link.

[kevkerr1]

Sorry , I’ve just seen it in your original post. Thanks

[cbunge]

You may be able to add a shadow to the cart with:
header li.item.cart img {
filter: drop-shadow(2px 4px 6px black);
}

I’ll have to poke around to find a different override.

Thanks @jwheeler on the shadow script

[dgaharwar]

Following CSS hides the Auto - Cluster and Auto - Datastore options from the Storage selection dropdown on Instance creation form. Also, for this to work effectively, a datastore/cluster needs to be marked as default.

// hides "Auto - Cluster" and "Auto - Datastore" options from the storage selection dropdown on instance creation form
 
div.disk-datastore option[value="auto"] {
     display: none;
}
 
div.disk-datastore option[value="autoCluster"] {
     display: none;
}

[#9]

Hi @Ollie_Phillips : Is it possible to change the font color at login page ? I have highlighted in the screenshot.

[#10]

Hide ‘Primary Cloud’ from the INFO section on a virtual image:

.resource-detail .info-columns > .info-columns-item:nth-child(8) {
	display: none;        // or 'visibility: hidden;' also works here
}

[cbunge]

Oh I only added it in there after I posted a reply

[Ollie-Phillips]

Self Service Catalog - Order History

Change the word “Complete” to “Submitted”

May assist in managing user expectations. Complete effectively means the order has been processed not that the VM is provisioned and ready to use. It may even fail to provision and still show “Complete” here.

This CSS alters the semantics ever so slightly

/* 
	Catalog Order History 
	replace "Complete" with "Submitted"
*/

dl.order-details dd.complete {
	text-indent: -9999px;
  	line-height: 0; 
}

dl.order-details dd.complete::after {
	content: "Submitted"; 
	display: block;
	line-height: initial;
	text-indent:0px;
}

[kevkerr1]

Is it possible to remove certain icons or text from the instance view using CSS override?

I would like to remove the “Type” from the instance as the backup ICON

[Ollie-Phillips]

Policies.

It turns out there is already color differentiation between enabled and disabled polices, but it’s not very obvious.

This CSS will make it stark: showing enabled policies as green, and disabled polices as an exceptionally pleasant pastel red. The hex codes can be amended of course to suit your needs.

/* 
   Policies 
   Provides more obvious color differentiation
   Green - enabled, Red - disabled
*/

div.policies-list tr div span.policy-option, div.policies-list tr div span.policy-description{
    color: #00c04b!important;
}

div.policies-list tr.inactive div span.policy-option, div.policies-list tr.inactive div span.policy-description{
    color: #ff7f7f!important;
}

[#15]

@cbunge @Ollie_Phillips
Is there any way to change the color of cart icon which is white by default because the header is white. Instead of dropping a shadow, can we use a different icon itself.

Also on the cart item count, there is default color which show the cart count however if we want to change the color of item count.

[Ollie-Phillips]

Hi @ranujain I’ve used this before. It doesn’t so much let you change color, but inverts the contrast so is useful when cart is set against very light header background.

.cart-img{
    filter: invert(50%)!Important;
}

Don’t know re icon change or cart count. Have never investigated. Probably possible, so please consider opening a technical request and we can look at what is required.

[kevkerr1]

when setting the header to white it seems to loose the shopping cart icon when an item is added. When empty it seems ok. Any idea how to change the colour of the shopping cart when full?

thanks

[kevkerr1]

Whats the best way to change the font , either globally or in each section?

Thanks

[#19]

By overriding the following CSS, you can effectively prevent users from modifying the ‘CORES PER SOCKET’ setting in the VM provisioning configuration section.

.input-group-sm > .form-control[name="servicePlanOptions.coresPerSocket"],
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
    /* Your styles for the "servicePlanOptions.coresPerSocket" input go here */
    /* For example, to disable (make it inactive) the input: */
    pointer-events: none; /* This disables user interaction */
    opacity: 0.6; /* This reduces the opacity to indicate it's inactive */
}

[kevkerr1]

Thats perfect, thanks , I used this for a while

header li.item.cart .header-notification img {
margin: 0;
background-color: #98a4a9;
}

but the shadow is right on the money

Thanks