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:
- build one from Bootstrap 5 source
- 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.
- Visit the bootstrap.build website.
- Click the button to open the Builder
- 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
anddark
- Under Typography, customize any fonts that you wish to use
- Under forms, you may want to customize button size and rounded edges
- 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 */
}