Customize Protobi style

Setting your own custom CSS style properties

Updated at February 13th, 2020

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. 

Custom styles

Go to the Admin page for your project and choose the "Data" tab. Create a new document with a special key header. This will be included in the header of your project, and allows you to specify custom styles.

Press "Edit/Run" and add custom html: 

In this example we're including Open Sans font from a CDN, setting that as the default font for Protobi, and making the element titles extra bold. Elements now look like this: 

Advanced support

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

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

Was this article helpful?