This section provides an overview of ways that you can customize the user interface that end users see.
You can give docassemble a new “skin” by creating your own
Bootstrap theme. This can be configured globally for the server with
bootstrap theme Configuration directive or for a particular
interview with the
bootstrap theme feature.
Bootstrap has a “night mode” that is activated automatically based on
the browser or OS settings. You can prevent the browser from switching
into “night mode” using the
auto color scheme Configuration
If you are happy with the Bootstrap theme but you want to make tweaks
to CSS in particular places, you can customize the CSS by providing
css files. You can store these files in the Static folder
of the Playground, or the
data/static folder of your docassemble
add-on package. It is also possible to enable CSS files globally on
the server using the
global css Configuration directive.
You can use the Inspect tool of your browser to look at the HTML
elements you want to modify, and they will usually have CSS classes
da, or an
id. You can write CSS rules that target
these elements. You can add CSS classes to field elements using the
css class field modifier. The
action buttons interface allows
for the specification of a CSS class. You can set the
modifier on a
question in order to attach a CSS class to the
<body> element for that question.
Many UI elements can be customized using screen parts. Screen parts refer to particular parts of the screen, such as the interview title in the navigation bar, the name of the tab in the web browser, or the optional page footer. You can use screen parts to insert text or HTML into various areas of the screen. The screen parts system can also be used to customize the text and color of standard buttons, like back buttons and help buttons.
Some of these screen parts exist on non-interview pages. These can be customized using Configuration directives for the screen parts of administrative pages.
The main navigation bar at the top of the screen can be hidden
By default, docassemble uses a Bootstrap “dark” appearance for the
navigation bar, but this can be customized using
After the back button, the navigation bar shows the
part. On small screens, the
short title screen part appears
instead. It is important to test interviews on a variety of devices to
make sure that the title looks appropriate. The
title can be replaced with raw HTML using the
screen parts. Using large logos is strongly discouraged because
users may be using your site on small-screen devices, and they will be
annoyed that your advertising is taking up a large percent of the
screen. If your logo increases the height of the navigation bar, you
will need to customize the CSS to correct for this.
If you see “</>” in the navigation bar when using an interview, that
means you are in debug mode. This is turned on by default when you are
using the Playground, but it is not appropriate in production. This is
controlled with the
debug Configuration directive.
The interface in the upper-right corner, which reduces to a “hamburger icon” on small screens, lets the user log in, or shows a menu, or shows the exit button. This can be customized using:
show loginmetadata specifier or the
show loginConfiguration directive.
menu_itemsspecial variable, which lets you add your own items to the menu.
hide standard menuoption in
exit link, and
exit urlscreen parts, which allow you to customize the exit button.
administrative interviewsConfiguration directive, which lets you add items to the menu for launching particular interviews or visiting particular URLs.
show profile linkConfiguration directive.
show interviews linkConfiguration directive.
show dispatch linkConfiguration directive.
hide corner interfacefeature, which completely removes the corner interface.
You can add a progress bar to the top of the screen. You can also add a secondary navigation bar that shows the sections of the interview. This navigation bar can be vertical on the left side of the screen or horizontal across the top of the screen. It is also possible to insert a version of the navigation bar into the body of a question.