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

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

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: