topic Re: Whitelabel Cheat Sheet in HPE Morpheus Enterprise

Whitelabel Cheat Sheet

cbunge — Tue, 17 May 2022 17:40:22 GMT

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

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

Re: Whitelabel Cheat Sheet

cbunge — Fri, 02 Dec 2022 13:27:29 GMT

You could do something like this to override globally:

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

Re: Whitelabel Cheat Sheet

Ollie-Phillips — Mon, 26 Jun 2023 09:51:48 GMT

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

Re: Whitelabel Cheat Sheet

cbunge — Tue, 17 May 2022 18:32:42 GMT

Re: Whitelabel Cheat Sheet

Ollie-Phillips — Fri, 22 Nov 2024 15:56:58 GMT

Yes, target the disclaimer class

.disclaimer{
    color: #hexCodeOfChoice; 
}

Re: Whitelabel Cheat Sheet

Fri, 26 Jul 2024 13:34:21 GMT

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.

Re: Whitelabel Cheat Sheet

kevkerr1 — Fri, 02 Dec 2022 14:21:00 GMT

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

Re: Whitelabel Cheat Sheet

cbunge — Tue, 10 Jan 2023 17:50:18 GMT

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

Re: Whitelabel Cheat Sheet

dgaharwar — Tue, 08 Aug 2023 10:27:35 GMT

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

Re: Whitelabel Cheat Sheet

RJ12 — Fri, 22 Nov 2024 03:28:19 GMT

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

Re: Whitelabel Cheat Sheet

Fri, 19 Jan 2024 12:34:07 GMT

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
}

Re: Whitelabel Cheat Sheet

cbunge — Fri, 02 Dec 2022 14:24:15 GMT

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

Re: Whitelabel Cheat Sheet

Ollie-Phillips — Thu, 09 May 2024 08:26:30 GMT

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

Re: Whitelabel Cheat Sheet

cbunge — Tue, 17 May 2022 18:32:52 GMT

Re: Whitelabel Cheat Sheet

kevkerr1 — Fri, 17 Mar 2023 15:03:31 GMT

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

Re: Whitelabel Cheat Sheet

Ollie-Phillips — Wed, 01 May 2024 13:05:15 GMT

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

Re: Whitelabel Cheat Sheet

RJ12 — Wed, 19 Jun 2024 11:11:46 GMT

@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.

Re: Whitelabel Cheat Sheet

Ollie-Phillips — Wed, 19 Jun 2024 17:11:02 GMT

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.

Re: Whitelabel Cheat Sheet

kevkerr1 — Thu, 05 Jan 2023 11:55:56 GMT

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

Re: Whitelabel Cheat Sheet

kevkerr1 — Fri, 02 Dec 2022 09:58:20 GMT

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

Thanks

topic Re: Whitelabel Cheat Sheet in HPE Morpheus Enterprise

Whitelabel Cheat Sheet

Buttons

Catalog

Color

Images

Inputs

Policies

Round Borders

Shadows

Tables

Tags

Text

URLS

User Avatars

TAGS and LABELS

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet

Re: Whitelabel Cheat Sheet