Guides
Shape Help Center

Custom CSS Dashboard Branding

Custom CSS allows you to tailor the look and feel of your NinjaCat dashboards. This ensures they align with your brand’s colors, and design elements. This enhances visual consistency, making them more professional and engaging for stakeholders. This guide will list the editable elements of the NinjaCat dashboard.

Suggest Edits

📘

The ability to use custom css on a dashboard must be enabled by a NinjaCat team member. If you are not able to, contact NinjaCat.

Input Dashboard Custom CSS

1. Go to the Setup Settings

  1. Click on "Agency Settings" in the setting menu then "White Label" under the Agency Settings header
  2. Enter your custom CSS into the field under "Dashboard Theme"

CSS Editable Items

Menu Bar

Logo Size

.shinobi-dashboard-body .menu-icon img {
    max-height: 53px; /* Suggested max height */
    max-width: 53px;
    border-radius: 4px;
}

Menu Bar Background Color and Border

.shinobi-dashboard-body .dashboard-floating-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #d3d3d3;
}

Top Bar Menu Item Border

.shinobi-dashboard-body .dashboard-menu-item {
    border-right: 1px solid #d3d3d3;
}

Menu Item Text Color

@media only screen and (max-width: 1499px) {
    .shinobi-dashboard-body .account-item .menu-info .menu-subtext, 
    .shinobi-dashboard-body .page-item .menu-info .menu-subtext, 
    .shinobi-dashboard-body .menu-title {
        color: #011738;
    }
}

Menu Item Hover Background Color

.shinobi-dashboard-body .dashboard-menu-item:hover, 
.shinobi-dashboard-body .menu-item:hover {
    background-color: #f6f6f6;
}

Menu Icon Color

.shinobi-dashboard-body .menu-icon svg {
    color: #444444;
}

Menu Icon Hover Color

.shinobi-dashboard-body .right-action-item:hover {
    background-color: #ffffff;
}

Menu Item Hover Text Color

.shinobi-dashboard-body .dashboard-menu-item.active .menu-info .menu-subtext {
    color: #444444;
}

Dropdown Background Colors

.shinobi-dashboard-body .menu-dropdown-layer-1 {
    background-color: #ffffff;
}

.shinobi-dashboard-body .menu-dropdown-layer-2 {
    background-color: #ffffff;
}

Dropdown Item Border

.shinobi-dashboard-body .menu-item {
    border-bottom: 1px solid #f1f1f1;
}

Search Input Colors

.shinobi-dashboard-body .search-input {
    background-color: #ffffff;
    color: #000000;
}

.shinobi-dashboard-body .search-input::placeholder {
    color: #999999;
}

Filters

Filter Selected Text Color

.shinobi-dashboard-body .dashboard-menu-item.active .menu-info .menu-subtext {
    color: #444444;
}

Select All Filter Link

.shinobi-dashboard-body .list-select-all {
    color: #444444;
}

Filter Item Checkbox (Checked State)

.shinobi-dashboard-body .checkbox-list-item input:checked ~ .checkmark {
    background-color: #444444;
}

Filter Item Text Color

.shinobi-dashboard-body .checkbox-list-item label {
    color: #7b7b7b;
}

Filter Apply Button

.shinobi-dashboard-body .checkbox-list-apply .button {
    background-color: #444444;
    color: #ffffff;
}

Filter Applied Bar

.shinobi-dashboard-body .dashboard-floating-filter {
    background-color: #444444;
}

Filter Applied Bar Item

.shinobi-dashboard-body .filter-bar-item {
    color: #ffffff;
    background-color: rgba(255,255,255,.12);
    padding: 6px 6px 6px 12px;
    border-radius: 4px;
}

Filter Applied Bar Item Remove Icon

.shinobi-dashboard-body .filter-item-close {
    background-color: rgba(255,255,255,.19);
}

.shinobi-dashboard-body .filter-item-close svg {
    fill: #ffffff;
}

Filter Applied Bar Text Links

.shinobi-dashboard-body .filter-bar-clear {
    color: #ffffff; /* Clears all applied filters */
}

.shinobi-dashboard-body .filter-bar-viewall {
    color: #ffffff; /* Expands all collapsed filters */
}

Date Selector

Date Selector Display Text

.shinobi-dashboard-body .dashboard-menu-item .comiseo-daterangepicker-triggerbutton {
    color: #808b9c;
}

Date Selector Display Hover Text

.shinobi-dashboard-body .dashboard-menu-item .comiseo-daterangepicker-triggerbutton:focus, 
.shinobi-dashboard-body .dashboard-menu-item .comiseo-daterangepicker-triggerbutton:hover {
    color: #808b9c;
}

Mobile

Mobile Bar Background Color and Border

@media only screen and (max-width: 1024px) {
    .shinobi-dashboard-body .mobile-dashboard-floating-bar, 
    .shinobi-dashboard-body .mobile-close-header {
        border-bottom: 1px solid #f5f5f5;
        background-color: #fff;
    }

    .shinobi-dashboard-body .menu-subtext {
        color: #444444;
    }
}

Updated 29 days ago