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_boxcheckbox | Checkbox | 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_collection | Layout | 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-topnone | Layout | 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. |