Sign in
x
☰

Customize Protobi style

Setting your own custom CSS style properties

Updated at 2019-06-26 17:48:52 UTC
Stylized header image showing the word "CSS" in large blue letters overlaid on light gray background elements including animation direction arrows and circular indicators. The image serves as a visual introduction to CSS styling capabilities.

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.

Protobi Admin interface showing the configuration form for a new document with key "header" and type "process". The form displays fields for Table (header), Type (process), Updated timestamp, Description (empty), and Admin action buttons including Edit/Run, Delete, and Make primary.

Press "Edit/Run" and add custom html: 

Code editor window showing HTML and CSS customization code. Line 1 includes a link tag to load Open Sans font from Google Fonts. Lines 3-14 contain a style block with CSS rules: lines 4-6 set the font-family for .protobi .element to Open Sans, and lines 7-13 set font-weight to 800 (extra bold) with !important flag for .element .title selector (duplicated twice).

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: 

Protobi data element displaying fuel efficiency data with custom styling applied. The element shows "mpg" as the title in bold Open Sans font. Below is a filter input box with Apply button, followed by a frequency distribution table showing MPG ranges from [NA] to 40.1-45, with corresponding percentages and horizontal blue bars. Statistics show Mean of 23.8 and N of 157.

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.