Style
Used With
Context Category
Sub Category
Description
android OS Style Applied on HTML tag indicating that the device's OS is Android.
chrome Browser Style Applied on HTML tag indicating that the browser has been identified as Chrome.
debugtext Debugging Text within the Ajax Debugging Console.
expand Groupbox Accordion May not be used.
firefox Browser Style Applied on HTML tag indicating that the browser has been identified as Firefox.
frame-pt_attachmentpage Modal Attachment Styling for Attachment Dialog Frame.
frame-pt_promptpage Modal Prompt Styling for Prompt Page Frame.
frame-pt_viewattach Modal Attachment Styling for View Attachment Frame for iOS.
ie Browser Style Applied on HTML tag indicating that the browser has been identified as Internet Explorer.
imagePreview Modal Attachment May not be used.
ios OS Style Applied on HTML tag indicating that the device's OS is iOS.
loader Modal Attachment May not be used.
loadingIndicator Modal Attachment May not be used.
mac OS Style Applied on HTML tag indicating that the device's OS is general MAC.
nbar NavBar Used to set up NavBar scrolling.
nuidflt HomePage Tile Setting up defaults for grouplets in Homepage.
nuilp HomePage Tile Tile styling for Homepage.
nuinb HomePage Tile Tile Image Styling for Homepage.
nuitile HomePage Tile Homepage style to indicate content is within Tile.
nuitilegrid HomePage Tile Homepage Tile Grid styling.
page-pt_promptpage Modal Prompt Page styling for Prompt page.
pc Device Type Style Applied on HTML tag indicating that the device's TYPE is PC (versus tablet/phone are typically not used).
persmode HomePage Tile Used by Homepage when in personalization mode.
ps_accordion Groupbox Accordion Vertical Accordion outermost container.
ps_accordion_content Groupbox Accordion Individual accordion group box container.
ps_accordion_content0 Groupbox Accordion Individual accordion group box container (inner).
ps_accordion_content0Expand Groupbox Accordion Horizontal accordion expanded state (not used).
ps_accordionH Groupbox Accordion Horizontal version of the accordion (not used).
ps_actions_cont Banner Outer container for the right area of the banner, which contains action controls (i.e., homepage button, global search button, notifications button, actions list button, and navbar button).
ps_ajax_console Tools PeopleTools debugging tool for monitoring Ajax.
ps_arrow Modal Page Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_bottom Modal Page Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_left Modal Page Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_left_disable Modal Page Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_right Modal Page Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_right_disable Modal Page Tail Style for ANCHORED Modal (point to the triggering element).
ps_arrow_top Modal Page Tail Style for ANCHORED Modal (point to the triggering element).
ps_attach-completetext Modal Attachment Completion text in the attachment dialog.
ps_attach-img Modal Attachment Preview image found in the attachment dialog file list.
ps_attach-indicator Modal Attachment Progress Bar indicator for the attachments dialog.
ps_attach-instruct Modal Attachment Static Instruction Text found on multi-file selection attachment dialog.
ps_attach-loader Modal Attachment Container for the overall upload progress area (progress bar and status text).
ps_attach-loadertext Modal Attachment Container for the Uploading/Completio n status text.
ps_attach-uploadtext Modal Attachment Uploading status text in the attachment dialog.
ps_back_cont Banner Outer container for the left area of the banner, which contains the back control (or the Company Logo on Homepage).
ps_box_grid-col Grids Flex,Div Interior wrapper for a grid's column header entry.
ps_box-button Pushbutton Outermost container of a button page element.
ps_box-checkbox Checkbox Outermost container of a checkbox page element.
ps_box-control Many Places Controls Inner containe, which wraps the actual input type page element (sibling to ps_boxlabel typically).
ps_box-dropdown Dropdown Outermost container of a drop-down page element.
ps_box-edit Edit Box Outermost container of an edit page element.
ps_box-editlbl UNKNOWN
ps_box-grid Grids All Generic inner container for a grid.
ps_box-gridc Grids All Container for all grids (sibling to ps_boxgrid-header).
ps_box-grid-div Grids Div Outermost container for a DIV GRID.
ps_box-grid-flex Grids Flex Outermost container of a FLEX GRID.
ps_box-grid-head Grids All Secondary table for FLEX GRIDS used to fix the header in a scrollable grid.
ps_box-grid-header Grids All Container for the grid header, which includes all elements (title, number of rows, header bar, tabs).
ps_box-grid-header_bar Grids All Wrapper for the grid header bar containing PeopleTools (sort) and application customer buttons for a grid (if any).
ps_box-grid-list Grids List Outermost container of a LIST GRID.
ps_box-grid-tabs Grids Flex Container for the tabs for a TABBED FLEX GRID.
ps_box-grid-title Grids All Container for the Grid Title.
ps_box-group Groupbox Generic style applied to all group box page elements.
ps_box-grouplet Grouplet Outermost container of a grouplet.
ps_box-hr Layout Outermost container for a Horizontal Rule page element.
ps_box-htmlarea HTML Outermost container for an HTML Area page element.
ps_box-img Image Outermost container for an Image page element.
ps_box-label Label Inner container which wraps the label of an input page element (sibling to ps_boxcontrol typically).
ps_box-link Hyperlink Outermost container for a Hyperlink page element.
ps_box-longedit Long Edit Outermost container for a LongEdit page element.
ps_box-menu Related Content
ps_box-more Grids Accessibility Lazy scroll button to fetch more rows in accessibility mode.
ps_box-msgactions Modal Message Container for the action buttons in a Message Popup.
ps_box-msgalert Modal Message Inner container for a Message Popup containing the message text (sibling to ps_boxmsgactions).
ps_box-msgcontainer Modal Message Outermost container for all Message Popup content.
ps_box-msglong Modal Message Explanation text container for a Message Popup.
ps_box-msgnum Modal Message Message Set/Number container for a Message Popup.
ps_box-msgother Modal Message Supplimental information for certain types of Message Popups (like stack back trace for PeopleCode error messages).
ps_box-msgshort Modal Message Short text for a Message Popup.
ps_box-pagetabs Tabs Page Outermost container for page tabs.
ps_box-promptpage Modal Prompt Outermost container for the prompt page actual content.
ps_box-radio Radio Button Outermost container for a radio button page element.
ps_box-rowaction Scroll Area Container for rowlevel add/delete operations for scroll area page elements.
ps_box-scrollarea Scroll Area Outermost container for a scroll area page element.
ps_box-scrollarea-row Scroll Area Container for a row of a scroll area page element.
ps_box-searchop Modal Prompt Special wrapper to a secondary ps_boxcontrol containing the drop-down for the search operators. Only found on a prompt page.
ps_box-searchto Modal Prompt Special wrapper to a tertiary ps_boxcontrol containing a "TO" field on a prompt page when performing a BETWEEN search operation.
ps_box-sort Grids All Style applied to the special grid sort button found in a grid's header bar (if sorting is enabled and column sorting is not available).
ps_box-staticimg Static Image Outermost container for a static image page element.
ps_box-text Static Text Outermost container for a static text page element (or other static text like the row count in a grid header).
ps_box-typeahead Page Typeahead Outer container for the typeahead results.
ps_box-value Controls Disabled Read only text VALUE (as opposed to the label) of a disabled input type of control, which is displayed as TEXT rather than a disabled control (valid for Edit box, Long Edit box, Drop-downs, and Checkboxes).
ps_box-valueemail Controls Disabled Wrapper containing the tag for rendering an email as a hyperlink (when disabled as hyperlink is set on an EMAIL HTML input type).
ps_box-valuelink Controls Disabled Wrapper containing the tag for rendering a URL as a hyperlink (when disabled as hyperlink is set on a URL HTML input type).
ps_calendar_modal Calendar Modal container style applied for the PeopleTool's version of a Calendar picker for a Text-based Date field.
ps_content Page Page container rendered to contain an application's content.
ps_content-group Groupbox Container in a group box (non-collapsible), found if a header exists, which contains the actual application's content (sibling to ps_headergroup).
ps_custom_action Banner Actions List Special target section of the Actions List where a specific transaction's actions are placed.
ps_custom_cont Banner,Modal Container in banner/modal header where application's custom items are placed (left [back/canel], center [title], and right [actions/Done]).
ps_detail-group Groupbox Collapsible Similar to ps_contentgroup but used on collapsible group boxes to contain the actual application's content of a group box (versus the header of the group box).
ps_footer Page Outermost container for the footer section of the page (contains the FOOTER page content).
ps_grid-body Grids All Outermost container of the actual grid's body (content).
ps_grid-cell Grids All Identifies what is considered to be a CELL of a grid page element. Most important for FLEX grids but are applied GENERICALLY so that "groupings" within the grid using group boxes can be maintained.
ps_grid-col Grids Flex Outer wrapper for a grid column header.
ps_grid-col-label Grids Flex Style applied to a column's heading LINK when the column sorting is enabled (and can be based on grid usage).
ps_grid-div Grids Div Qualifier to ps_gridbody to indicate this is a DIV GRID.
ps_grid-flex Grids Flex Qualifier to the TABLE HTML tag to indicate this is a FLEX GRID.
ps_grid-flex-head Grids Flex Qualifier to the TABLE HTML tag of the SHADOW TABLE used to control the fixed header in a scrollable FLEX grid.
ps_grid-head Grids Flex,Div Outermost wrapper for grid column headers.
ps_grid-head-row Grids Flex,Div Row of a grid containing the grid's column headers.
ps_grid-list Grids List Wrapper which contains as a child the actual list itself (child is ps_grid-body, which is a UL/OL tag).
ps_grid-row Grids All Identifies what is considered to be a ROW of a grid page element (different grids will use different HTML tags).
ps_grid-title Grids All Header tag used as the header of a grid.
ps_groupleth Grouplet Grouplet header text.
ps_header Page Outermost container for the header section of the page (contains the Header Page content).
ps_header_bar Banner Overall container of the BANNER area, which contains the back navigation, page title, and action button area.
ps_header_bar_custom Banner Area below the banner area used to populate an application's custom header information.
ps_header_modal Modal Container for the entire modal header. Similar in nature to the ps_header_bar for main pages.
ps_header-grid-custom Grids All Container of the application's custom buttons in a grid header bar.
ps_header-grid-end Grids All Special markup for terminating any floating elements within a grid header bar.
ps_header-grid-system Grids All Container of the system controls in a grid header bar. For example, the grid sort button.
ps_header-group Headings Container of the group box's header.
ps_header-groupExpand Groupbox Accordion Horizontal accordion expanded header (not used).
ps_header-gsearch Banner Global Search functionality in the header bar (as a button or item under the Actions List).
ps_header-navbar Banner NavBar functionality in the header bar (as a button or item under the Actions List).
ps_header-next Banner Actions List Next In List functionality in the header bar (as an item under the Actions List).
ps_header-previous Banner Actions List Previous In List functionality in the header bar (as an item under the Actions List).
ps_hidden Layout Internal style used to hide an element from display and screen readers.
ps_icon-date Edit Box Actionable image to trigger the PeopleTools calendar picker.
ps_icon-prompt Edit Box Actionable image to trigger the prompt page.
ps_icon-rc Edit Box Actionable image to trigger related actions functionality on a field.
ps_indicator Checkbox Switch Container for the checked and unchecked text values for a checkbox displayed in SWITCH (advanced) mode.
ps_main Page Page container for the content section of the page.
ps_main_trf Page Transition Page Transfer animation style when animation is enabled.
ps_main_trf2 Page Transition Secondary page style when page animation is enabled.
ps_masktrans Modal Transparent page mask when a modal is popped up to prohibit work with the main page elements.
ps_menucontainer Menu Actions List Outermost style for items, which appear menu-like.
ps_menuitem Menu Actions List Individual wrappers around menuitem-like elements.
ps_menusection Menu Actions List Divisions of menu items into groups. For example, application section, search section, system section of the Actions List).
ps_menutype-act Banner Actions List Outermost style applied to the modal popup for the Actions List.
ps_mheader-bar Modal Modal header container.
ps_mheader-section1 Modal Header Left section container of the modal header containing the CANCEL operation (if Cancel/Done is configured for the modal).
ps_mheader-section2 Modal Header Center section container of the modal header containing the modal title.
ps_mheader-section3 Modal Header Right section container of the modal header containing the DONE (or CLOSE) operation.
ps_mid_section Page Page container as a sibling between the header and footer sections, which contains the primary application content.
ps_mod_wrap Modal Modal page structure container.
ps_mod_wrapc Modal Modal page structure container (child of ps_mod_wrap).
ps_modal_body Modal Special style of INNER HTML DOCUMENT with the iframe of the BODY tag (normal body tag has no class specified).
ps_modal_bottom Modal Bottom section of a modal typically containing modal controls (not typically used).
ps_modal_close Modal Wrapper container for the Modal Close button (the "X" button typically seen on the left side of the modal header).
ps_modal_container Modal Generic wrapper for modal content.
ps_modal_content Modal Specific wrapper for modal content. For example, a secondary page would have an iframe as a child.
ps_modal_header Modal Container style for the modal header area.
ps_modal_title Modal Special style used on the modal tile for internally rendered modals (like the Grid Sort modal).
ps_modal-gridsort Grids Sort Container style for the Grid sort Popup Modal.
ps_modalmask Modal Overlay masking the transaction beneath a modal when a modal appears.
ps_modalmasktran Modal Overlay masking the transaction beneath when a modal appears.
ps_more Grids Related Content item indicator of folder (chevron).
ps_pagecontainer Page Page structure used by PeopleTools in rendering a page.
ps_pagetitle Headings Style applied to the HEADER element within a group box of type "Page Title".
ps_pagetitle_cont Banner Section style of the center area of the main page banner containing the title (or HomePage Selector).
ps_popup-attach Modal Attachment Page styling attachment dialog.
ps_popup-back Groupbox Popup Back button for special PeopleTools generated modals.
ps_popup-horizontal Groupbox Popup Style used when rendering Popup group boxes with TAIL pointer on the left or right.
ps_popup-menu Groupbox Popup Style to be applied when the internal content of a Popup Group box is a list of items (menu-like).
ps_popup-msg Modal Message Outermost style applied to a MessageBox / WinMessage popup.
ps_popup-vertical Groupbox Popup Style used when rendering Popup group boxes with TAIL pointer on the top or bottom.
ps_process HomePage Tile Style when rendering static image on a tile in the Homepage.
ps_prompt-criteria Modal Prompt Collapsible group box containing a prompt page's criteria fields.
ps_prompt-done Modal Prompt Prompt Page Done button.
ps_prompt-inmode Modal Prompt Style applied when the prompt page opened from an IN OPERATION prompt. Enables the Done button and the multirow selections on the grid.
ps_prompt-intemp Modal Prompt Special hidden field on the prompt page for IN OPERATION prompting.
ps_prompt-resultsgrid Modal Prompt Grid page element containing the prompt page's results grid.
ps_prompt-resultswrapper Modal Prompt Collapsible group box containing a prompt page's results grid.
ps_prompt-searchoptions Modal Prompt Hyperlink on prompt page to toggle display of the criteria fields showing the search operator as a dropdown.
ps_prompt-sourcelabel Modal Prompt Field displaying the label of the field from which the Prompt page was triggered.
ps_pspagecontainer Page Page structure used by PeopleTools in rendering a page.
ps_pspagecontainer_srch Page Page structure used by PeopleTools in rendering a page.
ps_saved_text Page Text style for displaying the save confirmation text (hidden in 8.54/8.55).
ps_scrollable Grids,Groupbo xes All Indicates that PeopleTools scrolling has been enabled for a grid or group box.
ps_scrollable_both Grids,Groupbo xes All Indicates that both horizontal and vertical PeopleTools scrolling is enabled.
ps_scrollable_h Grids,Groupbo xes All Indicates that horizontal-only PeopleTools scrolling is enabled.
ps_scrollable_v Grids,Groupbo xes All Indicates that verticalonly Tools scrolling is enabled.
ps_search Page Component Search Special area of a page containing the search criteria and fields for Component Level (Realtime) searching.
ps_search-custom Banner Search button displayed when a component search has been involved (visually replaces the standard Global Search).
ps_switch ps_boxcheckboxCheckbox Switch Styling applied to the container of a checkbox in advanced mode (default), which display a checkbox as a SWITCH.
ps_system_cont Banner, Modal Container in banner/modal header where system-specific items are placed. There are left [back/canel], center [title], and right [actions/Done].
ps_tab ps_tabs Tabs Style for an individual tab as part of a list of tabs (page tab or grid tab).
ps_tab-link ps_tab Tabs Actual hyperlink control for the tab itself.
ps_tabs Tabs Actual list container for a collection of tabs (ps_tab).
ps_test_level_1 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_10 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_2 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_3 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_4 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_5 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_6 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_7 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_8 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_test_level_9 Debug Simple internal layout debugging when the Layout Only checkbox is enabled in a component's properties.
ps_toolbar_mod Page Potential target for tools actions at the bottom of the document (not used).
ps_typeahead Modal Typeahead Type ahead container.
ps_typeahead_modal Modal Typeahead Type ahead modal wrapper styling.
ps_viewattach-doc Modal Attachment Styling attachment viewer styling (for iOS).
ps_wrapper Page Page structure used by PeopleTools in rendering a page (locations where PAGE STYLES using Page properties or PeopleCode are located).
psaccesshidden Layout Accessibility Renders content offscreen but readable by screen reader.
ps-attach-loadcontainer Modal Attachment Container of the load indicator for attachment dialog.
ps-box_groupExpand Groupbox Accordion Expanded state indicator for accordion group box.
ps-box-gridc-right Grids All Inner container for all grids directly under ps_box-gridc container.
ps-button Pushbutton Actual HTML button control (Anchor Tag).
ps-button-wrapper Pushbutton Button internal wrapper where title attribute is applied.
psc_animate-fadeinout8s Banner Confirmation Confirmation area animation for automatic dismissal. Stays open for a number of seconds and then automatically disappears.
psc_attach-clear Modal Attachment Class applied to the attachment "Clear" button.
psc_attach-completed Modal Attachment State applied to the attachment page indicating that upload is completed.
psc_attach-multiple Modal Attachment Attribute class applied to attachment page indicating multiple files can be uploaded.
psc_attach-selected Modal Attachment State applied to the attachment page indicating that at least one file has been selected to be uploaded.
psc_attach-selecting Modal Attachment State applied to the attachment page indicating that a file selection is pending.
psc_attach-upload Modal Attachment Class applied to the attachment "Upload" button.
psc_attach-uploading Modal Attachment State applied to the attachment page indicating that uploading is in progress.
psc_button Grids All Style on grid column/cells to identify that a button is contained in the column.
psc_cancel Modal Message Cancel button on Messagebox Popup.
psc_carousel Groupbox Carousel Styling applied when Carousel scrolling is enabled for a group box.
psc_checkbox Grids All Style on grid column/cells to identify that a checkbox is contained in the column.
psc_close Groupbox Accordion, Collapsible Closed state class applied for collapsible group boxes and accordions.
psc_closed Banner Used in several constructs to indicate that a structure is closed (like the Global Search tray).
psc_collapsible Groupbox Collapsible Indicator that a group box is a collapsible group box.
psc_confirmation-area Banner Confirmation Container for the confirmation area under the banner.
psc_confirmation-close Banner Confirmation Confirmation area Close button.
psc_confirmation-msg Banner Confirmation Confirmation text message styling.
psc_date Grids,Edit Box Style on grid column/cells to identify that a date is contained in the column/Field.
psc_datetime Grids,Edit Box Style on grid column/cells to identify that a date/time is contained in the column/field.
psc_disabled Controls Used on many page elemeents and on row actions to indicate that the control is DISABLED.
psc_easeb Page Transition Page animation styling.
psc_easel Page Transition Page animation styling.
psc_easer Page Transition Page animation styling.
psc_easet Page Transition Page animation styling.
psc_empty Controls A few structures have a psc_empty style to indicate that the structure has no value (while the inner structure exists the container is not empty).
psc_error Controls Style applied to the wrapper of a page field when an error is raised on the field. For example, Field Validation or format issue.
psc_focus Controls Style applied to the wrapper of specific controls to indicate that input focus has been applied within the structure for special styling. For example radio buttons and checkboxes.
psc_form-larger Form Factor Special style applied to the HTML tag to indicate that the system has detected the DEVICE fits in the large form factor range.
psc_form-medium Form Factor Special style applied to the HTML tag to indicate that the system has detected the DEVICE fits in the medium form factor range.
psc_form-small Form Factor Special style applied to the HTML tag to indicate that the system has detected the DEVICE fits in the small form factor range.
psc_form-xlarge Form Factor Special style applied to the HTML tag to indicate that the system has detected the DEVICE fits in the extra large form factor range.
psc_grid-nohbar Grids All Style to indicate that no grid header bar has rendered. This allows proper formatting of other elements in the overall grid header.
psc_has_selected Grid Special style applied when a user has selected one of more rows using the row selection checkox. Applied to that outermost level of the grid for styling items in the grid header bar when a row is selected.
psc_hidden Layout Style which hides a structure or page element (CSS display of none).
psc_hide-BP1 Banner Used to hide a control at a given break point to hide banner buttons when the width of the window gets too small. This breakpoint is for apps custom buttons put in the banner (hide below 900px).
psc_hide-BP2 Banner Used to hide a control at a given break point to hide banner buttons when the width of the window gets too small. This breakpoint is for the Home button (hide below 800px).
psc_hide-BP3 Banner Used to hide a control at a given break point to hide banner buttons when the width of the window gets too small. This breakpoint is for the Global Search button (hide below 680px).
psc_hide-BP4 Banner Used to hide a control at a given break point to hide banner buttons when the width of the window gets too small. This break point is for the Navbar button (hide below 580px).
psc_icon Edit Box Indicates that an icon exists as part of the rendering of the field (date control or prompt control).
psc_icon-disable Pushbutton Indicates that a disabled version of the icon is available so the system doesn't apply the default disabled icon style for a button.
psc_image_only Pushbutton Style applied to a button when only an image is specified (no text).
psc_label-suppressed Grids All Indicates that the label is not located in the structure for a given page field within a grid.
psc_layout Groupbox Special style applied to indicate that a group box is of type Layout.
psc_link Grids Flex Indicates that a hyperlink control is contained within the column of a normal Flex grid.
psc_maxdocheight Modal Attachment Styling of attachment viewer for iOS.
psc_modal-button Modal Style indicating that a button should be styled like a modal header button, which is a slightly smaller than a conventional button.
psc_modal-cancel Modal Identifies the CANCEL button of a modal.
psc_modal-close Modal Identifies the CLOSE button of a modal (the "X" button). Note that the image is not supplied in the style.
psc_modal-done Modal Identifies the DONE button for a modal.
psc_modal-fullscreen Modal Style applied when a modal is programmatically set to be a full page modal.
psc_modal-pagetitle Modal Style applied to the header title found in a modal (similar to ps_pagetitle but on a modal).
psc_mode-access Page Accessibility Class applied to an HTML tag to allow special styling in accessibility mode.
psc_mode-hc Page Accessibility Class applied to an HTML tag to allow special styling when running in OS high contrast mode.
psc_more Grids Grid row indicator of tapability.
psc_norowstext Modal Prompt Style applied to a prompt page group box, which appears when no rows exist. Text is rendered as a header of a group box but displays as normal text. Only used for prompt page.
psc_num Grids, Edit All Style applied to indicate that data type for the field (or column) is a numeric type.
psc_off Checkbox Switch State indicator that the checkbox SWITCH is off.
psc_off_container Checkbox Switch Container of the OFF section of a checkbox SWITCH.
psc_ok Modal Message OK button on a Message Box Popup.
psc_on Checkbox Switch State indicator that the checkbox SWITCH is on.
psc_on_container Checkbox Switch Container of the ON section of a checkbox SWITCH.
psc_op-between Modal Prompt Style indicating that a special prompt control operator has been set to BETWEEN.
psc_open Banner Confirmation Used to display/animate the confirmation area found in the header.
psc_open-alt Banner Confirmation Used to display/animate the confirmation area found in the header.
psc_primary Pushbutton Visually indicates that a button is primary.
psc_processing Page Structure to display the processing image during server trips.
psc_rowact Grids, Groupboxes Trigger Style applied to a Grid row or groupbox when the developer has enabled the Execute PC on Group/Row Click for a hyperlink/button to enable actions on the entire row/group box.
psc_rowcount Grids All Text type of rendered control which displays the number of rows in a grid.
psc_rownum Grids All Style applied to the grid row number rendered by PeopleTools in a grid.
psc_saved Page Structure containing the save confirmation text (not currently displayed in Fluid).
psc_selected Controls Style applied when a "row" or a control displayed as an item is selected. For example, set by PeopleTools on a grid row when the user has selected a grid row checkbox to select the row.
psc_show-BP1 Banner Opposite of psc_hideBP1. Shows banner items in Actions List when below breakpoint - 900px.
psc_show-BP2 Banner Opposite of psc_hideBP2. Shows banner items in Actions List when below breakpoint - 800px.
psc_show-BP3 Banner Opposite of psc_hideBP3. Shows banner items in Actions List when below breakpoint - 680px.
psc_show-BP4 Banner Opposite of psc_hideBP4. Shows items in Actions List when below breakpoint - 580px.
psc_sort Grids Sort Style applied to the interior of the Grid Sort popup content (the list of columns).
psc_sort-ascend Grids Sort Indicates that the user has selected to sort a grid by this column (ascending).
psc_sort-descend Grids Sort Indicates that the user has selected to sort a grid by this column (descending).
psc_sort-enabled Grids Sort Indicates that a column is available to be used for sorting but the user has not selected that column yet.
psc_tab_always Grids Flex Style applied which indicates a column is FROZEN. Always shown regardless of the tab selected.
psc_tab_column Grids Flex Associated at the CELL level identifying a cell as a column assigned to a tab.
psc_time Grids All Style on grid column/cells to identify that a time is contained in the column/Field.
psc_trigger Grids, Groupboxes Trigger Trigger field when psc_rowact is applied to show which column/field is to be used as the trigger field for the row/group box action to be executed when the row/groupbox is activated.
psc_wrappable Controls Disabled Style added by PeopleTools when the wrapping flag is set for disabled long edit and edit fields (displayed as text).
ps-checkbox Checkbox Actual HTML checkbox control (input[type="checkbo x"]).
ps-dropdown Dropdown Actual HTML select control. Select with option children.
ps-edit Edit Box Actual HTML input[type=-] control for Edit boxes. The actual type may vary based on the HMTL type selected in IDE.
ps-fileList Modal Attachment Attachment dialog list of files.
ps-filesList Modal Attachment Container for the attachment dialog list of files.
ps-hr Layout Actual HTML HR control (horizontal rule).
ps-htmlarea HTML Actual container for an HTML Area control.
ps-icon-wrapper Edit Box Container applied to icons found within edit boxes, such as date and prompt icons, for example.
ps-img Many Places** * Image Actual HTML Image tag used in pushbuttons, hyperlinks, and image controls.
ps-inputfile Modal Attachment Container for the input file and buttons in the attachment dialog.
ps-label Label Actual label for most controls.
ps-link Hyperlink Actual hyperlink HTML control.
ps-link-wrapper Hyperlink Parent wrapper around the actual hyperlink HTML control.
ps-longedit Long Edit Actual long edit or textarea HTML control.
ps-mheader-section1 Modal Page Modal header left section where the Negative dismissal (CANCEL button) is found.
ps-radio Radio Button Actual radio button HTML control.
ps-searchcurrentop Modal Prompt Current Search operator read only text found only in special prompt page criteria fields. Not available outside prompt page.
ps-searchjoin Modal Prompt Special text found between the prompt input fields when BETWEEN is used. Not available outside prompt page.
ps-searchop-show Modal Prompt Qualifier style on the Hide/Show Operators links on the prompt page which indicates that we are in SHOW MODE to display the search operators.
ps-staticimg Static Image Actual image HTML for a static image. This differs from other types of image tags, which are typically styled as ps-img.
ps-text Many Places** * Text Used in many constructs to contain text to be displayed. For example, headers, buttons [image+text], hyperlinks [image+text], static text.
PTCALHEAD Calendar PeopleTools Calendar Picker Header.
ptgrid-multiselect Grids All Identifies the column/cell containing the PeopleTool's checkbox allowing multi-row selections.
ptgrid-rowadd Grids All Identifies the column/cell containing the PeopleTool's row-level add button .
ptgrid-rowdelete Grids All Identifies the column/cell containing the PeopleTool's row-level delete button .
ptgrid-rownumber Grids All Identifies the column/cell containing the PeopleTool's row number.
ptgrid-singleselect Grids All Identifies the column/cell containing the PeopleTool's checkbox allowing single-row selections.
pts_addbtn Search Search Styling.
pts_addmode Search Search Styling.
pts_bulkramode Search Search Styling.
pts_bulkrelactions Search Search Styling.
pts_facet Search Search Styling.
pts_facet_checkbox Search Search Styling.
pts_fltr Search Search Styling.
pts_fltr_no_fltr Search Search Styling.
pts_fltr_no_noop Search Search Styling.
pts_fltr_noop Search Search Styling.
pts_gblsearchmode Search Search Styling.
pts_gsearch_cont Search Search Styling.
pts_gsearch_go Search Search Styling.
pts_gsearch_tray Search Search Styling.
pts_gsearch_tray_item Search Search Styling.
pts_include_hist Search Search Styling.
pts_keyvalues Search Search Styling.
pts_keyword Search Search Styling.
pts_listbulkramode Search Search Styling.
pts_listnobulkramode Search Search Styling.
pts_listnoramode Search Search Styling.
pts_listramode Search Search Styling.
pts_nobulkramode Search Search Styling.
pts_noramode Search Search Styling.
pts_noxlat Search Search Styling.
pts_ramode Search Search Styling.
pts_searchbtn Search Search Styling.
pts_searchmode Search Search Styling.
pts_srchcriteria Search Search Styling.
pts_srchcriteriafilters_nodtprompt Search Search Styling.
pts_srchcriteriafilters_nononpro mpt Search Search Styling.
pts_srchcriteriafilters_noprompt Search Search Styling.
pts_srchcriteriafilters_nopromptn oedit Search Search Styling.
pts_srchcriteriafilters_noxlat Search Search Styling.
pts_srchcriteriafilters_noyesno Search Search Styling.
pts_srchfltrdtpmt Search Search Styling.
pts_srchfltrnopmt Search Search Styling.
pts_srchfltrpmt Search Search Styling.
pts_srchfltrpmtnoedit Search Search Styling.
pts_srchfltrxlat Search Search Styling.
pts_srchfltryesno Search Search Styling.
pts_srchrslts_gridmixedtypes Search Search Styling.
pts_srchrslts_list Search Search Styling.
pts_srchtype Search Search Styling.
pts_transparent_label Search Search Styling.
pts_xlat Search Search Styling.
rsz_h1 HomePage Tile Tile Styling (height) for Tiles on a homepage.
rsz_h2 HomePage Tile Tile Styling (height) for Tiles on a homepage.
rsz_w1 HomePage Tile Tile Styling (width) for Tiles on a homepage.
rsz_w2 HomePage Tile Tile Styling (width) for Tiles on a homepage.
safari Browser Style Applied on HTML tag indicating that the browser has been identified as Safari.
sbar Scrollbar Generic style for PeopleToolsimplemented scroll bar.
sbar_h Scrollbar Style used for PeopleToolsimplemented horizontal scroll bar.
sbar_v Scrollbar Style used for PeopleToolsimplemented vertical scroll bar.
side N/A Side styling for the search page.
tab_0 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_1 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_2 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_3 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_4 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_5 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_6 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_7 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_8 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_9 Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
tab_a Grids Flex State style applied on a tabbed grid to indicate which tab has been selected and which tab a field is associated (used in two places).
win OS Style applied on HTML tag indicating that the device's OS is Windows.
ps_apps_content Layout Page Style applied to the outermost groupbox of a primary or secondary page. Uses the CSS FLEX model for sizing and has scrolling and padding automatically applied.
ps_apps_pageheader Apps Banner Outermost style for a group box to be used as an application header (persistent area). This is typically reparented to the Customer Header Bottom section except on small form factor where it would be used directly within the body (suppress the reparenting groupbox ONLY on small form factor).
ps_button_backnav Pushbutton Banner Style applied to render the back button in the banner. Only use if you are creating a custom button in the banner to REPLACE the system's back button.
ps_button_bar ps_collecti on Button Bar Group box style which contains radio buttons to be displayed as a mutually exclusive selector (not as standard radio buttons).
ps_button_stdheader Pushbutton Banner Text button found in the header (as opposed to image buttons which are styled as ps_header_button). Use only when creating custom buttons in the banner.
ps_collection Layout Collections A collection of buttons, radio buttons, or links that have simplistic layout. Additional qualifiers can be added for additional styling.
ps_grid-norowborder Grid Flex Prohibits rendering the border between rows of a FLEX grid.
ps_header_button Pushbutton Banner Pushbutton style for image only banner buttons.
ps_label-hide Label Marks all label structures found within the container as invisible. Space is still reserved.
ps_label-show Label Marks all label structures found within the container as visible (actually the default).
ps_menucontainer Menu Action Menu Outermost List containing all the individual menu sections.
ps_menitem Menu Action Menu + Actionsheet List Item style applied in the Actions List or actionsheet styles containing a single hyperlink trigger.
ps_menusection Menu Action Menu Collection of ps_menuitem entries (sublist typically with role="presentation") for the different sections of the Actions List (application custom, search, and system sections).
ps_menutype-grid Menu -- Rarely used style to display a SIMPLE grid of links similar to a menu style. See see psc_list-linkmenu for a more complete styling.
ps_proc_pageheader Apps Banner Similar to ps_apps_pageheader but is used to display a PROCESS fixed header at the top of a page. It is recommended to use ps_apps_pageheader instead.
psc_align-center Layout Centers content. Special usage when you have block buttons so that the text and image portions of the button are centered.
psc_auto_size Layout Used to impose no size limit. If applied to an image hyperlink or button, the image within is rendered with its default size.
psc_backgroundtransparent Visual Disables any background image and sets the background color to transparent.
psc_badge-hide psc_badgeimage OR psc_badge- text Pushbutton Badge Used to hide the BADGE portion of a button enabled for badge display.
psc_badge-image Pushbutton Badge Used on a pushbutton to display a badge when the badge is the IMAGE of a Text+Image button (like a warning icon badge).
psc_badge-text Pushbutton Badge Used on a pushbutton to display a badge when the badge is the TEXT of a Text+image Button (like a badge count).
psc_baritem-first ps_collecti on.ps_butt on_bar Layout Collections Used to identify the first visible item of a button bar collection for styling when some elements are being hidden.
psc_baritem-last ps_collecti on.ps_butt on_bar Layout Collections Used to identify the last visible item of a button bar collection for styling when some elements are being hidden.
psc_block Layout On a simple container, it sets the display to BLOCK and centers the items. On a button or hyperlink control, it sets all elements of the button/link structure to block. In this case, links are left justified and buttons are centered. If there is text and an image involved, the image and the text are on different "lines," each being block on their own. This allows a button with an image on top (the label comes after the image) and the text underneath.
psc_body_background Visual Sets the background and foreground color to the same as the body's background color and the default font color.
psc_bold Visual Sets the font weight to bold. This may not have an effect depending on the control used and styling as it may be overriden by other styles.
psc_border Visual ScrollArea Row Sets the border of a container, simplistically. The psc_border-standard is more recommended. When used in the context of a scroll area, each row will have a border around it.
psc_bordert Visual Sets the top border. It is recommended to use psc_border-standard and psc_border-toponly.
psc_borderbottomonly psc_border -standard Visual Any Disables all other borders other than the bottom and sets the bottom border to 1px.
psc_border-content Visual Groupbox On a simple group box, it disables the bottom border and margin of the group box header and places a border around the CONTENT.
psc_border-header Visual Groupbox On a simple group box, it places a bottom border under the header (the default).
psc_borderheadernone Visual Groupbox On a simple group box, it turns off the bottom border under the header.
psc_border-leftonly psc_border -standard Visual Any Disables all borders except the left and sets the left border to 1px.
psc_border-none Visual Any Disables all borders on a container (direct container only -- does not propagate to children).
psc_border-rightonly psc_border -standard Visual Any Disables all borders except the right and sets the right border to 1px.
psc_border-standard Visual Any Sets a default border on a container.
psc_border-thicker psc_border -standard Visual Any Sets the border width to 2px instead of 1px.
psc_border-toponly psc_border -standard Visual Any Disables all other borders other than the top and sets the top border to 1px.
psc_bordertransparent psc_border -standard Visual Any Sets the border to be transparent but still consumes space. The border is still 1px in size.
psc_buttonminwidth20em Pushbutton Unique style to set a minimum width of a button to be 20em. Alignment will be the default so you may need to use psc_align-center or psc_halign-center.
psc_button-next Pushbutton Directional Style to be applied to a button, which will be a NEXT button. Image included in styling.
psc_button-previous Pushbutton Directional Style to be applied to a button, which will be a PREVIOUS button. Image included in styling.
psc_button-simple Pushbutton Used to make a TEXT based button to display like an image only button. Typical usage are for buttons within a grid, buttons in the header bar of a grid, and buttons in the BODY of a modal.
psc_clip-content Layout Groupbox On a simple group box, disables scrolling on the content area (the default).
psc_clip-overflow Layout Sets overflow attribute to hidden (no scrolling).
psc_colon Label Used on a page field element, which has a ps_box-label structure to add a COLON (:) after the label.
psc_column-2 Layout Sets up basic container for a two-column container, having psc_columnitems* as children.
psc_column-3 Layout Sets up basic container for a three-column container, having psc_columnitems* as children.
psc_columnitem-1of2 Layout Sets up an item that floats left of size 1 of 2 (or 50%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem1of2-fixed Layout Sets up an item that floats left of size 1 of 2 (or 50%). Never converts - always 50%.
psc_columnitem-1of3 Layout Sets up an item that floats left of size 1 of 3 (or 33%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem-2of2 Layout Sets up an item that floats left of size 2 of 2 (or 100%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem-2of3 Layout Sets up an item that float's left of size 2 of 3 (or 66%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem3of10 Layout Sets up an item that floats left of size 3 of 10 (or 30%). Never converts - always 30%.
psc_columnitem-3of3 Layout Sets up an item that floats left of size 3 of 3 (or 100%). Converts to block mode (no float/auto width) when window falls below 767px.
psc_columnitem7of10 Layout Sets up an item that floats left of size 7 of 10 (or 30%). Never converts - always 70%.
psc_columnitem-auto Layout Sets up an item that floats left with no specific width requirement. Width is whatever size is necessary to render.
psc_confirmationarea Confirmation Groupbox Used to create an INLINE confirmation message, where the conformation area is part of the page. This style is set on the Layout Group box container of the area.
psc_confirmationmsg Confirmation LongEdit/Edit (disabled as text) Set on the long edit or edit box (disabled are rendered as text and wrappable) within a confirmation area to display a confirmation message.
psc_container-small Layout Groupbox Style applied on a container to allow the elements styled within having psc_fld* to act as if they are being rendered on the small form factor.
psc_control-fullwidth Layout Edit/LongEdit/Dr opdown Changes the behavior/sizing of the page fields, which are input based (either disabled as text or having actual input type HTML tags) to consume the entire width of the container. Changes the display to block and width of 100%. This style does not have any impact on the associated label (use label styling to adjust the label -- typically psc_label-top).
psc_control-height{120}em Layout Sets the height of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control-height{1100}pct Layout Sets the height of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control-height{1100}px Layout Sets the height of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_controlheightauto Layout Edit/LongEdit/Dr opdown Sets the height of a page field to have an automatic height. Used to remove any DEFAULT heights applied in simplistic styling.
psc_control-width{1100}em Layout Sets the width of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control-width{1100}pct Layout Sets the width of the actual HTML control for Edit,LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_control-width{1100}px Layout Sets the width of the actual HTML control for Edit, LongEdit, and drop-down as well as the read-only (text [any control] and hyperlink) versions of these controls. Values range from 1em to 20em in increments of 1em.
psc_controlwidthauto Layout Edit/LongEdit/Dr opdown Set the width of a page field to have an automatic width. Used to remove any DEFAULT widths applied in simplistic styling.
psc_data-image Apps Banner Image to be displayed in persistent apps header. It should be the first displayable item as it will be floated left so that other elements can float around it. Because this element is floated, it is recommended that the image, primary data, and secondary data be contained in a layout group box with a style psc_floatclearoverflow so that the application header will contain all of the FLOATED elements . Has no effect if not found within ps_apps_pageheader or ps_proc_pageheader at some level.
psc_data-primary Apps Banner Primary text data element found in the application persistent header. Has no effect if not found within ps_apps_pageheader or ps_proc_pageheader at some level.
psc_data-secondary Apps Banner Non-primary text data element found in the application persistent header. Has no effect if not found within ps_apps_pageheader or ps_proc_pageheader at some level.
psc_direction-row psc_pagecontainer or other FLEX styled containers Layout Used on a FLEX-based container to indicate that the flex direction is HORIZONTAL (column is vertical).
psc_disablednormaltext Visual Hyperlinks Style applied on hyperlinks for disabled hyperlinks to be rendered as NORMAL TEXT, not as a disabled link.
psc_display-block Layout Any Applies display of BLOCK.
psc_display-inline Layout Any Applies display of INLINE.
psc_displayinlineblock Layout Any Applies display of INLINEBLOCK.
psc_displayonlyastext _adjust Visual Edit/LongEdit/Dr opdown Style applied when you have display-only information (as text) in a two-column layout beside an editable field. This style adjusts the height so that it more closely matches the height of an editable page field element.
psc_distribute ps_collecti on Layout Collections/Butto n Bar Uses CSS Flex to distribute the items in as equal a fashion as possible within the collection.
psc_edit-adjustforlink Layout Edit disabled rendering a hyperlink This is a special adjustment style to adjust a disabled edit field rendering a hyperlink (like an email or URL type of edit box) to align better with other links found in a collection. It also has display of inline-block like conventional hyperlinks.
psc_embedded_tabs Do Not Use Outer container for embedded tabs to be rendered by applications. While the styling will work to create a tab LOOK, keyboard navigation is not available for proper tabs outside of the the page/grid tabs supplied by PeopleTools Therefore, it is not recommended to use this style.
psc_fieldsethidereadable Layout Accessibility Styles a fieldset as a basic container with no displayable text, but the legend is displayed off screen so that it is always available to the screen reader.
psc_fld-aligned psc_label_f iller Layout Style applied to a group box styled with psc_label_filler which causes the visuals to change only on a small form factor (or within a psc_container-small container). Removes all horizontal padding for the label filler since labels will be appearing on top. Consumes the entire width of the container.
psc_fld-autolabel Layout Style applied to a page field element (not hyperlinks/buttons) causing the visuals to change only on a small form factor (or within a psc_container-small container). Does not reserve space for the label (typically 33%), but instead allows the field to be displayed immediately after the label string.
psc_fld-standard Layout Style applied to a page field element (not hyperlinks/buttons) causing the visuals to change only on a small form factor (or within a psc_container-small container). This typically puts the label on top of the field and the control is placed below the label. If the control is a text area (long edit), the field will span the entire width of the container. Otherwise, the width of the control is not changed. You cannot use psc_controlfullwidth in conjunction with this style. If you need this type of behavior, you would need to use psc_labeltop/psc_control-fullwidth but remove psc_fld-standard.
psc_flex-equal Children of psc_pagecontainer, psc_distrib ute Layout Used on a child of a FLEX container where the flex property is set to "flex: 1 1 auto". Same as psc_flex-least.
psc_flex-least Children of psc_pagecontainer, psc_distrib ute Layout Used on a child of a FLEX container where the flex property is set to "flex: 1 1 auto". Same as psc_flexequal.
psc_flex-less Children of psc_pagecontainer, psc_distrib ute Layout Used on a child of a FLEX container where the flex property is set to "flex: 2 2 auto".
psc_flex-more Children of psc_pagecontainer, psc_distrib ute Layout Used on a child of a FLEX container where the flex property is set to "flex: 4 4 auto".
psc_flex-most Children of psc_pagecontainer, psc_distrib ute Layout Used on a child of a FLEX container where the flex property is set to "flex: 5 5 auto".
psc_flex-none Children of psc_pagecontainer, psc_distrib ute Layout Used on a child of a FLEX container where the flex property is set to "flex: 0 0 auto", meaning that this child is NOT FLEXIBLE (flex will not adjust its size).
psc_flex-same Children of psc_pagecontainer, psc_distrib ute Layout Used on a child of a FLEX container where the flex property is set to "flex: 3 3 auto".
psc_float-clear Layout Used to clear float on both left/right.
psc_float-clearleft Layout Used to clear float on the left only.
psc_floatclearoverflow Layout Used on a container of floats to clear the floating behavior by setting the overflow as hidden on the container.
psc_float-left Layout Sets item to float left.
psc_float-none Layout Sets item to have no float.
psc_fontsize{025,033,05,06,07,075,08,09,095,1,11,12,13,14,15,16,17,18,19,2}em Visual Sets the font-size (025em = 0.25em and 11em is actually 1.1em as examples of the abbreviations within the style names).
psc_font-sizeinitial Visual Sets the font size to be INITIAL.
psc_fontsize-inherit Visual Sets the font size to be INHERITED.
psc_force-floatclear Layout Forces the float to be cleared on both left/right. Uses !important to override normal float styles.
psc_force-floatnone Layout Forces the item to have no float. Uses !important to override "normal" float styles.
psc_force-hidden Layout Forces an item to be not displayed (or readable by screen readers) by using !important to override other display styles.
psc_forcemarginnone Layout Forces no margin. Uses !important to override other margin styles.
psc_force-nomargin Layout Same as psc_forcemarginnone.
psc_force-nopadding Layout Same as psc_forcepaddingnone.
psc_forcepaddingnone Layout Forces no padding. Uses !important to override other padding styles.
psc_fullsize_button PushButton Image Modifies an image button to remove the height restrictions on the image and to turn off all borders/backgrounds (transparent).
psc_grid-allowscroll Grid Flex Can be used when not using PeopleTools-implemented scrolling. Max width for grid is no longer set, allowing it to grow beyond the container width. Width is set by content (no specific width set) and overflow is globally enabled on the overall grid (including the header), both horizontally and vertically.
psc_grid-allowscrollv Grid Flex Can be used when not using PeopleTools-implemented scrolling to perform vertical scrolling only. Max width to full width of the container and sets overflow to scroll if necessary on the entire grid (including grid header).
psc_grid-border Grid Flex Puts a border around the TABLE element of the FLEX grid.
psc_grid-borderall Grid Puts a border around the ps_box-gridc container, which contains the entire grid. For a flex grid there are TWO Tables to support FIXED header support, so both grids are included when using this border mechanism.
psc_gridborderbottom Grid Puts a border at the bottom only of the grid.
psc_grid-bordernone Grid Turns off borders on the outer part of the grid (gridc container).
psc_grid-bordersides Grid Puts borders on the left and right of the grid.
psc_grid-bordertop Grid Puts a border on the top of the grid.
psc_gridbordertopbottom Grid Puts borders on the top and bottom of grid.
psc_grid-cellborders Grid Flex Sets borders on the TABLE, TH, and TD tags for a flex grid only.
psc_grid-collection Grid List Used to style a grid similar to a ps_collection. Horizontal rendering allowing separators between the rows. Typical usage is a single element per row of the same type, such as a list of links, list of buttons, and so on.
psc_gridcountabovebody Grid Moves the row count of a grid to be directly above the grid itself rather than on the same line as the Grid Title. Typically used when you don't want a border around the grid header bar (psc_gridheadernoborder) but still have content in the header bar. For example, a prompt page.
psc_grid-countabovebodyflex Grid Flex Same as psc_gridcountabovebody but only applies to FLEX version of a grid.
psc_gridheadernoborder Grid Used to turn off the border surrounding a grid's header bar.
psc_gridheadertopborder Grid Used to turn off the left/right borders on a grid's header bar.
psc_grid-hideinlist Grid Used on a page field within a grid when you toggle between grid types. This style hides the page field when in a LIST grid.
psc_grid-hidereadableallhead Grid Accessibility Renders the grid column header structure (THEAD structure of a TABLE of a Flex grid) off screen so that it is available to the screen reader. This happens in all modes not just accessibility mode.
psc_grid-hidereadablecolhead Grid Accessibility Renders the individual column headers off screen with the exception of the select/deselect all checkbox within a Flex grid's column header structure.
psc_grid-nobody Grid Hides the ps_grid-body (the content not the headers) of a grid.
psc_gridnocolheaders Grid Flex Hides the grid column header structure, except in accessibility mode where it will be rendered off screen like psc_gridhidereadableallhead.
psc_gridnocustomheader Grid Hides the custom section of a grid's header bar.
psc_gridnocustompad Grid Removes the default padding of the custom section of a grid's header bar.
psc_gridnoheaderbar Grid Hides a grid's header bar.
psc_gridnoinnergroup Grid Hides all GROUPBOX HEADERS contained within a grid cell, regardless of grid display type.
psc_grid-norowcount Grid Hides the total row count typically displayed above the grid.
psc_grid-norows Groupbox Empty Grid Pattern Style applied to a group box, which will display the empty grid pattern. Group box title is the same as the grid's header and no rows text with optional add button.
psc_grid-norowstext Grid Empty Grid Pattern Style applied to a disabled (as text) edit or long edit page control OR static text control. Used to display the NO ROWS FOUND text for a grid. Typically used within psc_grid-norows styled container.
psc_gridnosideborder Grid Same as psc_gridheadernoborder.
psc_gridnosystemheader Grid Hides the system (PeopleTools-owned) section of a grid's header bar.
psc_grid-notitle Grid Hides the grid's header (actually a H# tag) but is rendered offscreen when running in accessibility mode.
psc_grid-notitlearea Grid Simlar to psc_grid-notitle, but it hides the entire title area. This includes not only the HEADER for the grid but also the row count. This is rendered off screen in accessibility mode so it will be readable.
psc_grid-widthauto Grid Flex Removes the minimum width for a Flex grid. The default for a Flex grid is a minimum width of 100% of its container.
psc_gridlist-autolabel Grid List Style applied to a LIST grid (not to individual fields) where the field labels do not have reserved space (default is 33%). Typically used for display only as text page elements.
psc_gridlist-borderall Grid List Similar to psc_grid-borderall but only applies to LIST grids.
psc_gridlistborderbottom Grid List Similar to psc_gridborderbottom but only applies to LIST grids.
psc_gridlistbordernone Grid List Similar to psc_gridbordernone but only applies to LIST grids.
psc_gridlistbordersides Grid List Similar to psc_gridbordersides but only applies to LIST grids.
psc_gridlistbordertop Grid List Similar to psc_grid-bordertop but only applies to LIST grids.
psc_gridlistbordertopbottom Grid List Similar to psc_gridbordertopbottom but only applies to LIST grids.
psc_gridlist-standard Grid List Style applied to a LIST grid (not to individual fields), where the field labels have the standard reserved space (default is 33%). Typically used for display-only as text page elements.
psc_gridrow-sepbreadcrumb psc_gridcollection Grid List In a list grid style as a collection, separates each row with a ">" for breadcrumb rendering.
psc_gridrow-sep-pipe psc_gridcollection Grid List In list grid style as a collection, separates each row with a PIPE SYMBOL (or |) for simple link separation.
psc_gridview-grid Button Bar View Selector Child of psc_gridview-toggle container used to toggle to GRID view of a grid. This should be a radio button page field.
psc_gridview-item Button Bar View Selector Child of psc_gridview-toggle container used to add another possible view mode other than List/Grid views. This should be a radio button page field.
psc_gridview-list Button Bar View Selector Child of psc_gridview-toggle container used to toggle to LIST view of a grid. This should be a radio button page field.
psc_gridview-toggle ps_collecti on.ps_butt on_bar Button Bar View Selector Special Button Bar collection usually added to a grid in its header bar to toggle between GRID and LIST views. Typically you would also add psc_displayinlineblock as well since there are typically other controls also found in the grid header. See an example on the Prompt Page.
psc_group-special Two Panel Selector Groupbox Special style designed for placement in the Navigation Panel of a two-panel layout containing a special control field (like a drop-down) that drives the content of the left panel interior. This area has the same color as the SELECTED item in a panel, as in the label color is darkened and a border is added around the container. Can be applied on a field or a group box containing a field. This style is rarely used.
psc_groupboxnoheader Visual Hides a group box's header structure, but renders it off screen in accessibility mode.
psc_groupbox-notitle Visual Same as psc_groupboxnoheader.
psc_grouped ps_collecti on.ps_butt on_bar (and typically psc_distrib ute) Button Bar Collections Turns off the rounded borders of the button bar. Usually used in conjunction with psc_distributed to consume the full width of the container.
psc_grouped_fitted ps_collecti on.ps_butt on_bar (and typically psc_distrib ute) Button Bar Collections Similar to psc_grouped-fitted but the top and side borders are disabled. This style of bar is typically used at the top of a container that already has some type of border or where a border at the top and sides would not be needed, like at the top of a page or panel content.
psc_groupheaderadjust Visual Adjust elements within this container to have the same font-size as found in a grid header bar or application header.
psc_halign-center Layout Align the content as centered.
psc_halign-left Layout Align the content as left-justified.
psc_halign-right Layout Align the content as rightjustified.
psc_has-count psc_listlinkmenu ListView Used to indicate that a field on the LISTVIEW row is used as a badge count. The field is styled with a style of psc_list_count.
psc_has-link psc_listlinkmenu ListView Shows an actionable indicator on the row (CHEVRON), except if the row also has a count (as in, psc_has-count style is applied).
psc_haslivedata Tile Style to indicate that the group box contains/shows a live data section.
psc_haslivedata-1 Tile Style to indicate that live data exists.
psc_haslivedatacount Tile Style to indicate that the group box contains/shows a tile count.
psc_haslivedatacount-none Tile Style to indicate that the group box does not contain/show a tile count.
psc_haslivedata-none Tile Style to indicate that the group box does not contain/show a live data section.
psc_headerhidereadable Visual Accessibility Renders the header of a group box offscreen so it is not visible (and does not consume space) but is readable by a screen reader (in any mode).
psc_headerinnerfloat Do Not Use For a group box header, turns off the border (psc_borderheadernone) with no background image and a transparent background.
psc_header-none Visual Do not display the group box header. It is NOT readable in accessibility mode.
psc_headernospacing Visual On a group box, removes any text indention or margin from the header.
psc_height{1,100}em Layout Any Sets the height of a container/entity. Values range from 1em to 100em in increments of 1em.
psc_height{1,100}pct Layout Any Sets the height of a container/entity. Values range from 1% to 100% in increments of 1%.
psc_height-{1,100}px Layout Any Sets the height of a container/entity. Values range from 1px to 100px in increments of 1px.
psc_height-auto Layout Any Sets the height of a container/entity to "auto," which allows the content (or some other styling) to drive the height of the item.
psc_hidden Visual Hides something from being displayed. Sets CSS display to none. Content will not be available in accessibility mode.
psc_hide-image Pushbutton/Hyp erlink Typically used on an Image+Text button or hyperlink to hide the IMAGE.
psc_hide-pagetabs Visual Used on a page which is rendering page tabs to hide them. This style must be applied at the page level only.
psc_hide-reldispunits psc_reldisp -container Related Display Used to hide the related display UNITS text when the value is empty. Style would have to be set based on the contents of psc_reldispvalue. This style is not automatically applied and must be conditionally applied using PeopleCode.
psc_hide-reldispvalue psc_reldisp -container Related Display Used to hide the related display VALUE when the value is empty. Style would have to be set based on the contents of psc_reldispvalue. This style is not automatically applied and must be conditionally applied using PeopleCode.
psc_hide-text Pushbutton/Hyp erlink Typically used on an Image+Text button or hyperlink to hide the TEXT. Be aware that this could cause accessibility issues as the text will not be readable by screen readers.
psc_image-{1-15}em Sets width and height of an image to a specific em size, ranging from 1em to 15em incrementing by 1em.
psc_image-height{115}em Layout Image Sets the height of an image. Values range from 1em to 15em incremented by 1em.
psc_imageheightauto Layout Image Sets the height of an image to be automatic. Use the size of the image assuming no other styling affects sizing.
psc_imagemaxheight{1-15}em Layout Image Sets the MAXIMUM height of an image. Values range from 1em to 15em incremented by 1em.
psc_imagemaxheightauto Layout Image Sets the MAXIMUM height of an image to be automatic (no maximum height).
psc_imagemaxwidth{1-15}em Layout Image Sets the MAXIMUM width of an image. Values range from 1em to 15em incremented by 1em.
psc_imagemaxwidthauto Layout Image Sets the MAXIMUM width of an image to be automatic (no maximum width).
psc_imagenomaxheight Layout Button with Image Removes the maximum height specification for an image used within a button.
psc_imagestandardbutton Layout Button with Image Increases the maximum height slightly to the image within a button. This setting is actually NOT the max height of a standard button but slightly larger than the standard size. Rarely used as it also affects the basic footprint of a button.
psc_image-width{115}em Layout Image Sets the width of an image. Values range from 1em to 15em incremented by 1em.
psc_image-widthauto Layout Image Sets the width of an image to be automatic. Use the size of the image assuming no other styling affects sizing.
psc_invisible Visual Sets the CSS visibility property to hidden.
psc_justify-center Simple CSS Flex container Layout Used to set the justifycontent CSS property on a FLEX container. This setting justifies the items collected together in the center of the container.
psc_justify-end Simple CSS Flex container Layout Used to set the justifycontent CSS property on a FLEX container. This setting justifies the items collected together in the "END" of the container.
psc_justify-inherit Simple CSS Flex container Layout Used to set the justifycontent CSS property on a FLEX container. This setting justifies the items based on an ancestor's justification setting.
psc_justify-initial Simple CSS Flex container Layout Used to set the justifycontent CSS property on a FLEX container. This setting justifies the items as initially provided by default.
psc_justifyspacearound Simple CSS Flex container Layout Used to set the justifycontent CSS property on a FLEX container. This setting justifies the items trying to distribute spaces between and around elements equally.
psc_justifyspacebetween Simple CSS Flex container Layout Used to set the justifycontent CSS property on a FLEX container. This setting justifies the items so that the space between the items is used to distribute the items. The first and last items are at the ENDs of the container.
psc_justify-start Simple CSS Flex container Layout Used to set the justifycontent CSS property on a FLEX container. This setting justifies the items collected together in the "START" of the container.
psc_label Do Not Use Sets the value of the ps_boxlabel structure to be inlineblock (the default). Style is no longer needed.
psc_labelhaligncenter Layout Label Changes the alignment of label to be centered within the reserved area.
psc_label-halignleft Layout Label Changes the alignment of label to be left within the reserved area.
psc_label-halignright Layout Label Changes the alignment of label to be right within the reserved area, which is the default if the label is not on top.
psc_label-hide Layout Label Same as psc_label-none. It completely makes the label not visible and does not consume space. This affects layout.
psc_labelhidereadable Layout Accessibility Renders the label offscreen so that it is not visible, but it is always available for screen reader. Visually, it acts like psc_label-none in that the layout is affected. The label structure is not displayed visually so there is no space reserved for the label.
psc_label-invisible Visual Label Accomplishes the same as psc_label-none, EXCEPT that the label space is RESERVED. The label text is just invisible. Warning: in accessibility mode, the label is NOT AVAILABLE for the screen reader.
psc_label-none Layout Label Hides the entire label structure so that the label is not shown, which affects the LAYOUT. In accessibility mode, the label will be rendered offscreen so that it is available for the screen reader.
psc_label-normaltext Visual Label Displays the label as part of a page field as normal text, rather than a label.
psc_label-opacity0 Visual Label Effectively the same as psc_label-invisible, but it uses the opacity CSS to hide versus visibility. Warning: the label will not be available for the screen reader with this style.
psc_label-opacity1 Visual Label Sets opacity of the label back to the typical default value (1). This displays the label.
psc_label-top Layout Label Style to set the label of a page field on TOP of the control. This does not include buttons or hyperlinks. This style does not affect the CONTROL area, only the label.
psc_labelvalignbaseline Layout Label Sets the vertical alignment of the label to be baseline. In some cases, this may not have an affect if there are other styles overriding labeling as part of the construct.
psc_labelvalignbottom Layout Label Sets the vertical alignment of the label to be bottom. This may not have an affect if there are other styles overriding labeling as part of the construct.
psc_labelvalignmiddle Layout Label Sets the vertical alignment of the label to be top. This may not have an affect if there are other styles overriding labeling as part of the construct.
psc_label-valigntop Layout Label Sets the vertical alignment of the label to be middle. This may not have an affect if there are other styles overriding labeling as part of the construct.
psc_label-visible Visual Label Sets the label visibility to be visible. Opposite of psc_label-invisible.
psc_label-width{150}em Layout Label Sets the label width to a specific width. Value ranges from 1em to 50em incremented by 1em.
psc_label-width{1100}pct Layout Label Sets the label width to a specific width. Value ranges from 1% to 100% incremented by 1%.
psc_label-widthauto Layout Label Sets the label width to be computed automatically based on content.
psc_label_filler Layout Style applied to a group box (or a page field element having a label rendered to consume space) to allocate the same spacing as is made for labels so that the content will align with the other fields on the page, reserving space AS IF it had a label. On a small form factor, if psc_fldstandard is also applied, the label space will not be reserved, which is the same as for other psc_fld-standard where the labels will be placed on top in the small form factor as well as within a psc_container-small styled container.
psc_legendhidereadable Layout Accessibility Renders the legend of a Field Set (a Related Field Group group box type) offscreen so that it does not consume any visual space but is available for screen readers.
psc_lineheight-full Layout Sets the line height for a container to 100%.
psc_link-drilldown Hyperlink Used to make a hyperlink look like the DRILLDOWN construct, which has a border and a chevron to indicate it is actionable (max width is automatically imposed).
psc_link-normaltext Hyperlink Displays a hyperlink as normal text.
psc_link-textsize Visual Same as psc_fontsize-1em, which is the normal text size.
psc_link_normalsize Visual Same as psc_fontsize-inherit.
psc_list-1col psc_listlinkmenu ListView Indicates that the ListView will show/contain one column/field.
psc_list-2col psc_listlinkmenu ListView Indicates that the ListView will show/contain two columns/fields, equally distributed.
psc_list-3col psc_listlinkmenu ListView Indicates that the ListView will show/contain two columns/fields, but the layout is such that the first column consumes more than the last column.
psc_list-col-1 ListView Identifies a group box or field within a LISTVIEW grid row as "column 1" data.
psc_list-col-2 ListView Identifies a group box or field within a LISTVIEW grid row as "column 2" data.
psc_list-commonmenu psc_listlinkmenu ListView Identifies a LISTVIEW implementation as a simple COMMON MENU, as if displaying a standard menu like the Actions List Menu. Font will be slightly larger than that used on the Actions List, but the font weight will be similar.
psc_list-detail Grid Summary / Detail Used on a LIST grid (grid-level or row-level) to indicate additional details should be shown on one or more rows, as in items marked as psc_show-detail will be displayed).
psc_list-expanded Grid Summary / Detail Functionally the same as psc_list-detail but uses different settings at the FIELD level. Used on a LIST grid (grid-level or row-level) to indicate additional details should be shown on one or more rows, as in items marked as psc_showexpanded will be displayed.
psc_list-has-icon psc_listlinkmenu ListView Indicates that the LISTVIEW items have an icon on the row. This icon can be a stand alone image OR a link with Image+text configured.
psc_list-icon-medium psc_listlinkmenu ListView Styles the images found within a LISTVIEW row to be a larger image than a conventional LISTVIEW implementation.
psc_list-icon-top psc_listlinkmenu ListView Used with LISTIVEW grid having an image (when psc_list-has-icon is used) indicating that the image should be aligned vertically with the TOP of the row instead of middle (the default).
psc_list-linkmenu ListView PRIMARY STYLE used to set up a LIST Grid to be used as a basic navigational mechanism. There are different modes for different use cases. The default displays a LISTVIEW that would typically be used for left panel navigation. Using psc_list-commonmenu can be used on a list grid brought up within a popup group box to be displayed like a simple menu item. Using psc_listsettingmenu is a specialized two-column list showing a Setting (name) and a Setting Value (value) display. These are the high-level variations of the LISTVIEW styling.
psc_listsecondarydata ListView This style identifies a field within a multi-field LISTVIEW implementation as SECONDARY data. The default is to display as primary. Typically the link that triggers the row.
psc_list-settingmenu psc_listlinkmenu ListView Used on a two-column LISTVIEW to display a Setting Name and Value on the same row. It is expected that that the first column (group box with psc_list-col-1) would be used for the Setting and would contain a LINK with the setting name as the label. The second column (group box with psc_list-col-2) would contain an edit box (display-only as text) for the value of the setting.
psc_list-tertiary ListView This style identifies a field within a multi-field LISTVIEW implementation as TERTIARY data (having the least importance).
psc_list-vtab psc_listlinkmenu ListView Used on a LISTVIEW implementation to reduce the vertical spacing between fields in a List grid row. Typically used when you have multiple pieces of data to show in a row at a time (not a common menu or settings menu).
psc_list_count ListView Used on a field to identify itself as the badge count field when using LISTVIEW and the psc_has-count.
psc_livedata-metrics Tile Styling for metrics DATA found in the live data area.
psc_livedata-metricslabel Tile Styling for the metrics LABEL found in the live data area.
psc_livedata-strong Tile Adjusts the font size of data (only on small form factor).
psc_margin-{130em}em psc_margin-{0_110_1}em Layout Sets all margins (top, right, bottom, left) to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-{1-50}pct, psc_margin-{0_549_5}pct Layout Sets all margins (top, right, bottom, left) to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-{1100}px Layout Sets all margins (top, right, bottom, left) to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_margin-auto Layout Sets the top/bottom margins to 0 and sets the side margins to auto, which should effectively center an item within its container. Same as psc_margin-center.
psc_marginbottom{1-30em}em psc_margin- Layout Sets bottom margin to the specified value. Ranges for the first set are between 1em
bottom{0_1-10_1}em to 30em, increment of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_marginbottom{1-50}pct, psc_marginbottom{0_5-49_5}pct Layout Sets bottom margin to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_marginbottom{1-100}px Layout Sets bottom margin to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_marginbottomnone Layout Removes the bottom margin.
psc_margin-center Layout Same as psc_margin-auto (attempt to center using side margins to auto).
psc_margin-header Layout Applies the standard margin to a ps_header-group style (not typically used).
psc_marginheadernone Layout Removes the margin from beneath a group box's header.
psc_margin-left{130}em, Layout Sets left margin to the specified value. Ranges for
psc_margin-left{0_110_1}em the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-left{1-50}pct, psc_margin-left{0_5-49_5}pct Layout Sets left margin to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-left{1100}px Layout Sets left margin to the specified value. Ranges for the first set are between 1px to 100px, increments of 1px.
psc_margin-leftnone Layout Removes the left margin.
psc_margin-none Layout Removes all margins from all sides.
psc_margin-right{1-30}em, psc_marginright{0_1-10_1}em Layout Sets right margin to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-right{1-50}pct, psc_marginright{0_5-49_5}pct Layout Sets right margin to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-right{1100}px Layout Sets right margin to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_marginrightnone Layout Removes the right margin.
psc_margin-sides{1-30}em, psc_margin-side{0_110_1}em Layout Sets side margins (right and left) to the specified value. Ranges for the first set are between 1em to 30em, increment of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-sides{1-50}pct, psc_margin-sides{0_5-49_5}pct Layout Sets side margins (right and left) to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0pct but instead you would merely use -1pct. second
psc_margin-sides{1100}px Layout Sets side margins (right and left) to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_margin-standard Layout Sets the margin as it would be for a "normal" field on a page (specifies bottom margin only).
psc_margin-top{1-30}em,psc_margin-top{0_110_1}em Layout Sets top margin to the specified value. Ranges for the first set are between 1em to 30em, increment of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_margin-top{1-50}pct,psc_margin-top{0_549_5}pct Layout Sets top margin to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_margin-top{1100}px Layout Sets top margin to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_margin-topnone Layout Removes the top margin.
psc_maxwidth-40em Layout Set maximum width for a container to be 40em.
psc_maxwidth-60em Layout Set maximum width for a container to be 60em.
psc_menuactionsheet ActionSheet Style used as a popup option style for a Popup group box type where the popup will contain list items styled as ps_menuitems (containing buttons). This style is applied as an argument to DoModalPopup only.
psc_minwidth-20em Layout Set minimum width for a container to be 20em.
psc_modal-button Pushbutton Style applied to a button that would typically be found in a modal header. This is typically only used OUTSIDE of the modal header. If you put a button in the modal header, it will automatically get styled in this fashion. So this style (while not the standard) would allow you to create the same styled button within the BODY of a modal (smaller than the standard button size).
psc_modal-close Pushbutton Style to be applied to a custom CLOSE button (with X image) that would be placed in a modal header.
psc_modal-done Pushbutton Style which could be applied to a custom modal button which would be the positive action button (not required). However, the positive action button in the modal header should also have the psc_primary style applied as well.
psc_modal-noheader Layout Page-Level style to not display the modal header. This should not be used in accessiblity mode since all modals should have a header.
psc_more Grid Flex Used on a display only (as text) field on a flex grid row when the row action has been enabled in order to show an actionable indicator at the end of the row. This style should not be used on any flex grid with the Add/Delete (PeopleToolsprovided) action buttons enabled. This display only field must be the last field on the grid.
psc_multiselect-hide Grid Applied to a grid, indicating that the single selection mechanism rendered by Peopletools will be hidden.
psc_nolabel Do Not Use Used to hide the label. More recommended to use psc_label-hide or psc_labelnone.
psc_noscroll Layout Sets overflow as hidden (no scrolling) on a container. It is forced with the !important setting.
psc_nospace ps_collectionLayout Turns off spacing between the items in the list within a collection. Only used when the ps_collection is also a UL or OL tag.
psc_notext Switch Special type of switch that does not display any text for either the on/off values of the checkbox. Typically used if there is no space available to render text values for the on/off state.
psc_nowrap Layout By itself, it turns off wrapping for the specific container. This is an inherited setting so it can affect the children. It is also used by list-linkmenu to turn off text wrapping of links.
psc_on psc_image_only or psc_button -simple Toggle Button Style applied to indicate visually that a value underneath has been set (a button with a state). The default state is off. Note, for accessibility, when using this style you must also make sure you set the aria-pressed attribute to true using PeopleCode at the same time that you are applying the psc_on state style.
psc_opacity-085 Visual Sets the opacity to 85%.
psc_overflow-auto Layout Sets overflow of a container to auto. Add scrollbars if necessary.
psc_overflow-hidden Layout Sets overflow of a container to hidden (no scrolling and clip content if it does not fit).
psc_overflow-xauto Layout Sets overflow of a container to scroll horizontally if necessary.
psc_overflowxhidden Layout Sets overflow of a container to not scroll (and possibly truncate) horizontally only.
psc_overflow-yauto Layout Sets overflow of a container to scroll vertically if necessary.
psc_overflowyhidden Layout Sets overflow of a container to not scroll (and possibly truncate) vertically only.
psc_override Two Panel Single Page container two panels Special panel styling to allow the application to override (by custom styling) the breakponts when the panel converts from COLLAPSIBLE or FIXED mode into a overlay. The application is completely responsible for the media query styling as found in the default system. As a typical rule, the custom styling would copy the media query for the two-panel section and merely change the break point, replacing the :not(.psc_override) with .psc_override.
psc_padding-{130em}em psc_padding-{0_110_1}em Layout Sets all padding (top, right, bottom, left) to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0em, but instead you would merely use -1em.
psc_padding-{1-50}pct,psc_padding-{0_549_5}pct Layout Sets all padding (top, right, bottom, left) to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-{1100}px Layout Sets all padding (top, right, bottom, left) to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_paddingbottom{1-30em}em psc_paddingbottom{0_1-10_1}em Layout Sets bottom padding to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_paddingbottom{1-50}pct, psc_paddingbottom{0_5-49_5}pct Layout Sets bottom padding to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_paddingbottom{1-100}px Layout Sets bottom padding to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_paddingbottomnone Layout Removes the bottom padding.
psc_padding-content Layout Adds the standard padding to the content area of a group box (non collapsible).
psc_paddingcontentnone Layout Sets padding to content area of a group box to have no padding (default).
psc_padding-left{1-30}em, psc_paddingleft{0_1-10_1}em Layout Sets left padding to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding-left{1-50}pct, psc_paddingleft{0_5-49_5}pct Layout Sets left padding to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-left{1100}px Layout Sets left padding to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding-leftnone Layout Removes the left padding.
psc_padding-none Layout Removes all padding from all sides.
psc_padding-right{1-30}em, psc_paddingright{0_1-10_1}em Layout Sets right padding to the specified value. Ranges for the first set are between 1em to 30em, increment of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding-right{1-50}pct, psc_paddingright{0_5-49_5}pct Layout Sets right padding to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-right{1100}px Layout Sets right padding to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding-rightnone Layout Removes the right padding.
psc_padding-sides{1-30}em, psc_paddingside{0_1-10_1}em Layout Sets side padding (right and left) to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding-sides{1-50}pct, psc_paddingsides{0_5-49_5}pct Layout Sets side padding (right and left) to the specified value. Ranges for the first set are between 1% to 50%, increments of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for non-decimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-sides{1100}px Layout Sets side padding (right and left) to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_paddingstandard Layout Sets the padding as it would be for a "normal" field on a page (specifies bottom margin only).
psc_padding-top{1-30}em, psc_paddingtop{0_1-10_1}em Layout Sets top padding to the specified value. Ranges for the first set are between 1em to 30em, increments of 1em. Second specifications are from 0.1em to 10.1em incrementing by 0.1em (so 0_1em equates to 0.1em). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0em but instead you would merely use -1em.
psc_padding-top{1-50}pct, psc_paddingtop{0_5-49_5}pct Layout Sets top padding to the specified value. Ranges for the first set are between 1% to 50%, increment of 1%. Second specifications are from 0.5% to 49.5% incrementing by 0.5% (so 0_5% equates to 0.5%). In the second specifications, the _0 is dropped for nondecimal items. For example, there is no -1_0pct but instead you would merely use -1pct.
psc_padding-top{1100}px Layout Sets top padding to the specified value. Ranges for the first set are between 1px to 100px, increment of 1px.
psc_padding-topnoneLayout Removes the top padding.
psc_page-container Layout Used if you need an intermediate container between ps_apps_content and the PeopleTools rendered page structures. This allows the same the CSS Flex model to be continued (chain not broken) so you can use flex styling on other containers being sibilings to ps_apps_content. For example, you could create a fixed area above or below ps_apps_content which would have a middle area scrolling. This is similar to how the banner and the footer are created, but you could also create a similar item within your "content" area.
psc_pageheaderdarkborder ps_apps_p ageheader, ps_proc_pa geheader Apps Banner Places a darker border below the application page header for better visibility of the separation.
psc_pageheaderfixed ps_apps_p ageheader, ps_proc_pa geheader Apps Banner Applies the same background as if the ps_apps_pageheader were actually contained within the banner section (used the reparenting to the Custom Header Bottom target). This is only needed if you are NOT using this reparenting but you are fixing this header not to scroll with the page and want to have a "fixed" look.
psc_pagepaddingcontent Layout Applies the standard page padding to the content area of a group box (not a collapsible groupbox).
psc_pagepaddingmargin Layout Applies the same dimensions for padding found in ps_apps_content but is applied as a MARGIN instead of padding (outside the container rather than inside the container).
psc_pagepaddingsidemargin Layout Sets the side dimensions for the standard padding only but implemented as MARGIN instead of padding.
psc_panel-action Two Panel Single Page container two panels Second level layout group box containing the action panel (or left panel).
psc_panelactioninterior Two Panel Single Page container two panels Child of the psc_panel-action. This is a SECTION (or region) that will be assigned a label if you use the Two-Panel API provided by SetNavigationPanelInfo() or SetActionPanelInfo() if the left panel is not used for navigation. Under this container, the ps_apps_content layout group box is typically used as the outermost container of a page to be found. Scrolling behavior for ps_apps_content will perform as normal. Since you typically don't use padding for navigation lists, you may also need to add psc_padding-none to the ps_app_content found under this container.
psc_panel-button Two Panel Single Page container two panels Actual tab or button that opens/closes the left panel (if the control is available).
psc_panel-container Two Panel Single Page container two panels Outermost container for the panel structure (part of CSS FLEX page structure). This structure is used to create a horizontal FLEX between the LEFT PANEL, which is typically used for navigation (psc_panel-action) and the RIGHT or content panel, which is used for the main content (psc_panel-content). To see the proper layout for a SINGLE PAGE containing two-panel implementation, review the PSL_TWOPANEL layout page in Application Designer.
psc_panel-content Two Panel Single Page container two panels Second level layout group box containing the content panel.
psc_panelcontentinterior Two Panel Single Page container two panels Child of the psc_panelcontent. This is a SECTION (or region) that will be assigned a label if you use the Two Panel API provided by SetContentPanelInfo(). Under this container, the ps_apps_content layout group box is typically used as the outermost container of a page to be found. Scrolling behavior for ps_apps_content will perform as normal.
psc_panel-fixed Two Panel Single Page container two panels This is a MODE style that changes the default behavior of the left panel. Default behavior is for the panel TAB to be always available to allow the user to open/close the panel (default state of panel is closed). FIXED mode means that if space permits, the tab is hidden and the left panel is always displayed (no user control if space allows). If space is not sufficient (or if you are in PORTRAIT mode on a device), the panel is in OVERLAY mode, meaning that the panel does not affect the width of the content. In this situation, the left panel merely overlays the content rather than making the content size smaller to see the left panel.
psc_panel-fullsize Two Panel Single Page container two panels This style adjusts the size of the left panel when it is OPENED to consume the entire width of the window. There will be no tab to close the panel so the user is forced to make a selection. This style is used when you want to use the left panel in a LANDING PAGE form of panel construct. Typically, this would only be seen in a small form factor device.
psc_panel-overlay Two Panel Single Page container two panels This is a MODE style that changes the default behavior of the left panel. See the description for psc_panelfixed for the default behavior. In OVERLAY mode, the panel does not affect the width of the content. In this situation, the left panel merely overlays (hides part of) the content rather than making the content size smaller to see the left panel.
psc_paneltabcontainer Two Panel Single Page container two panels Container for the "tab" to be available under certain circumstances to allow the user to open/close the left panel.
psc_pos-absolute Layout Applies the CSS position property to absolute for explicit movement of an element within another positioned container.
psc_pos-bottomleft Layout Performs absolute positioning relative to the bottom left corner of the nearest positioned ancestor.
psc_pos-bottomright Layout Performs absolute positioning relative to the bottom right corner of the nearest positioned ancestor.
psc_pos-fixed Layout Applies the CSS position property to fixed, relative to the browser window (will not scroll).
psc_pos-relative Layout Applies the CSS position property to relative for relative movements or to identify a container for positioning using other positioning means (such as absolute).
psc_pos-static Layout Applies the CSS position property to static (the default).
psc_pos-topleft Layout Performs absolute positioning relative to the top left corner of the nearest positioned ancestor.
psc_pos-topright Layout Performs absolute positioning relative to the top right corner of the nearest positioned ancestor.
psc_primary Pushbutton Primary Important style used to make a standard button (not in the banner nor an image button nor a SIMPLE button) to be displayed as the "important" button (primary action). There should be only a single primary button on the display at a time because you are trying to draw attention to the primary action to be completed on the overall page.
psc_radius-{1,2)em, psc_radius-{01-02}em Visual Sets the border radius to a container to the specified value. Values range from 0.1em to 1em incrementing by 0.1em. There is also a 2em as well. If this container is a group box with a header, the header's TOP (left/right) radius are also adjusted to the same value as well.
psc_radius-{1-10}px Visual Sets the border radius to a container to the specified value. Values range from 1px to 10px incrementing by 1px. If this container is a group box with a header, the header's TOP (left/right) radius are also adjusted to the same value as well.
psc_radius-none Visual Sets the border radius to be none (the default).
psc_radiustop{1,2)em, psc_radius-top{0102}em Visual Sets the TOP (left/right) border radius to a container to the specified value. Values range from 0.1em to 1em incrementing by 0.1em. There is a 2em as well. If this container is a group box with a header, the header's TOP (left/right) radius are also adjusted to the same value as well.
psc_radius-top{110}px Visual Sets the TOP (left/right) border radius to a container to the specified value. Values range from 1px to 10px incrementing by 1px. If this container is a group box with a header, the header's TOP (left/right) radius are also adjusted to the same value as well.
psc_radius-topnone Visual Sets the TOP (left/right) border radius to be none (the default).
psc_reldisp-container Related Display Applied to a layout group box to contain two fields (typically): the related display control and the related display value/units. Within this styled container, you typically have two to three elements in this order: an editable field (psc_reldispfield), an optional image button (psc_reldisp-prompt), and a display only as text field (psc_reldisp-value OR psc_reldisp-units).
psc_reldisp-field Related Display Within a psc_reldispcontainer, this style is applied to an editable field which is used to derive the value to be displayed as the related display value. If the contents of this field is example, you can use psc_hidereldispvalue which will hide the associated display only value (or unit) so that no additional space is consumed. On a small form factor, if this field is also has psc_fld-standard it will control not only the label position on this field but also the placement of the psc_reldisp-value field as well.
psc_reldisp-prompt Related Display Styling on an image-only button within a psc_reldispcontainer, which typically looks like a prompt. Creates a special "prompt" button that appears inside the psc_reldisp-field editable field (like a prompt button).
psc_reldisp-units Related Display Similar to psc_reldisp-value but is used to display FIXED TEXT, rather than related display which QUALIFIES the value found in psc_reldispfield. Like units of measure. When on a small form factor, unlike psc_reldisp-value, this display-only value will continue to be positioned BYSIDE the field as it is a qualification of the field.
psc_reldisp-value Related Display Within a psc_reldispcontainer, this style is applied to a DISPLAY-ONLY (as Text) field to display the associated value to the field psc_reldispfield. On a small form factor, if the psc_reldisp-field also has psc_fld-standard, this value will move BELOW the editable field.
psc_rowadd-hide Grid Hides the column that contains the PeopleToolsgenerated row Add action.
psc_rowdelete-hide Grid Hides the column that contains the PeopleToolsgenerated row Delete action.
psc_rowinsert-hidden Layout Applied to a row to hide it while you are performing INSERTS. Remove from the row after you've added the information successfully in a modal.
psc_rowlabels-hide Grid Same as psc_rowlabels-none.
psc_rowlabels-none Grid Applied at a grid level, this style is used to not display the label structure (does not consume space) in FLEX grid rows. In accessibility mode, these labels will be rendered offscreen so they will be available to the screen reader.
psc_rownumber-hide Grid Hides the column containing the PeopleTools-generated row number.
psc_scroll Layout Sets overflow as auto (scrolling enabled if necessary) on a container. It is forced with the !important setting.
psc_scroll-content Layout Enables the content area of a standard group box, not a collapsible group box, to scroll if necessary.
psc_scroll-overflow Layout Same as psc_overflow-auto. Sets overflow as auto (scrolling enabled if necessary) on a container but is NOT forced.
psc_scrollarea-notitle Layout ScrollArea Applied at the scroll area level. This style turns off the row headers for each row of the scroll area. They are hidden and not available in accessibility mode.
psc_selected State Tabs, Button Bar, Listview, Grids Used to indicate that an item (typically a row or an item in a list) is selected.
psc_selection-none psc_listlinkmenu ListView Use this style to hide the checkbox/radio button for the PeopleTools row selection mechanism on a LISTVIEW implementation. Used to hide the selection mechanism for a row.
psc_separatorbreadcrumb ps_collection Layout Collections Sets the separator for a nongrid collection to be a breadcrumb character (or the greater than sign ">").
psc_separator-pipe ps_collection Layout Collections Sets the separator for elements in a non-grid collection to be a pipe character, "|".
psc_shadowstandard Visual Applies the simple outer shadow to a container.
psc_show-actionable Actionable Grid/Groupboxes There are several usages for this styling. Some are standalone and others are used in conjunction with the psc_more style. This style is used to display a CHEVRON which indicates that the entity (a group box or a grid row) is ACTIONABLE. It requires that within Application Designer that a field has the setting "Execute PC on Row/Group Click" enabled, which will cause PeopleTools to render a style of psc_rowact at the appropriate level. If the trigger field (identified with the style psc_trigger) has been disabled, the row action will also be disabled and the CHEVRON (or actionable indicator) will not be displayed. If this style is applied on an actionable GROUP BOX, the chevron will merely appear in the group box in the appropriate location. If applied on a LIST or DIV grid (at the grid level), the indicator will appear at the end of every row that is actionable. If this is used on a FLEX grid, it is expected that a display-only (as text) field will be used as the last field on the grid having the style psc_more applied to it. This field may or may not have content.
psc_showbaronselect Grid Header Bar Displays a grid's header bar (where the actions are locationed) only when a row is selected, using single or multi-row PeopleTools selection mechanism. Applied at the grid level.
psc_show-detail Grid Summary / Detail Used on a field within a LIST grid indicating that this item should only be displayed when the list grid is in detail mode (psc_list-detail applied at the grid or row level).
psc_show-expanded Grid Summary / Detail Used on a field within a LIST grid indicating that this item should only be displayed when the list grid is in expanded mode (psc_listexpanded applied at the grid or row level).
psc_show-gridonly Grid Indicates that the field should only be displayed in a FLEX grid. The field would be hidden in a LIST or DIV grid rendering.
psc_show-listonly Grid Indicates that the field should only be displayed in a LIST grid. The field would be hidden in a FLEX or DIV grid rendering.
psc_showrowselected Grid Button Area On a button appearing within a header bar of a grid, this style will cause a page field element to be displayed only when a row has been selected within the grid (using the PeoplTools single or multiple selection mechanism on a row.
psc_simple_label Layout Label Apply on page field to display a simple label where there is no reserved space for the label. The width is the size of the label itself rather than the typical 33% resevered space of the container.
psc_singleselect-hide Grid Applied to a grid, it indicates that the single selection mechanism rendered by PeopleTools will be hidden.
psc_size-large Switch Because the size of the SWITCH form of the checkbox is fixed, use this style on a checkbox to get a largest width for the label.
psc_size-medium Switch Because the size of the SWITCH form of the checkbox is fixed, use this style on a checkbox to get a larger width for the label (default is an IMPLIED SMALL).
psc_size-xsmall Switch Because the size of the SWITCH form of the checkbox is fixed, use this style on a checkbox to get a smaller width for the label (default is an IMPLIED SMALL). If you want a no text version, see the style psc_notext.
psc_standard Switch Used if an application wanted to toggle between SWITCH display of a checkbox and the STANDARD display of a checkbox. If you apply psc_standard to a SWITCH form, it will appear as a normal checkbox.
psc_strong Visual Sets font weight to bold (same as psc_bold).
psc_subtitle Visual Grid/Groupboxes This style applies changes to a grid title or a group box title to appear not as a standard heading but more like a subtitle, expecting that a container would have a higher level heading. The font size of the actual heading level being used in the grid title/group box header rendering is not modified, but the color is (uses inherited color rather than normal header colors), border (removed) and padding.
psc_tablelayout-auto Grid Sets the table layout for a FLEX grid to auto.
psc_tablelayout-fixed Grid Sets the table layout for a FLEX grid to fixed.
psc_tablelayoutinherit Grid Sets the table layout for a FLEX grid to inherit.
psc_text-disclaimer Visual Similar to psc_text-important but does not include an image, and this type of text is used to display disclaimer information at the bottom of content.
psc_text-example Visual Not used by Peoplesoft Applications but it is a style to provide an example in text form of a value to be entered. This typically displayed beneath (or possibly beside) an entry field to give an example. Typical usage might be to describe formatting. If placed below an entry field, the spacing below the entry field should be removed (psc_marginbottomnone) so that the example is close to the field. Also, in accessibility mode, applications should use ariadescribedby and point to the text field that describes the format so that accessible users have the same context information available for the field. If you want the example text to be beside the entry field, look at the psc_reldisp* styles to style this similar to psc_reldisp-units.
psc_text-important Visual Simple style to text in such a way to bring importance to this area. Within this layout groupbox, you would typically have a display only (as text) editbox or longeditbox and an optional image (which should come first as a child). The editbox/longedit controls will have their label's hidden and will wrap around the image (if present).
psc_text_center Layout Same as psc_halign-center. Performs text alignment as centered.
psc_tile-box-data Tile Sets padding on a group box to contain tile data.
psc_tile-box-img Tile Style used on a container which has a image to be used as the tile's main image.
psc_tile-img Tile Style applied to the tile image.
psc_tile_content Tile Basic style for tile content interior. There are two sections of a grouplet displayed in a tile. This section (psc_tile_content), which contains the main content of the tile, and then there is the psc_tile_livedata section.
psc_tile_contentcenter Tile Used to center the content within a tile (can be used at various levels) using the FLEX CSS model. Commonly used on psc_tile_content.
psc_tile_content-kpiimage Tile Styling for Container of a KPI image within the content area.
psc_tile_contentmetrics Tile Styling for metrics container found within the tile content area (as opposed to the live data area).
psc_tile_contentmetricsdata Tile Styling livedata when it is located within the content area.
psc_tile_kpi Tile Styling for KPI data.
psc_tile_kpi-1 Tile Styling for KPI data.
psc_tile_kpi-box-1 Tile Style for group box containing Key Performance Indicator (KPI) data.
psc_tile_kpi-box-2 Tile Style for group box containing Key Performance Indicator (KPI) data.
psc_tile_kpi-label Tile Style for label for KPI data.
psc_tile_livedata Tile Style applied to a group box that would be a sibling to psc_tile_content when a parent group box is used to house both the psc_tile_content and psc_tile_livedata.
psc_tile_livedatacount Tile Style applied to an edit box (typically) containing a count to be displayed in the low corner of the tile (typically use psc_label-none).
psc_tile_livedatadescr Tile Outer container used for live data description (child of psc_tile_livedata).
psc_tile_livedatadescr-box Tile Child of psc_tile_livedatadescr containing actual information.
psc_tile_livedata-img Tile Image style within live data area.
psc_tile_livedatatrendimage Tile Image used to show trend direction within livedata section.
psc_tile_livedata_des cr1 Tile Live data item (child of psc_tile_livedata-descr-box). Typically also has style psc_tile_livedata_item.
psc_tile_livedata_ite m Tile Style indicating a page field is part of livedata.
psc_title-h1 Visual Uses the same styling of text as the H1. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h2 Visual Uses the same styling of text as the H2. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h3 Visual Uses the same styling of text as the H3. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h4 Visual Uses the same styling of text as the H4. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h5 Visual Uses the same styling of text as the H5. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-h6 Visual Uses the same styling of text as the H6. Warning if you use this on a regular field and it visually is a header, you need to deal with accessibility to add attributes to make it a header to a screen reader as well. Simply styling something to look like a header is not sufficient.
psc_title-page Visual Same styling as psc_title-h1.
psc_title-sub Visual Same styling as psc_title-h2.
psc_toggleimagecontainer ps_collecti on.ps_butt on_bar Button Bar View Selector Similar to psc_gridviewtoggle but a more generic construct for general purpose radio buttons styled with images via custom CSS. This is a container for psc_toggleimageitem.
psc_toggleimageitem Button Bar View Selector Similar to .psc_gridview-item but used as a child of psc_toggle-imagecontainer. Each item is sized similarly to the psc_gridview-item as far as the image size. It is up to the developer to add the definitions for the actual images to use. You cannot specify images in Application Designer for radio buttons.
psc_transparent Visual Button Used to make a button's background and border completely transparent.
psc_trigger-hidden psc_listlinkmenu ListView Style used on ListView styling to hide the trigger column/field EXCEPT in accessibility mode.
psc_valign-baseline Layout Sets vertical alignment property to baseline.
psc_valign-bottom Layout Sets vertical alignment property to bottom.
psc_valign-middle Layout Sets vertical alignment property to middle.
psc_valign-top Layout Sets vertical alignment property to top.
psc_value-alignauto Layout Applies style to page field elements to align the text (whether in editable control or simple text [with size]) based on type. Most types are aligned left but numeric types are aligned right. The only time that autoalignment occurs is within a flex grid, where numerics are right, buttons are centered, and text is left.
psc_value-ellipsis Layout Applies text overflow to be an ellipsis for the value if there is a specific size designated for the value structure. This is only applicable for controls rendered as display only as text.
psc_value-fullwidth Layout Sets the size of display only as text or hyperlink value as the full width of the container (also changes to display style of block).
psc_valuehaligncenter Layout Horizontally centers the text within editable control or a sized display only text.
psc_value-halignleft Layout Horizontally left justifies the text within editable controls or a sized display-only text.
psc_value-halignright Layout Horizontally right justifies the text within editable controls or a sized display-only text.
psc_value-height{120}em Layout Set the height of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 20em incremented by 1em.
psc_value-height{1100}pct Layout Set the height of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100% incremented by 1%.
psc_value-height{1100}px Layout Set the height of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100px incremented by 1px.
psc_value-heightauto Layout Set the height of display-only text or display-only as hyperlink (email/url) to be automatic, based on content.
psc_valuevalignbaseline Layout Sets the vertical alignment of display-only text (with height specified) to be baseline.
psc_valuevalignbottom Layout Sets the vertical alignment of display-only text (with height specified) to be bottom.
psc_valuevalignmiddle Layout Sets the vertical alignment of display-only text (with height specified) to be middle.
psc_value-valigntop Layout Sets the vertical alignment of display-only text (with height specified) to be top.
psc_value-width{1100}em Layout Sets the width of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100em incremented by 1em.
psc_value-width{1100}pct Layout Sets the width of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100% incremented by 1%.
psc_value-width{1100}px Layout Sets the width of display-only text or display-only as hyperlink (email/url) to the specified value. Value ranges from 1 to 100px incremented by 1px.
psc_value-widthauto Layout Sets the width of display-only text or display-only as hyperlink (email/url) to be automatic, based on content, which is the default if wrapping has not been enabled in Application Designer.
psc_width-{1-100}em Layout Any Sets the width of a container/entity. Values range from 1em to 100em in increments of 1em.
psc_width-{1-100}pct Layout Any Sets the width of a container/entity. Values range from 1% to 100% in increments of 1%.
psc_width-{1-100}px Layout Any Sets the width of a container/entity. Values range from 1px to 100px in increments of 1px.
psc_width-auto Layout Any Sets the width of a container/entity to "auto," which allows the content (or some other styling) to drive the width of the item.
psc_wrap Layout By itself, turns on wrapping for the specific container. This is an inherited setting so it can affect the children. It is also used by list-linkmenu to turn off text wrapping of links contained within the LISTVIEW. The default is no wrapping, or truncation.
psc_wrap-link Hyperlink Used on a hyperlink (standard hyperlink) to allow wrapping of text.
psc_wrap-linktext Hyperlink Used on an Image+Text hyperlink to allow wrapping of the hyperlink text.