- Open Client Style Elements

Open Client Style Elements

Open Client's visual appearance is defined by CSS style properties held in style sheets. These are files are stored on the Open Client Server. There are two default style sheets supplied: PROIVDefaultStyle.css and PROIVFixedStyle.css. You should not make changes to the PROIVDefaultStyle.css as this file is reinstalled on upgrades and your changes will be lost. Instead, you should create your own style sheet underneath the appResources folder and use this to override style elements. The PROIVFixedStyle.css contains elements that should not be changed unless the implementation of a widget is being replaced. Changing style elements in the style sheet may stop a widget from working.

Style Changes for PROIV Open Client V

The Paging Area is a grid and is controlled by the Paging Grid style elements.
List boxes use the same style elements as the Paging Area grid.
Check boxes are nodes with an image and not a browser input node. The images are located in the appResources/appImages folder and called checkbox_on.gif and checkbox_off.gif.
The radio s are nodes with an image and not a browser input node. The images are located in the appResources/appImages folder and called radio_on.gif and radio_off.gif.
The combo has several images that can be used in normal pages and in Paging Areas. The images are located in the appResources/appImages folder, and the names start with combo_...
The combo has Paging Area versions of its fmbut images. The images are in the appResources/appImages and called fmbut1_paging.gif and fmbut2_paging.gif.
The date has a Paging Area version of its datepicker images. The image is in the appResources/appImages and called datepicker_paging.gif.
The Resizing Debug lines are drawn with images in appResources/appImages folder. These are:

h_spring.gif
h_group.gif
h_spring_max.gif
h_spring_min.gif
v_group.gif
v_spring.gif
v_spring_max.gif
v_spring_min.gif

The Paging Area and list box column sort images are in the appResources/appImages and called sort_down.gif and sort_up.gif.
The mode icons are in the appResources/appImages as

add_icon.gif
change_icon.gif
delete_icon.gif
expand_contract_icon.gif
insert_icon.gif
lookup_icon.gif
window_icon.gif

The following style properties can be overridden:

