Open Client Style Elements |
Open Client Administration |
 |
|
Open Client Style Elements |
Open Client Administration |
|
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.
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. |
Topic ID: 800111