Custom CSS Snippets

What is Custom CSS?

Custom CSS is a method to add custom code that will override the default styling, colors or spacing in a specific area of the platform. Using Custom CSS gives you a very high level of customization over the platform that can be very specific to your needs.

Where do I add this Custom CSS?

There are several places you can add Custom CSS, but in this article, we'll focus on the "general" Custom CSS that will take effect throughout your portal. (Except your Custom Login page, which has its own separate Custom CSS.)

Simply navigate to the  Fly Out Menu by clicking your Profile image in the top right of the screen, and then select Platform Branding.

Scroll to the bottom of this page, and look for the toggle switch labeled  Enable Advanced Custom CSS in the Advanced section.

Check this box, and that will reveal the interface for writing/pasting Custom CSS.

Use this area to enter your Custom CSS code.

Or, you can copy the snippets below and paste them into that interface and click Save.

Add a gradient to the primary navigation area

.sidebar-nav {
    background: linear-gradient(180deg, #3F3F3F 0%, #595959 50%, #7C7C7C 100%);

Hide the 'Ask!' in sidebar footer

.sd-get-help {
   display: none;

Hide the 'Requested Due Date' row in the Create Work Request

.sd-client-add-wr-duedate {

Change the Primary Button Color

Just replace the hex code with your color hex code of choice.

.btn-primary {
    background-color: #444444 !important;

Hide the date in Announcements

.ann-date {

Hide the Title area on an individual Portal Page

.column1-portal-page .title-row {
display:none !important;

Hide the primary ADD button on the main top bar

.sd-nav-bar-add-button {

Hide the PRICE row in the Work Request Summary

.sd-wr-view-price-row {

Hide the 'Summary Description' row in Create Work Request

.sd-client-add-wr-description {

Hide the 'Requested Due Date' row in the Create Work Request

.sd-client-add-wr-duedate {

Hide the 'Pay Now' button on Invoices

.sdPayNow {

Use a Custom Font

Change "YOURFONTNAME" and "YOURBACKUP" to fonts of your choice, eg. Montserrat and sans-serif.

h1, h2, h3, h4, h5, h6 {font-family: 'YOURFONTFAMILY', YOURBACKUP;}
a {font-family: 'YOURFONTFAMILY', YOURBACKUP !important;}
label {font-family: 'YOURFONTFAMILY', YOURBACKUP;}
input {font-family: 'YOURFONTFAMILY', YOURBACKUP !important;}
span {font-family: 'YOURFONTFAMILY', YOURBACKUP !important;}
td {font-family: 'YOURFONTFAMILY', YOURBACKUP !important;}
div{font-family: 'YOURFONTFAMILY', YOURBACKUP !important;}
button{font-family: 'YOURFONTFAMILY', YOURBACKUP !important;}
a.dropdown-menu{font-family:'YOURFONTFAMILY', YOURBACKUP !important;}
#sd-dropdown-wrapper .dropdown-item {font-family: 'YOURFONTFAMILY', YOURBACKUP !important;}
.hide-menu {font-family: 'YOURFONTFAMILY', YOURBACKUP;}
.item {font-family: 'YOURFONTFAMILY', YOURBACKUP;}
.ext-menu {font-family: 'YOURFONTFAMILY', YOURBACKUP;}

TIP: You can import new fonts from HERE.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us