For the complete documentation index, see llms.txt. This page is also available as Markdown.

Theming

Restyling DashboardJS with nothing but HTML and CSS

DashboardJS ships two stylesheets, and the split is the whole theming story:

File
What it does
Edit it?

css/rules.css

Structural rules the component needs to function — grid behaviour, show/hide, view switching.

No.

css/theme.css

Everything you can see: colours, spacing, radii, fonts, icons.

Yes. This is your theme.

<link rel="stylesheet" href="dashboardjs/css/rules.css">
<link rel="stylesheet" href="dashboardjs/css/theme.css">

Keep them in that order — theme.css is meant to win.

Class names

Every component renders a predictable class, so you can style any part without touching JavaScript.

Class
The component

.dashboard-component

The dashboard root.

.tabs-component · .tab-component

The tab strip and each tab.

.recordset-component

The records container.

.record-component

One record.

.record-image

A record's image.

.fields-wrapper · .field-component

The fields container and each field.

.field-title · .field-text · .field-icon

A field's label, value and icon.

.actions-wrapper · .action-component

The actions container and each action.

.action-text · .action-icon · .action-link

Parts of an action.

.actionsmenu-component

The dropdown when actionsType: 'menu'.

.fieldheadercontainer-component · .fieldheader-component

Column headers, List view only.

.filtering-component · .filteringkeyword-component

The keyword box and each keyword chip.

.sorting-component · .sortingitem-component

The sort control and its entries.

.paging-component · .pagebutton-component

The pager and its buttons.

.viewswitcher-component

The Cards / List toggle.

.userprofile-component

The sidebar profile card.

.badge

A tab's record count.

.dashboard-tools

The row holding sort, filter and view controls.

.breadcrumbs-wrapper

The tab description area.

State classes

Applied by visibility and the view switcher:

Class
Meaning

.hide

Hidden.

.disable

Greyed out, click handlers removed.

.cards · .list

The active view mode, set on the dashboard root.

.active

The open tab.

.cursor-pointer

Something clickable.

Your own classes

Any component takes a class, and it may be computed:

For a class that depends on something outside the row, use onRender:

Inline styles

style takes CSS property/value pairs and may also be a function:

Layout

Two grids, set with real CSS Grid pairs:

Because they are plain CSS, media queries work as usual:

Icons

Any icon is a class name, so bring your own or use a library:

The built-in icons — info-icon, pay-icon, edit-icon, cancel-icon — live in assets/ and are wired up in theme.css.

The markup

dashboard.html is ordinary HTML. Copy it, restructure it, and load your copy with templateURL. The library binds to the class names in the table above, so keep those and change everything else.

Building the CSS

theme.css is compiled from Sass:

Edit the .scss source rather than the compiled theme.css, or your next build will overwrite it.

Last updated