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

  1. The Paging Area is a grid and is controlled by the Paging Grid style elements.

  2. List boxes use the same style elements as the Paging Area grid.

  3. 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.

  4. 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.

  5. 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_...

  6. 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.

  7. The date has a Paging Area version of its datepicker images. The image is in the appResources/appImages and called datepicker_paging.gif.

  8. 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

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

  2. 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

Table of Contents

Index

Glossary

-Search-

Back