Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Changing themes

    This article describes how to customize the Flexmonster’s appearance using CSS.

    Our component comes with predefined themes and provides their source code so you can quickly create custom ones.

    Predefined themes

    Flexmonster comes with a variety of ready-to-use CSS themes. Each available theme is located in the flexmonster/theme/[theme-name]/ folder:

    Сheck out the Flexmonster themes demo.

    If necessary, see how to get Flexmonster.

    Default theme

    If no theme is specified, Flexmonster will use the styles available inside the flexmonster/flexmonster.css and flexmonster/flexmonster.min.css files. The flexmonster.less file for the Default theme is in the flexmonster/theme/default folder.

    Applying a theme

    To apply a theme, add a reference to the theme’s CSS or minified CSS file to your project:

    <link rel="stylesheet" type="text/css"
    href="flexmonster/theme/[theme-name]/flexmonster.min.css" />

    For example, set the Light Blue theme with the following line of code:

    <link rel="stylesheet" type="text/css"
    href="/theme/lightblue/flexmonster.min.css" />

    Creating a custom theme

    You can create a custom theme using the theme builder or manually:

    Using the theme builder

    Step 1. Download a .zip archive with the theme builder or clone it from GitHub with the following commands:

    git clone https://github.com/flexmonster/custom-theme-builder
    cd custom-theme-builder

    Step 2. Install the npm dependencies described in package.json:

    npm install

    Step 3. In the custom-theme-builder/ folder, find and open the flexmonster.less file that contains styles for Flexmonster. Then, adjust the necessary styles.

    For example, let's change font styles and the theme's main color:

    // Other styles
    @font-family: serif;
    @font-size: 15px;
    @theme-color: antiquewhite;
    // Other styles

    Other CSS styles can be customized similarly. 

    Step 4. Run the theme builder to generate CSS and minified CSS files for the theme:

    npm start

    As a result, the flexmonster.css and flexmonster.min.css files will appear in the custom-theme-builder/generated-theme/ folder.

    Step 5. Apply your theme to the component.

    Now launch the page from a browser — your custom theme is set for the component.

    Manually

    Step 1. Inside the theme/ folder, duplicate any folder with an existing theme to use as a template (e.g., lightblue/).

    Step 2. Rename the duplicated folder to a custom theme name (e.g., custom-theme-folder/).

    Step 3. Set custom styles in the theme/[custom-theme-folder]/flexmonster.less file.
    After replacing the values, compile flexmonster.less into CSS and minified CSS files. For more details, see the Less documentation.

    Note We do not recommend editing the styles inside the theme/[custom-theme-folder]/flexmonster.css file. Otherwise, if you update the Flexmonster package, you will need to manually merge the updated Flexmonster styles into your theme’s flexmonster.css.

    Step 4. Apply your theme to the component.

    Now launch the page from a browser — your custom theme is set for the component.

    Further customization

    You can apply further customization using the Less CSS preprocessor or plain CSS:

    Using Less

    If you use Less, we advise creating your own theme based on one of the existing ones. Then, follow the steps below:
    Step 1. Add custom code at the end of the flexmonster.less file. For example, the following code will change the style of the component’s sheet header:

    #fm-pivot-view .fm-grid-layout div.fm-sheet-header {
      background-color: @theme-color-superdark !important;
      color: @theme-color-supersuperlight;
    }

    You can customize other Flexmonster elements in the same way.
    Step 2. Compile the flexmonster.less file into CSS and minified CSS files. For more details, see the Less documentation.

    Step 3. Apply your theme to the component.

    Using plain CSS

    To apply additional customization using plain CSS, write a custom CSS code in a separate file (e.g., my-flexmonster-styles.css) and keep the original styles in flexmonster.css without changes.

    Look at the following example: how to add custom CSS for the grid. It demonstrates how grid colors can be changed via additional CSS.

    The full list of examples with custom CSS is available on our Examples page.

    What’s next?

    You may be interested in the following articles: