Using CSS in Custom Field Advance Tab

When building custom fields in Project Insight, I see there's an advanced tab where I can add my own CSS. Any tips?

If you know CSS or know a good cheat-sheet to get you CSS properties, you can use the Advanced Tab for any custom field to modify the look of the field.

In the video above, Jeff takes us Margaret through how to use the "Header CSS Style" and "Control CSS Style" sections to make a page that eventually looks like this:

See those cool blue bars? See how the description box fills the screen? All of those layout choices are accomplished through the advanced tab.

The summary?

  • Use Control Cell CSS Style Text to style the entire cell of the field
  • Use Control Input CSS Style Text to style the field's input on the Add/Edit form
  • Use Control Display CSS Style Text to style the field's input on the Display version of the form
  • Use Header Cell CSS Style Text to style the whole cell including the label you've typed in to name the field
  • Use Header CSS Style Text to style the label you've typed in to name the field

If you'd like an explanation of what each of these bullet points mean (I needed an explanation) then follow along with the video above.

Online 5/4/2018
Margaret Campbell
Updated on: