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. (and your Custom Login page, which has its own separate Custom CSS.)

For general CSS, navigate to Flyout Menu > Platform Branding.

CLICK HERE to learn about Platform Branding

In the Advanced section, toggle the Enable Advanced Custom CSS button to ON.

Use this area to enter your Custom CSS code.
Or, you can copy and paste the snippets below in the section below.

For the Custom Login Page, navigate to Flyout Menu > Custom URL & Login (once your Custom Login has been set up).

CLICK HERE to learn about Custom Login

In the Custom CSS section, toggle the Add custom CSS button to ON.

Use this area to enter your Custom CSS code.

Or, you can copy and paste the snippets below (if specified as Custom Login).


For use in the Platform Branding Section


Add a gradient to the primary navigation area

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


Remove the Dark Mode Switcher

.dark-mode-switch {
   display: none;
}

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 {
    display:none;
}

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 {
    display:none;
}

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 {
display:none;
}

Hide the PRICE row in the Work Request Summary

.sd-wr-view-price-row {
    display:none;
}

Hide the 'Summary Description' row in Create Work Request

.sd-client-add-wr-description {
display:none;
}

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

.sd-client-add-wr-duedate {
    display:none;
}

Hide the 'Pay Now' button on Invoices

.sdPayNow {
    display:none;
}


Use a Custom Font

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

p {font-family: 'YOURFONTFAMILY', YOURBACKUP;}
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.



For use in the Custom URL & Login Section


Remove the "Magic Wand" icon

.sd-magic-link {
    display:none !important;
}

Remove the Magic Link line "We'll email you..."

.sd-magic-link-txt-2 {
    display:none !important;
}

Remove the Magic Link line "Hate remembering..."

.sd-magic-link-txt-1 {
    display: none !important;
}
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