This guide describes the general approach to Flexmonster CSS customization. To see different examples of such customization, visit our Examples page.
Check out other available tutorials on customizing Flexmonster.
Every element of Flexmonster's UI is a regular DOM element with CSS classes, so it can be styled with plain CSS.
To customize an element, create a CSS rule that includes:
Add the rule to your custom theme or to a separate CSS file.
All Flexmonster's elements are marked with class names that start with the fm- prefix, for example, fm-cell, fm-header, and fm-total.
Check out the table with the most useful selectors:
| Selector | What it targets |
|---|---|
[class^='fm'] (inside your Flexmonster container) | Every Flexmonster element at once—useful for global changes like font family. |
#fm-pivot-view | The pivot table’s root container. Use it to increase the specificity of your rules. |
.fm-grid-view, .fm-grid-layout | The grid container. |
.fm-cell | Any grid cell (data cell, header, or total). |
.fm-header | Header cells. |
.fm-total, .fm-grand-total | Subtotal and grand total cells. |
.fm-level-0, .fm-level-1, … | Cells at a specific hierarchy depth. |
.fm-scroll-pane, .fm-scroll-content | The scrollable area and its scrollbar. |
.fm-sheet-header | The sheet/report header row above the grid. |
Use the [class^='fm'] selector to apply one font family to every element of the component at once:
#pivot-container [class^='fm'] {
font-family: "Verdana", sans-serif !important;
}Target .fm-total and .fm-grand-total selectors to give subtotals and grand totals the necessary colors:
#fm-pivot-view .fm-grid-layout .fm-total {
background-color: #bbf492 !important;
}
#fm-pivot-view .fm-grid-layout .fm-grand-total {
background-color: #f4b19f !important;
}You can also customize totals and grand totals using the customizeCell() API call. Learn more in the Customizing the grid cells guide.
Use the following selectors (and their -mobile counterparts for responsive layouts) to resize rows, columns, and headers:
#fm-pivot-view .fm-grid-row,
#fm-pivot-view .fm-grid-row-mobile {
height: 20px !important;
min-height: 20px;
}
#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
width: 90px !important;
min-width: 90px;
}
#fm-pivot-view .fm-grid-header,
#fm-pivot-view .fm-grid-header-mobile {
height: 20px !important;
width: 20px !important;
}
To change the scrollbar's width, background, or thumb color, target the .fm-scroll-pane pseudo-elements.
Note that since the scrollbar relies on the ::-webkit-scrollbar pseudo-element, it works in Chromium-based browsers (Chrome, Edge, Opera) and Safari, but not in Firefox.
:root {
--scrollbar-width-height: 15px;
}
.fm-scroll-pane::-webkit-scrollbar {
background: #f1f1f1;
width: var(--scrollbar-width-height);
height: var(--scrollbar-width-height);
}
.fm-scroll-pane::-webkit-scrollbar-thumb {
background: #c5c5c5;
}
/* Keeps the last row/column border continuous after resizing the scrollbar */
.fm-scroll-content[style*="17px"] {
right: var(--scrollbar-width-height) !important;
bottom: var(--scrollbar-width-height) !important;
}