Custom CSS

When the Branding settings don't reach a specific element, target it with Custom CSS. Here's the workflow developers actually use.

Every Branding profile has a Custom CSS area under Advanced Customizations. Anything you put there is injected into the Yurbi interface for whichever audience the profile is assigned to — so you can match fonts, colors, spacing, and component styling exactly to your application.

The workflow

1. Inspect the element. In Yurbi, right-click the thing you want to restyle and choose Inspect. Find its class name in the DevTools elements panel.
2. Write a rule with !important. Yurbi's built-in stylesheets use specific selectors, so your rule needs !important to win:

   .some-yurbi-class {
       color: #ffffff !important;
   }
   

3. Paste it into Branding. Admin → Branding → edit/create a profile → Advanced Customizations → Custom CSS.
4. Assign the audience. All Users, or a specific Group or User.
5. Save & Apply. It takes effect the next time that user logs in and views the affected screen.

Worked example: grid column headers

Grid headers are a common request. Yurbi uses two different grid components, so the selector depends on which one you're styling:

• Default Data Grid → .jqx-grid-column-header
• Aggregate Grid visualization → .dx-datagrid-headers (plus the inner .dx-header-row > td for text color/size/weight)

/* Default Data Grid headers */
.jqx-grid-column-header {
    background-color: #48cae4 !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

The full snippet for both grid types is in the knowledge base: Customize Grid Column Header Styling via Custom CSS.

Tips

• Always add !important — without it, Yurbi's default styles override yours.
• Use valid 6-digit hex (#ffffff, not #fffff) — a bad value is silently ignored.
• Test on yourself first — assign the profile to your own user before rolling it out to a group or everyone.
• Class names can shift between versions. Re-inspect after an upgrade if something stops applying. If you're hunting for the right selector, send us the element and we'll help.