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 and Forms which have 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 Form CSS, navigate to Forms and click the three dots to reveal the Link /Embed section for the

Click to 'Add custom CSS' and then use the area below to ad your CSS code.

Or, you can copy and paste the snippets below.

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

MAKE BUTTONS HAVE A "FULLY ROUNDED" LOOK

.btn, .sd-btn-wide-primary-add-36px, .sd-btn-wide-primary-24px, .sd-btn-wide-action-24px{
    border-radius: 30px !important;
}

REMOVE UPPERCASE STYLING FROM CATEGORY/TYPE PILLS

.category-pill, .crm-category-pill {
text-transform: unset !important;
}

HIDE THE PRIMARY ADD BUTTON ON THE MAIN TOP BAR

.sd-nav-bar-add-button {
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;
}

HIDE THE 'LIFESAVER' ICON IN THE TOP BAR

#nav-beacon-content {
display: none;
}

USE A CUSTOM FONT

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

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

HIDE THE DASHBOARD 2.0 ANNOUNCEMENT / MANAGEMENT BLOCK

.dashboard-introducing-wrapper__view2 {
    display:none;
}

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

REMOVE BORDER RADIUS ON TEXT FIELDS

.login .form .form-group .sd-login-email-input, .login .form .form-group .sd-login-password-input {
    border-radius: 0;
}

For use in Forms

CENTER SUBMIT BUTTON

.form-actions.btn-list {
    justify-content: center;
    display: flex;
}

For use in Dashboards and Portal Pages

CHANGING THE TEXT COLOR

.card-block.styling-options-content * {
    color: blue;
}