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