Managing Interface Elements
Manager Contents
 User Contents
Contents

Introduction

Quick Tip - Web Safe Colors

When specifying colors for your Interface Preference, try to use only Web Safe Colors.


CATSWeb Interface Elements allow extension of Interface Preferences through the use of CSS styles. Interface Elements can be used to customize colors, fonts, text fonts and sizes as well as advanced layout control such as positioning, hiding, and hover effects. CSS markup may be added in the Element Content field or via external .css files. Interface Elements are available at the bottom of Interface Preferences that have "CSS" selected in the Layout/Style Type field.
Quick Tip - Designing Interface Preferences
  • Create your Interface Preference by copying it from a pre-existing one (select a template Interface Preference prior to clicking Add).
  • Select your new Interface Preference on the My CATSWeb page. Your Administrator may need to grant you permission to do this.
  • Edit your Interface Preference, modify settings and submit. You will immediately see the effects of your changes, but other users will not see the effects until their next login.
  • For most efficient editing, use two browser windows. To open a second browser window, point at any link in CATSWeb, right-click, and choose the option to Open in New Window. Submit your changes in the first browser, then reload the page in the second browser to see the results.
  • When using a CSS Layout use the Preview Interface CSS Classes link to show a preview of the styles within the Interface Preference.

Back to Top

 Interface Element Descriptive Name

The Interface Element Descriptive Name is the name for the Interface Element that will appear in the list on the Interface Preference form as well as in the style override fields in field definitions. This name should describe what effect the Interface Element will have.

Back to Top

 Element Mode

The Element Mode field determines when an Interface Element will be applied.

  • All - The Interface Element will be applied in Add, Edit and View modes.
  • Add/Edit - The Interface Element will be applied in Add and Edit Mode only.
  • View - The Interface Element will be applied in View Mode only.
  • None - The Interface Element is disabled and will not be applied.

Back to Top

Description

The Description field allows for an extended description of the Interface Element.

Back to Top

 Element Type

The Element Type field specifies the type of Interface Element:

  • CSS Selector - This option is used for CSS markup entered directly into the Interface Element form, for example the markup below would expand the Title field on a form:

#CTRLTitle{
          width:500px;
}

  • External CSS File - This option allows a reference to an external CSS file. Use a relative path to specify the file location. Entering "css/tabs.css" (without quotes) would load the tabs.css file in the css folder.

 

  • External JavaScript file - This selection allows inclusion of external JavaScript files for manipulation of CATSWeb forms. Use a relative path to specify the file location. Entering "jsCore/tabs.js" (without quotes) would load the tabs.js JavaScript file in the jsCore folder

 

CSS Selector

The CSS Selector field allows entry of the CSS class name. Adding the class name here adds the class to the style override lists in field definitions. Adding the CSS selector name is valid only for CSS classes (not id or element based selectors). The CSS Selector field should be filled with the CSS class name (without the dot).  The CSS class blueandwhite below should have "blueandwhite" entered in the CSS Selector field to make it available for field level overrides.

.blueandwhite{
   background-color:blue;
   color:white;
   font-weight:bold;
}



Back to Top

Element Content

This field holds the content of the Interface Element. When entering CSS the mark up must be valid with proper beginning and ending braces. External file references should be entered with a relative path.

Back to Top