CSS customization

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 guides on customizing Flexmonster.

General approach

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:

• The element’s selector. Learn more about selectors in Flexmonster.
• The !important keyword.

Add the rule to your custom theme or to a separate CSS file.

About selectors

All Flexmonster's elements are marked with class names that start with the fm- prefix, for example, fm-cell, fm-header, and fm-total. Use the DevTools to find the selector of the element you want to customize.

Check out the table with the most useful selectors:

Example 1. Set a custom font family for the component

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

Live example

Example 2. Style total and grand total colors

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

Live example

You can also customize totals and grand totals using the customizeCell() API call. Learn more in the Customizing the grid cells guide.

Example 3. Set custom width and height of rows, columns, and headers

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

Live example

Example 4. Customize the grid scrollbar

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

Live example

See also

• More examples of CSS customization
• Changing themes
• Customizing the grid cells
• Creating a custom UI control or view