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

Images

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

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

  • Security Banner Link Colors
.security-banner a:link {color:#008000};

User Avatars

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

Change Color of Required Bar

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

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