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

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

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

[Kkerr]

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

Thanks

[cbunge]

You could do something like this to override globally:

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

[Kkerr]

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

[cbunge]

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

[Kkerr]

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

[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

[Kkerr]

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

[Kkerr]

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]

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

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

[vsenthilkarasu]

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

[Uthman_Eqbal]

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
}