Skip to main content
Unificus
Get Notified

Custom CSS Snippets

Customize Unificus styling with CSS code across your portal, login, and forms.

Understanding Custom CSS

Custom CSS lets you add personalized code to override the platform’s default styling, colors, and spacing in specific areas. This feature provides extensive customization options tailored to your unique requirements.

Where to Add Custom CSS

You can apply Custom CSS in three main locations. This guide covers general CSS that applies throughout your portal, plus separate sections for your Custom Login page and Forms.

General Portal CSS

  1. Open Flyout Menu > Platform Branding
  2. Learn more about Platform Branding
  1. In the Advanced section, toggle Enable Advanced Custom CSS to ON
  1. Enter your Custom CSS code in the provided field, or paste any of the ready-made snippets below

Custom Login Page CSS

  1. Navigate to Flyout Menu > Custom URL & Login (after setting up your Custom Login)
  2. Learn more about Custom Login
  1. In the Custom CSS section, toggle Add custom CSS to ON
  1. Enter your CSS code or use the login-specific snippets below

Form CSS

  1. Go to Forms and click the three dots to reveal the Link /Embed section
  1. Click Add custom CSS and input your code below

Platform Branding CSS Snippets

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

Replace the hex code with your preferred color.

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

Hide the date in Announcements

.dashboard-anns__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 ‘Pay Now’ button on Invoices

.sdPayNow {
    display:none;
}

Hide the ‘Lifesaver’ icon in the Top Bar

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

Use a Custom Font

Replace “YOURFONTFAMILY” and “YOURBACKUP” with fonts of your choice (for example, 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: Import new fonts from Google Fonts.

Hide the Dashboard 2.0 Announcement / Management Block

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

Custom URL & Login CSS Snippets

Remove the “Magic Wand” icon

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

Form CSS Snippets

Center Submit Button

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

Dashboard and Portal Page CSS Snippets

Change the Text Color

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