Property	Description
General Properties
proiv-accelerator	Displays an accelerator character in text.
proiv-HighlightText	The selected text in combo box, list box and Paging Areas.
proiv-HighlightTextBackground	The background for selected text in combo box, list box and Paging Areas.
proiv-Tooltip	The tooltip panel and text.
Window Properties
proiv-Rwindow	The root window panel.
proiv-RwindowInactive	The root window panel when a pop-up window has focus.
proiv-RwindowPanel	The root window background panel.
proiv-Pwindow	The pop-up window panel.
proiv-PwindowHeader	The pop-up window header.
proiv-PwindowTitle	The pop-up window title.
proiv-PwindowClose	The pop-up window close .
proiv-PwindowPanel	The pop-up window background panel.
File Upload Dialog Properties
proiv-FileRead	The File Upload pop-up window.
proiv-FileReadHeader	The File Upload pop-up window header.
proiv-FileReadTitle	The File Upload pop-up window title.
proiv-FileReadClose	The File Upload pop-up window's Close .
proiv-FileReadPanel	The File Upload pop-up window background panel.
proiv-FileReadContents	The File Upload pop-up window contents panel.
proiv-FileReadFooter	The File Upload pop-up window footer panel.
Message Box Properties
proiv-Messagebox	The message box.
proiv-MessageboxHeader	The message box header.
proiv-MessageboxTitle	The message box title.
proiv-MessageboxClose	The message box's Close .
proiv-MessageboxPanel	The message box panel.
proiv-MessageboxContents	The message box contents panel.
proiv-MessageboxContentsInfo	The message box contents image.
proiv-MessageboxContentsText	The message box contents text.
proiv-MessageboxContentsText1	The message box contents text.
proiv-MessageboxFooter	The message box footer panel.
Pop-up Prompt Properties
proiv-Prompt	The pop-up prompt.
proiv-PromptHeader	The pop-up prompt header.
proiv-PromptTitle	The pop-up prompt title.
proiv-PromptClose	The pop-up prompt Close .
proiv-PromptPanel	The pop-up prompt panel.
proiv-PromptPanelInfo	The pop-up prompt contents image.
proiv-PromptText	The pop-up prompt text.
proiv-PromptCheckbox	The pop-up prompt upper case checkbox text.
Multi-state Query Properties
proiv-MultiStateQuery	The multi-state query window.
proiv-MultiStateQueryHeader	The multi-state query window header.
proiv-MultiStateQueryTitle	The multi-state query window title.
proiv-MultiStateQueryClose	The multi-state query window's Close .
proiv-MultiStateQueryPanel	The multi-state query window background panel.
proiv-MultiStateQueryContents	The multi-state query window contents panel.
Proiv-MultiStateQueryContentsInfo	The multi-state query window contents image.
Proiv-MultiStateQueryContentsText	The multi-state query window contents text.
proiv-MultiStateQueryFooter	The multi-state query window footer panel.
About PROIV Properties
proiv-About	The About Box.
proiv-AboutHeader	The About Box header.
proiv-AboutTitle	The About Box title.
proiv-AboutClose	The About Box Close .
proiv-AboutPanel	The About Box background panel.
proiv-AboutContents	The About Box contents panel.
proiv-AboutContentsInfo	The About Box contents image.
proiv-AboutContentsText	The About Box contents text.
proiv-AboutContentsCopyright	The About Box copyright message.
proiv-AboutContentsMessage	The About Box contents message panel.
proiv-AboutContentsText1	The About Box contents text.
proiv-AboutFooter	The About Box footer panel.
Paging Area Properties
proiv-PagingArea	The Paging Area.
proiv-PagingAreaDisabled	The Paging Area when disabled.
proiv-PagingAreaHeader	The Paging Area header panel.
proiv-PagingAreaScrollbar	The Paging Area scrollbar.
proiv-PagingAreaSmoothScrollbarTip	The Paging Area scrollbar tip.
proiv-PagingAreaScrollbarButton	The Paging Area scrollbar s.
proiv-PagingAreaScrollbarButtonDisabled	The Paging Area scrollbar s when disabled.
proiv-PagingAreaScrollbarButtonDown	The Paging Area scrollbar s when mouse down.
proiv-PagingAreaScrollbarThumb	The Paging Area scrollbar thumb.
proiv-PagingAreaScrollbarThumbDisabled	The Paging Area scrollbar thumb when disabled.
proiv-PagingAreaSmoothScrollbar	The Paging Area smooth scrollbar.
proiv-PagingAreaSmoothScrollbarButton	The Paging Area smooth scrollbar s.
proiv-PagingAreaSmoothScrollbarButtonDisabled	The Paging Area smooth scrollbar s when disabled.
proiv-PagingAreaSmoothScrollbarButtonDown	The Paging Area smooth scrollbar s when mouse down.
proiv-PagingAreaSmoothScrollbarThumb	The Paging Area smooth scrollbar thumb.
proiv-PagingAreaSmoothScrollbarThumbDisabled	The Paging Area smooth scrollbar thumb when disabled.
proiv-PagingAreaSmoothScrollbarThumbDown	The Paging Area smooth scrollbar thumb when mouse down.
proiv-PagingAreaHorizontalGridOn	The Paging Area horizontal grid.
proiv-PagingAreaVerticalGridOn	The Paging Area vertical grid.
proiv-PagingAreaEvenBackground	The Paging Area horizontal grid event row background.
proiv-PagingAreaOddBackground	The Paging Area horizontal grid odd row background.
Static Text Properties
proiv-StaticText	Static Text.
proiv-StaticTextSingle	Single line Static Text.
proiv-StaticTextMulti	Multiple line Static Text.
proiv-StaticTextDisabled	Static Text when disabled.
proiv-StaticTextDefaultFont	Static Text font used for default, mono and omit alignments.
proiv-StaticTextProportionalFont	Static Text font used for all other alignments.
Embedded Object (ActiveX replacement) Properties
proiv-EmbeddedObject	The Embedded object panel.
proiv-EmbeddedObjectDisabled	The Embedded object panel when disabled.
Check Box Properties
proiv-Checkbox	The check box panel.
proiv-CheckboxBox	The check box.
proiv-CheckboxBoxDisabled	The check box when disabled.
proiv-CheckboxPagingFocus	The check box with focus and in a Paging Area.
proiv-CheckboxPagingNoFocus	The check box without focus and in a Paging Area.
Radio Button Properties
proiv-RadioGroup	The radio group panel.
proiv-RadioGroupDisabled	The radio group when disabled.
proiv-RadioGroupLabel	The radio group label.
proiv-RadioGroupLabelSolidBorder	The radio group label with a solid border.
proiv-RadioGroupLabelDottedBorder	The radio group label with a dotted border.
proiv-RadioGroupLabelDisabled	The radio group label when disabled.
proiv-RadioGroupPaging	The radio group in a Paging Group.
Button Properties
proiv-ButtonText	The text.
proiv-ButtonTextDisabled	The text when disabled.
proiv-ButtonBackground	The background panel.
proiv-ButtonBackgroundDown	The background panel on mouse down.
Icon Properties
proiv-IconText	The icon text.
proiv-IconTextDisabled	The icon text when disabled.
proiv-IconPaging	The icon in a Paging Area.
Edit Box Properties
proiv-SingleLineText	The single line edit box.
proiv-SingleLineTextDisabled	The single line edit box when disabled.
proiv-SingleLineTextFocus	The single line edit box when it has focus.
proiv-SingleLinePagingText	The single line edit box in a Paging Area.
proiv-SingleLinePagingTextFocus	The single line edit box with focus in a Paging Area
proiv-SingleLinePagingTextNoFocus	The single line edit box without focus in a Paging Area
proiv-DataOnlyText	The edit box when in a Paging Area and not in the selected row.
proiv-DataOnlyTextDisabled	The edit box when in a Paging Area and not in the selected row and disabled.
proiv-SingleLineTextFocus	The single line edit box when it has focus.
proiv-DataOnlyText	The edit box when in a Paging Area and not in the selected row.
proiv-DataOnlyTextDisabled	The edit box when in a Paging Area and not in the selected row and disabled.
proiv-DataOnlyTextPosition	The edit box when in a Paging Area and not in the selected row to align the text.
proiv-MultiLineText	The multi line edit box.
proiv-MultiLineTextDisabled	The multi line edit box when disabled.
proiv-MultiLineTextFocus	The multi line edit box when it has focus.
proiv-DisplayOnlyText	The edit box when display only set.
proiv-DisplayOnlyTextFocus	The edit box when display only set and it has focus.
proiv-DisplayOnlyTextDisabled	The edit box when display only set and it is disabled.
proiv-DisplayOnlyTextPosition	The edit box when display only set to align text in a Paging Area.
Date Picker Properties
proiv-DateButton	The edit box Date Picker panel.
proiv-DateButtonBackground	The edit box Date Picker background panel.
proiv-DateButtonBackgroundDisabled	The edit box Date Picker background when disabled.
proiv-DateButtonEvent	The edit box Date Picker event panel.
proiv-DateButtonImage	The edit box Date Picker image panel.
proiv-DateButtonBackgroundImage	The edit box Date Picker background image panel.
proiv-DateButtonBackgroundImageDown	The edit box Date Picker background image when mouse down.
proiv-DateButtonBackgroundImageUp	The edit box Date Picker background image when mouse up.
proiv-DateButtonBackgroundImageOver	The edit box Date Picker background image when mouse over.
proiv-DateButtonBackgroundImageOut	The edit box Date Picker background image when mouse out.
proiv-DateButtonForegroundImage	The edit box Date Picker foreground image panel.
proiv-DateButtonForegroundImageDown	The edit box Date Picker foreground image when mouse down.
proiv-DateButtonForegroundImageUp	The edit box Date Picker foreground image when mouse up.
proiv-DateButtonForegroundImageOver	The edit box Date Picker foreground image when mouse over.
proiv-DateButtonForegroundImageOut	The edit box Date Picker foreground image when mouse out.
proiv-DateButtonDisabled	The edit box Date Picker when disabled.
proiv-DateButtonPaging	The edit box Date Picker in a Paging Area.
proiv-DateButtonPagingBackgroundImage	The edit box Date Picker background image in a Paging Area.
proiv-DateButtonPagingBackgroundImageDown	The edit box Date Picker background image when mouse down and in a Paging Area.
proiv-DateButtonPagingBackgroundImageUp	The edit box Date Picker background image when mouse up and in a Paging Area.
proiv-DateButtonPagingBackgroundImageOver	The edit box Date Picker background image when mouse over and in a Paging Area.
proiv-DateButtonPagingBackgroundImageOut	The edit box Date Picker background image when mouse out and in a Paging Area.
proiv-DateButtonPagingForegroundImage	The edit box Date Picker foreground image in a Paging Area.
proiv-DateButtonPagingForegroundImageDown	The edit box Date Picker foreground image when mouse down and in a Paging Area.
proiv-DateButtonPagingForegroundImageUp	The edit box Date Picker foreground image when mouse up and in a Paging Area
proiv-DateButtonPagingForegroundImageOver	The edit box Date Picker foreground image when mouse over and in a Paging Area.
proiv-DateButtonPagingForegroundImageOut	The edit box Date Picker foreground image when mouse out and in a Paging Area
proiv-DateButtonPagingDisabled	The edit box Date Picker when disabled and in a Paging Area.
List Box Properties
proiv-Listbox	The list box.
proiv-ListboxDisabled	The list box when disabled.
proiv-ListboxPanel	The list box panel.
proiv-ListboxPanelDisabled	The list box panel when disabled.
proiv-ListboxPanelCorner	The list box corner .
proiv-ListboxPanelHeader	The list box header panel.
proiv-ListboxPanelHeaderTable	The list box header table.
proiv-ListboxPanelHeaderTableRowCell	The list box header cell.
proiv-ListboxPanelHeaderTableRowCellDisabled	The list box header cell when disabled.
proiv-ListboxPanelData	The list box data panel.
proiv-ListboxPanelDataTable	The list box data table.
proiv-ListboxPanelDataTableRow	The list box data table row.
proiv-ListboxPanelDataTableRowCell	The list box data table cell.
proiv-ListboxPanelDataTableRowCellDisabled	The list box data table cell when disabled.
proiv-ListboxBoldHighlight	The list box data row when selected.
proiv-ListboxPaleHighlight	The list box data row when mouse over.
Combo Box Properties
proiv-Combobox	The combo box.
proiv-ComboboxDisabled	The combo box when disabled.
proiv-ComboboxData	The combo box when in a Paging Area and not in the selected row and disabled.
proiv-ComboboxValue	The combo box input node
proiv-ComboboxValueDisabled	The combo box input node when disabled
proiv-Combolist	The combo box list.
proiv-CombolistPanel	The combo box list panel.
proiv-CombolistPanelCorner	The combo box list corner .
proiv-CombolistPanelHeader	The combo box list header panel.
proiv-CombolistPanelHeaderTable	The combo box list header table.
proiv-CombolistPanelHeaderTableRowCell	The combo box list header cell.
proiv-CombolistPanelData	The combo box list data panel.
proiv-CombolistPanelDataTable	The combo box list data table.
proiv-CombolistPanelDataTableRow	The combo box list data table row.
proiv-CombolistPanelDataTableRowCell	The combo box list data table cell.
proiv-CombolistBoldHighlight	The combo box list data row when selected.
proiv-CombolistPaleHighlight	The combo box list data row when mouse over.
proiv-ComboButton	The combo box panel.
proiv-ComboButtonBackground	The combo box background panel.
proiv-ComboButtonBackgroundDisabled	The combo box background when disabled.
proiv-ComboButtonEvent	The combo box event panel.
proiv-ComboButtonImage	The combo box image panel.
proiv-ComboboxValuePaging	The combo box list value in a Paging Area.
proiv-ComboboxValuePagingFocus	The combo box list value with focus and in a Paging Area.
proiv-ComboboxValuePagingNoFocus	The combo box list value without focus and in a Paging Area.
proiv-ComboButtonBackgroundImage	The combo box background image.
proiv-ComboButtonBackgroundImageDown	The combo box background image when mouse down.
proiv-ComboButtonBackgroundImageUp	The combo box background image when mouse up.
proiv-ComboButtonBackgroundImageOver	The combo box background image when mouse over.
proiv-ComboButtonBackgroundImageOut	The combo box background image when mouse out.
proiv-ComboButtonForegroundImage	The combo box foreground image.
proiv-ComboButtonForegroundImageDown	The combo box foreground image when mouse down.
proiv-ComboButtonForegroundImageUp	The combo box foreground image when mouse up.
proiv-ComboButtonForegroundImageOver	The combo box foreground image when mouse over.
proiv-ComboButtonForegroundImageOut	The combo box foreground image when mouse out.
proiv-ComboButtonPaging	The combo box in a Paging Area.
proiv-ComboButtonPagingBackgroundImage	The combo box background image in a Paging Area.
proiv-ComboButtonPagingBackgroundImageDown	The combo box background image in a Paging Area when mouse down.
proiv-ComboButtonPagingBackgroundImageUp	The combo box background image in a Paging Area when mouse up.
proiv-ComboButtonPagingBackgroundImageOver	The combo box background image in a Paging Area when mouse over.
proiv-ComboButtonPagingBackgroundImageOut	The combo box background image in a Paging Area when mouse out.
proiv-ComboButtonPagingDisabled	The combo box in a Paging Area when disabled.
Lines and Boxes Properties
proiv-Line	The line panel.
proiv-LineDisabled	The line panel when disabled.
proiv-Box	The box panel.
proiv-BoxDisabled	The box panel when disabled.
proiv-BoxTitle	The box title panel.
proiv-BoxTileDisabled	The box title panel when disabled.
Scroll Bar Properties
proiv-scrollBar	The Paging Area and list box scroll bar.
proiv-scrollBarObject	The scroll bar s and thumb (part of the scroll bar that you drag with the mouse).
proiv-scrollBarBorder	The scroll bar border.
proiv-scrollBarDisabled	The scroll bar when disabled
Menu Properties
proiv-menuPopup	The list box pop-up menu in a Paging Area.
proiv-menuItem	The menu item.
proiv-menuItemOver	The menu item when mouse over.
proiv-menuItemSeperator	The menu item separator.
proiv-menuItemDisabled	The menu item when disabled.
Paging Area Properties
proiv-treegridAccelerator	The accelerator character in Paging Area column header.
proiv-treegridScrollInfo	The scroll information pop-up in a Paging Area.
proiv-treegridHeader	The Paging Area column header.
proiv-treegridTopCorner	The Paging Area top right corner icon.
proiv-treegridTopCornerDown	The Paging Area top right corner icon when mouse down.
proiv-treegridBottomRightCorner	The Paging Area bottom right corner.
proiv-treegridBottomLeftCorner	The Paging Area bottom left corner
proiv-treegridHeader	The Paging Area heading area background.
proiv-treegridHeaderRow	The Paging Area header row background.
proiv-treegridHeaderColumnText	The Paging Area column header text.
proiv-treegridData	The Paging Area data area background.
proiv-treegridDataRow	The Paging Area data row.
proiv-treegridDataRowEven	The Paging Area data even row.
proiv-treegridDataRowOdd	The Paging Area data odd row
proiv-treegridHighlight	The Paging Area data highlighted row.
proiv-treegridSelectedFocus	The Paging Area selected item with focus.
proiv-treegridSelectedNoFocus	The Paging Area selected item without focus.
proiv-treegridDisplayOnly	The Paging Area data display only item.
proiv-treegridBorderBold	The Paging Area bold border.
proiv-treegridBorderLight	The Paging Area light border.
proiv-treegridDisabled	The Paging Area when disabled.
proiv-treegridSettingsPanel	The Saved Settings panel.
proiv-treegridSettingsLine	Line on the Saved Settings panel.
proiv-treegridSettingsColumn	Column on the Saved Settings panel.
proiv-treegridSettingsText	Text on the Saved Settings panel.
proiv-treegridSettingsCellText	Cell text on the Saved Settings panel.
proiv-treegridSettingsCellTextInput	Cell text input on the Saved Settings panel.
proiv-treegridSettingsCellNumberInput	Cell number input on the Saved Settings panel.
proiv-treegridSettingsCellSelectInput	Cell select input on the Saved Settings panel.
proiv-treegridSettingsCellBooleanInput	Cell boolean input on the Saved Settings panel.
proiv-treegridSettingsButtons	Buttons on the Saved Settings panel.
proiv-treegridSettingsButton	Button on the Saved Settings panel.
proiv-treegridSettingsSmallButton	Small on the Saved Settings panel.
proiv-treegridSettingsButtonDown	Button down on the Saved Settings panel.
proiv-treegridSettingsButtonOver	Button over on the Saved Settings panel.
proiv-treegridCopyPastePanel	The Copy and Paste panel.
proiv-treegridCopyPasteLine	Line on the Copy and Paste panel.
proiv-treegridCopyPasteText	Text on the Copy and Paste panel.
proiv-treeRoot	Tree control background.
proiv-treeBottomCorner	Tree control bottom left corner.
proiv-treeData	Tree control data area.
proiv-treeDataRow	Tree control data row.
proiv-treeHighlight	Tree control highlighted line.
proiv-treeDataCell	Tree control data.
proiv-treeDataText	Tree control data text.
proiv-treeDataImage	Tree control data image.
proiv-treeDisabled	Tree control disabled.
JavaScript Object About Box Properties
proiv-AboutBox	The About Box panel.
proiv-AboutBoxTitle	The About Box title panel.
proiv-AboutBoxExitButton	The About Box Exit .
proiv-AboutBoxImage	The About Box image.
proiv-AboutBoxText	The About Box text panel.
proiv-AboutBoxOK	The About Box OK.

Comment on this topic

Topic ID: 800111