Styling

Learn By Doing

In most cases, you do not need to read any documentation or memorize lists of class names or patterns. Every Verdocs component has Verdocs-prefixed classnames to prevent conflicts with other components in host applications.

For example, suppose you want to change the color of the header/toolbar shown when viewing an Envelope from our default of dark-blue (#33354C) to one of your brand colors:

If you inspect the header you can see the classname or ID that controls this color. In this case an ID was applied because some applications may choose to move the toolbar entirely (such as to make it float):

Changing the background to a new color such as (#1b7591) is as simple as including the following CSS anywhere in your application:

#verdocs-view-header {
  background-color: #1b7591 !important;
}

When you are done, you should see the following:

CSS Variables

Class and ID rules can reach anything, but the handful of things most apps want to change (the brand color, fonts, corner radius, and field styling) are also exposed as CSS variables, so one rule restyles every component at once. These are the same variables a brand's published styles set, which is how the hosted signing page picks up your brand. Set them on :root so every component sees them:

:root {
  --verdocs-primary-color: #654dcb;
  --verdocs-primary-font: Georgia, serif;
  --verdocs-button-radius: 999px;
  --verdocs-field-background: #8dc63f1a;
}

Anything not in this list is still one inspect-and-override away with the approach above.