There are occasions when it is useful to apply your own styles to specific elements within a form on the add or edit screen.  An understanding of Cascading Style Sheets is essential to use this feature.  You can use most browsers “inspect” mode to determine the element names to which you want to apply a style.

To accommodate this, there is a file within the directory structure evj\stylesheets\user_stylesheets named user_stylesheet.css.  evj is the location of your installation within your server.

You may place any valid CSS within this file to augment the styles on your add and edit screens.  Not every style may be overridden, but it is likely that those you want to alter can be adjusted within this file.

Example

You have an HTML Area field named kb_article on an edit screen.  This is read-only but you want to restrict its width to fit neatly on the screen.  Layout cell attributes such as SIZE and STYLE only work with writable fields so are not a solution.

An inspection of the browser’s DOM shows the field structure as this:

The field is rendered within the row with the ID of f_kb_article.  To limit the width of this field, but not alter the CSS class named isolateInnerText which may be used elsewhere on the same form, create an entry within the user_stylesheet.css file like this:

#f_kb_article .isolateInnerText {
max-width:500px;
}

This will limit the field to have a maximum width of 500 pixels without altering any other field rendered on the form.

Hints

  • If you want to replace a style within a form, you can use the !important modifier, unless this is already used on style.  This is usually going to work within add and edit screens
  • The top level identifier within both add and edit screens is a table with the ID of top_lvl_table.  You can refer to this within CSS as #top_lvl_table
  • The labels of fields are preceded with an ID of t_.  For example the ID of the field label in the above example is t_kb_article
  • The values of fields are preceded with an ID of f_.  For example, the ID of the field value in the above example is f_kb_article.