Skip to main content

Customization and theming

Visual customization​

You can customize Docassemble, and Assembly Line interviews, with a Bootstrap 5 theme.

Customizing the logo and title for Assembly Line interviews​

You should also customize the:

Creating a custom CSS theme with Bootstrap.build​

If you want to build a custom theme, you can:

  1. build one from Bootstrap 5 source
  2. start with a theme generator tool like bootstrap.build and in some cases, add some custom CSS to make it work with Docassemble.

Using bootstrap.build is the simplest option for most authors.

  1. Visit the bootstrap.build website.
  2. Click the button to open the Builder
  3. Customize the options that you want to customize. Typically those will include:
    • Under color system, the $gray/$blue/etc. colors, if you use a matching color in your theme
    • Under color system, almost always the variables primary, secondary, success, info, warning, danger, light and dark
    • Under Typography, customize any fonts that you wish to use
    • Under forms, you may want to customize button size and rounded edges
  4. Click the "export theme" button (it may be hidden behind a banner at the top of the page) and choose the "bootstrap.min.css" option. Rename this theme to be more specific. Optionally, download the _variables.scss file so that you can easily load and adjust your settings in future.

Add this theme to your Docassemble playground using the Folders | Static menu.

Next, you will need to make a small adjustment to the theme generated by bootstrap.build. Copy and paste the code below into the bootstrap.min.css file (or your new file name).

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
  
.bg-dark {
  background-color: #1a73e8!important;  /* replace with your desired nav bar color */
}