Customization

Viafoura's widgets have been built in a componential style, separating out layout styles and “client overridable” styles to provide you with a modularized CSS that allows for more customization to fit the feel of your site.

🚧

Supported Customizations

We only fully support client customizations outlined in documentation.viafoura.com, we cannot guarantee forwards compatibility with any other customizations.

How Viafoura Writes CSS

Viafoura's CSS follows a set of rules:

1. All styles are nested in a .viafoura parent class to provide namespacing
2. We use as few CSS selectors as possible to improve both CSS weight and render time
3. We try avoid the use of tag/element selectors because they can cause CSS to flow outside of the domain

Viafoura's Recommended Best Practices

1. Place the tray tag directly in the body element. This is recommended in our documentation to avoid unnecessary style overrides, especially as the tray is in a fixed position, it will avoid positioning bugs.
2. !important styles will indiscriminately override our styles, use with caution.
3. Avoid styles that select on tag names (ul, li, div) rather than class names where possible. This helps to keep styles within expected boundaries and avoid overflowing styles from one domain to another.
4. Please do not use display: none to hide our elements, as this may cause issues with focus traps and general accessibility, which may actually throw fatal JS errors from our widget code.