Customize Protobi style

You can change the look and feel of Protobi to fit your project by setting your own custom CSS style properties. This requires familiarity with cascading style sheets (CSS) and a little patience. But by doing so, you can yield a deliverable that matches your brand.

Logo and splash images

The first customization you'll want to make is set the splash image and logo in the upper left. This can be done by admins in project settings. See the Project overview tutorial to learn more. 

Here's the polished version:

Custom style

Protobi lets you tailor the visual appearance of your survey dashboard using standard CSS ("Cascading Style Sheet" syntax). Navigate to your Projects Settings page and open the Custom CSS tab:

Every rule follows the same pattern it starts with .protobi to scope the style to your dashboard, then narrows down to the specific element you want to change. Think of it as saying: "inside this Protobi dashboard, find this thing, and apply this style."

Examples

Example 1 — setting a default icon color

.protobi .icon-field {
    background-color: #4D4D4D;
}

This sets the background color for every element icon in your dashboard. Any icon that does not have a color defined elsewhere will fall back to this value, making it a useful way to establish a consistent baseline across your project.

Example 2 — setting a default bar color

.protobi .element .bar {
    background-color: #3399CC;
}

This applies a color to every bar across every element in the dashboard. It is usually the first style you set when theming a project your baseline before any filters or special states come into play.

Example 3 — styling bars in a filtered state

.protobi .element .filtered .bar.fg {
    background-color: #ED1A46;
}

When a user applies a filter for example, narrowing results to respondents aged 18–34 the foreground bars representing that filtered subset change color. By default this is yellow, but you can override it to match your project's color system. Red is a common choice since it gives users an immediate visual signal that they are looking at a filtered view rather than the full dataset.

These three examples cover some of the most common style overrides, but they are just a starting point. Most other visible parts of the dashboard fonts, spacing, backgrounds, headers can be customized the same way using the .protobi parent class as your scope.

Advanced support

If you're customizing CSS, you're an advanced user. We're happy to help you accomplish your goals. Contact us at support@protobi.com

See related

Another way to give a Protobi project the look and feel of your (or your client's) brand is showing it in custom colors.