Whitelabel Cheat Sheet

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";
}

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

Thanks

You could do something like this to override globally:

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

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

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

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

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

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

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


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;
}

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;
}
1 Like

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 */
}
2 Likes

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
}


1 Like

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;
}

1 Like

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;
}
1 Like