Customize Protobi style

Setting your own custom CSS style properties


Updated at October 15th, 2019

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 logo and splash image in the upper left. Watch our "Logo and splash images" tutorial. 

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

Was this article helpful?