Styling
Styling Web components is easy, which is one of their main advantages. Simply inspect any element to identify the classes identifying it, and include CSS in your application to override the default styles provided.
Learn by Doing
In most cases, you do not need to ready 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; }NOTE: Be sure to set a higher specificity to ensure your overrides take effect, either via the !important operator or with additional ID/class specifiers, such as #my-view #verdocs-view-header ....
When you are done, you should see the following:
Why Not Use CSS Variables?
Some applications use CSS variables to control styles like these, which have a number of advantages in large applications with many variables. However, we chose a more traditional styling path for three reasons:
- For backwards compatibility. While CSS variables are quickly becoming standard, not all applications and developers use them today so they would add unnecessary friction to the process.
- To minimize learning. We believe application developers already have enough work to do developing their own applications. Adding a step to look up and set variable names for every style to be overridden would be an additional burden that we didn't want to introduce.
- Too many variables. We provide over 50 components, each of which includes dozens of default styles. Most developers only need to override a few settings, so it is simpler and faster to override them with standard CSS rules rather than adding a layer of indirection.