Protobi

← All help posts

View post

The goal of initial project setup is to provide client's a neat and engaging view of their project. It's best if we can deliver an initial view and have a work session with clients quickly (4 hours - 1 business day).

## Project overview

In [Project overview and branding](/admin-access/logo-and-splash-images) make sure you add a logo and image URL.

Typically the logo is our direct client's logo. The image is the end client's logo. This way, our direct client sees baseball cards with their different client's logo and they can easily identify which project they're looking for.

You can go to [https://app.protobi.com/admin/organizations](https://app.protobi.com/admin/organizations) to find our direct client's logo URL within the organization's account. For the end client image, you can typically find a good high quality image through Google search or on their website (i.e. www.janssen.com).

## Custom CSS

In addition to adding color schemes for charts, we can also change the color of GUI components to give the dashboard a more custom branded feel.

For instance here, you might use red for icons, bars and toggle-able buttons to match the Johnson&Johnson logo.

You can also use Custom CSS to specify what font should be used in the dashboard.

The color for GUI components can be set in Custom CSS.

In the example below, we use CSS to change:

1.   Font for all text seen in project (i.e. question headline, titles, formats, etc.)
2.   Bar color on standard elements
3.   Triangle color on compact groups
4.   Panel heading color on GUI dialogs
5.   Default color of all element icons
6.   Toggle-able toolbar button color
7.   Headline text color on elements that are set to slide layout

## Custom CSS example

```plain
.protobi {font-family:verdana,sans-serif}
.protobi .element .bar.fg {background-color:#578DBC}
.protobi .element.compact table .row-toggle.arrow-right {border-left-color:#444}
.protobi .panel .panel-heading {background:#578DBC}
.protobi  .element .icon-field {background-color:#578DBC}
.protobi .pure-button.pure-button-active {background-color:#578DBC}
.protobi .element.slide .headline {color:#09357A; font-weight:800;}
```

## Multi-element editing mode

For projects where there are a lot of similar questions with the same edits, do the [Basic project setup](/new-to-protobi/basic-project-setup) but use [multi-element editing mode](/edit-access/edit-multiple-elements-at-once) where you can. Consistently selecting multiple groups or elements at once to edit them can significantly cut down the editing time over the course of initial setup.

For instance, fq10x has two groups under it that should both be compacted to mean. You can select both and compact them to mean at the same time.

You can even take this one step further and expand other groups like fq10xb and fq10bxb and select any other groups underneath that should also be compacted to mean.

## Left panel setup

### Banners

Set up the left panels with a Banners tab. It makes it easier for your client because there's already a tab here that allows them to easily add elements to the left side for easy access and for the crosstab drop-down menu.

Make sure you use the exact key “banners” because that is the key reference that will feed into the crosstab drop-down menu.

You can always use title case “Banners” as the displayKey.

### Notes

Add another tab to the left panel for notes. This gives your client a nice consolidated view of all the notes you added during initial setup that you can discuss with them during the work session.

Notes is a chartType, so all you have to do is add a new tab in the left panel and set the chartType from the GUI dialog.

## Colors

Ask the client for their brand or their end client's brand/template [colors](https://help.protobi.com/edit-access/colors#Add%20new%20colors-1).

If they haven't yet provided colors, just make sure the colors in the initial view look nice.

For instance here, if you know that their brand definitely uses red, you could create some monochromatic and dichromatic color schemes.

### Dichromatic

On charts, the dichromatic scheme can looks nice. But make sure your scheme has the enough different shades of colors, or you will run into the issue of different products having the same exact color.

### Gradient

If you simply just use a two point color theme, then you can choose to interpolate the gradients and add a neutral middle color, then there won't be a case of different products having the same exact color.

### Fixed number of colors

If the client doesn't want a dichromatic theme or if they already provided a set number of colors, then simply use those colors as the default color scheme.

You can create various ascending, descending, x-point color schemes using one or more colors from the client's colors.

Sometimes there may be more products, attributes, etc. in the chart than colors that the client provided, in that case you can ask your client what to do.

Here, we're using the 7 colors the client provided on a 12 product chart. The client can choose to add more colors and you can show them during the work session.

But overall having some sort of color scheme that reflects their brand ahead of the call will contribute to a neat and thoughtful initial view that looks and feels familiar to them.

## Presentation mode

Turn presentation mode on before the initial work session. This will make the project look cleaner and less overwhelming especially when it's a first time client, or you're doing a Protobi demo.

Ultimately, it's up to your client if they want to keep presentation mode on and you can show them how to toggle it on/off during the call.

Note that presentation mode automatically puts the text that's in the displayKey into the headline, if there's no displayKey it falls back to the key. You can press directly on the headline if you want it to be different than the displayKey/key.

## Admin tab

Tuck away disclosures and hidden variables into an Admin tab. You can review these elements with the client during the work session, but to maintain a neat view it's best there's a designated place to put elements that might never be looked at.

## Project inventory

Add a tab in the center panel for [project inventory](/new-and-updated-articles/add-project-inventory-details). A project inventory element is a list of project details like the number of rows and columns in the data and the number of elements in the project setup.

If a client's project has a longer than usual load time, it's nice to have this element handy to check the inventory for number of blank cells and unreachable elements.

Inventory is a chartType, so all you have to do is add a new tab in the left panel and set the chartType from the GUI dialog.

Publishing

Date

Status

Slug edit

Content

Thumbnail

Categories Manage

Tools

AI Database

Publishing

Content

Tools

Danger zone