Peoplesoft Fluid Ui Css Guide v01

Oracle PeopleSoft PeopleTools Product Documentation
Update
CSS Guide for PeopleSoft Fluid User

Interface
May 2015
Oracle PeopleSoft PeopleTools 8.54 Product Documentation Update: PeopleSoft Fluid User Interface
Copyright 2015, Oracle and/or its affiliates. All rights reserved.
Trademark Notice
Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their
respective owners.
Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used
under license and are trademarks or registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD
logo, and the AMD Opteron logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a
registered trademark of The Open Group.
License Restrictions Warranty/Consequential Damages Disclaimer
This software and related documentation are provided under a license agreement containing restrictions on use
and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license
agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit,
distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering,
disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited.
Warranty Disclaimer
The information contained herein is subject to change without notice and is not warranted to be error-free. If you
find any errors, please report them to us in writing.
Restricted Rights Notice
If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf
of the U.S. Government, the following notice is applicable:
U.S. GOVERNMENT RIGHTS
Programs, software, databases, and related documentation and technical data delivered to U.S. Government
customers are "commercial computer software" or "commercial technical data" pursuant to the applicable Federal
Acquisition Regulation and agency-specific supplemental regulations. As such, the use, duplication, disclosure,
modification, and adaptation shall be subject to the restrictions and license terms set forth in the applicable
Government contract, and, to the extent applicable by the terms of the Government contract, the additional rights
set forth in FAR 52.227-19, Commercial Computer Software License (December 2007). Oracle America, Inc., 500
Oracle Parkway, Redwood City, CA 94065.
Hazardous Applications Notice
This software or hardware is developed for general use in a variety of information management applications. It is
not developed or intended for use in any inherently dangerous applications, including applications that may create
a risk of personal injury. If you use this software or hardware in dangerous applications, then you shall be
responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its safe use.
Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or
hardware in dangerous applications.
Third Party Content, Products, and Services Disclaimer
This software or hardware and documentation may provide access to or information on content, products, and
services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all
warranties of any kind with respect to third-party content, products, and services. Oracle Corporation and its
affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party
content, products, or services.
Alpha and Beta Draft Documentation Notice
This documentation is in preproduction status and is intended for demonstration and preliminary use only. It may
not be specific to the hardware on which you are using the software. Oracle Corporation and its affiliates are not
responsible for and expressly disclaim all warranties of any kind with respect to this documentation and will not be
responsible for any loss, costs, or damages incurred due to the use of this documentation.
Product Documentation Update
CSS Guide for PeopleSoft Fluid User Interface

May 2015
Contents
Introduction ......................................................................................................................................................4
PeopleTools System Default CSS Styles .....................................................................................................5
Fluid Application Content CSS Styles ........................................................................................................41

May 2015
Introduction
As described in the PeopleSoft PeopleTools 8.54: Fluid User Interface Developers Guide, creating fluid
applications relies heavily on CSS 3.0 for the look, feel, and layout of the runtime application. If you intend to
customize or create any fluid application, expert knowledge of CSS is required.
Prior to working with any fluid style development work, make sure you are familiar with the documentation
provided in PeopleSoft PeopleTools 8.54: Fluid User Interface Developers Guide, Adding Page Controls,
Applying Styles.
http://docs.oracle.com/cd/E58500_01/pt854pbh1/eng/pt/tflu/concept_ApplyingStyles.html#topofpage
This document provides descriptions of nearly a thousand CSS styles delivered with PeopleTools 8.54. The
styles are divided in these categories:
PeopleTools System Default CSS Styles: These styles are used to control basic elements of the fluid
infrastructure provided by PeopleTools, such as the NavBar, the fluid banner, homepages, tiles and so
on.
Application Content CSS Styles: These styles are used to control application content deployed in fluid
mode.
Note. This document does not include every style shipped with PeopleTools 8.54. It includes the styles that
are most commonly used and the styles that are recommended to use. If a style does not appear in this
document, it may mean that the style is no longer used or not recommended to use, extend, or override.
To better understand the columns in the tables of this guide, refer to the following list for a brief description of
each column:
Style: Lists the style name, as it appears in the delivered style sheet.
Used With: If a style is to be used in conjunction with another specific style, it will be listed here.
Category: If a style is designed to be used with a specific construct, like a grid, the name of that
construct will be listed here.
Sub Category: If a style is designed to be used with a specific type of construct it is listed here. For
example, if the category is Grid, the sub category may be Flex, indicating this style applies to grids of the
type flex grid.
Description: Includes information on the purpose of the style, how it is intended to be used, and, if
needed, any implications or guidelines pertaining to that style.

May 2015
PeopleTools System Default CSS Styles

The following table describes the CSS styles applied automatically by PeopleTools as default styles for fluid
elements. These styles are applied to:
Delivered fluid elements such as the NavBar, fluid banner, search pages, and so on.
Page controls added to fluid pages. Styles are applied automatically as default styles.
Style
Used
With
Context
Category
SubCategory
android
OS
chrome
Browser
debugtext
expand
Debugging
Groupbox
firefox
Browser
framept_attachmentpage
Modal
Attachment
framept_promptpage
Modal
Prompt
framept_viewattach
Modal
Attachment
ie
imagePreview
Browser
Modal
Attachment
ios
loader
loadingIndicator
OS
Modal
Modal
Attachment
Attachment
mac
OS
Accordion
Description
StyleAppliedonHTML
tagindicatingthatthe
device'sOSisAndroid.
StyleAppliedonHTML
browserhasbeen
identifiedasChrome.
TextwithintheAjax
DebuggingConsole.
Maynotbeused.
StyleAppliedonHTML
browserhasbeen
identifiedasFirefox.
StylingforAttachment
DialogFrame.
StylingforPrompt
PageFrame.
StylingforView
AttachmentFramefor
iOS.
StyleAppliedonHTML
browserhasbeen
identifiedasInternet
Explorer.
Maynotbeused.
StyleAppliedonHTML
device'sOSisiOS.
Maynotbeused.
Maynotbeused.
StyleAppliedonHTML
device'sOSisgeneral
Style

May 2015
Used
With
Context
Category
SubCategory
nbar
NavBar
nuidflt
HomePage
Tile
nuilp
HomePage
Tile
nuinb
HomePage
Tile
nuitile
HomePage
Tile
nuitilegrid
HomePage
Tile
pagept_promptpage
Modal
Prompt
pc
DeviceType
persmode
HomePage
Tile
ps_accordion
Groupbox
Accordion
ps_accordion_content
Groupbox
Accordion
ps_accordion_content0
Groupbox
Accordion
ps_accordion_content0Expand
Groupbox
Accordion
ps_accordionH
Groupbox
Accordion
ps_actions_cont
Banner
Description
MAC.
UsedtosetupNavBar
scrolling.
Settingupdefaultsfor
groupletsin
Homepage.
Tilestylingfor
Homepage.
TileImageStylingfor
Homepage.
Homepagestyleto
indicatecontentis
withinTile.
HomepageTileGrid
styling.
Pagestylingfor
Promptpage.
StyleAppliedonHTML
device'sTYPEisPC
(versustablet/phone
aretypicallynotused).
UsedbyHomepage
whenin
personalizationmode.
VerticalAccordion
outermostcontainer.
Individualaccordion
groupboxcontainer.
Individualaccordion
groupboxcontainer
(inner).
Horizontalaccordion
expandedstate(not
used).
Horizontalversionof
theaccordion(not
used).
Outercontainerfor
therightareaofthe
banner,which
containsaction
controls(i.e.,
Style

May 2015
Used
With
Context
Category
SubCategory
ps_ajax_console
Tools
ps_arrow
Modal
Page
ps_arrow_bottom
Modal
Page
ps_arrow_left
Modal
Page
ps_arrow_left_disable
Modal
Page
ps_arrow_right
Modal
Page
ps_arrow_right_disable
Modal
Page
ps_arrow_top
Modal
Page
ps_attachcompletetext
Modal
Attachment
ps_attachimg
Modal
Attachment
ps_attachindicator
Modal
Attachment
Description
homepagebutton,
globalsearchbutton,
notificationsbutton,
actionslistbutton,
andnavbarbutton).
PeopleTools
debuggingtoolfor
monitoringAjax.
TailStylefor
ANCHOREDModal
(pointtothe
triggeringelement).
TailStylefor
ANCHOREDModal
(pointtothe
triggeringelement).
TailStylefor
ANCHOREDModal
(pointtothe
triggeringelement).
TailStylefor
ANCHOREDModal
(pointtothe
triggeringelement).
TailStylefor
ANCHOREDModal
(pointtothe
triggeringelement).
TailStylefor
ANCHOREDModal
(pointtothe
triggeringelement).
TailStylefor
ANCHOREDModal
(pointtothe
triggeringelement).
Completiontextinthe
attachmentdialog.
Previewimagefound
intheattachment
dialogfilelist.
ProgressBarindicator
fortheattachments
Style
Used
With
Context
Category
SubCategory
ps_attachinstruct
Modal
Attachment
ps_attachloader
Modal
Attachment
ps_attachloadertext
Modal
Attachment
ps_attachuploadtext
Modal
Attachment
ps_back_cont
Banner
ps_box_gridcol
Grids
ps_boxbutton
Pushbutton
ps_boxcheckbox
Checkbox
ps_boxcontrol

May 2015
Many
Places
Controls
ps_boxdropdown
Dropdown
ps_boxedit
EditBox
Flex,Div
Description
dialog.
StaticInstructionText
foundonmultifile
selectionattachment
dialog.
Containerforthe
overallupload
progressarea
(progressbarand
statustext).
Containerforthe
Uploading/Completio
nstatustext.
Uploadingstatustext
intheattachment
dialog.
Outercontainerfor
theleftareaofthe
banner,which
containstheback
control(orthe
CompanyLogoon
Homepage).
Interiorwrapperfora
grid'scolumnheader
entry.
Outermostcontainer
ofabuttonpage
element.
Outermostcontainer
ofacheckboxpage
element.
Innercontaine,which
wrapstheactualinput
typepageelement
(siblingtops_box
labeltypically).
Outermostcontainer
ofadropdownpage
element.
Outermostcontainer
ofaneditpage
element.
Style

May 2015
Used
With
Context
Category
SubCategory
ps_boxeditlbl
UNKNOWN
ps_boxgrid
Grids
All
ps_boxgridc
Grids
All
ps_boxgriddiv
Grids
Div
ps_boxgridflex
Grids
Flex
ps_boxgridhead
Grids
All
ps_boxgridheader
Grids
All
ps_boxgridheader_bar
Grids
All
ps_boxgridlist
Grids
List
ps_boxgridtabs
Grids
Flex
ps_boxgridtitle
Grids
All
ps_boxgroup
Groupbox
ps_boxgrouplet
Grouplet
ps_boxhr
Layout
ps_boxhtmlarea
HTML
Description
Genericinner
containerforagrid.
Containerforallgrids
(siblingtops_box
gridheader).
Outermostcontainer
foraDIVGRID.
Outermostcontainer
ofaFLEXGRID.
Secondarytablefor
FLEXGRIDSusedtofix
theheaderina
scrollablegrid.
Containerforthegrid
header,which
includesallelements
(title,numberofrows,
headerbar,tabs).
Wrapperforthegrid
headerbarcontaining
PeopleTools(sort)and
applicationcustomer
buttonsforagrid(if
any).
Outermostcontainer
ofaLISTGRID.
Containerforthetabs
foraTABBEDFLEX
GRID.
ContainerfortheGrid
Title.
Genericstyleapplied
toallgroupboxpage
elements.
Outermostcontainer
ofagrouplet.
Outermostcontainer
foraHorizontalRule
pageelement.
Outermostcontainer
foranHTMLArea
pageelement.
Style

May 2015
Used
With
Context
Category
ps_boximg
Image
ps_boxlabel
Label
ps_boxlink
Hyperlink
ps_boxlongedit
LongEdit
Related
Content
ps_boxmenu
SubCategory
ps_boxmore
Grids
Accessibility
ps_boxmsgactions
Modal
Message
ps_boxmsgalert
Modal
Message
ps_boxmsgcontainer
Modal
Message
ps_boxmsglong
Modal
Message
ps_boxmsgnum
Modal
Message
ps_boxmsgother
Modal
Message
10
Description
Outermostcontainer
foranImagepage
element.
Innercontainerwhich
wrapsthelabelofan
inputpageelement
(siblingtops_box
controltypically).
Outermostcontainer
foraHyperlinkpage
element.
Outermostcontainer
foraLongEditpage
element.
Lazyscrollbuttonto
fetchmorerowsin
accessibilitymode.
Containerforthe
actionbuttonsina
MessagePopup.
Innercontainerfora
MessagePopup
containingthe
messagetext(sibling
tops_box
msgactions).
Outermostcontainer
forallMessagePopup
content.
Explanationtext
containerfora
MessagePopup.
MessageSet/Number
containerfora
MessagePopup.
Supplimental
informationfor
certaintypesof
MessagePopups(like
stackbacktracefor
PeopleCodeerror
Style

May 2015
Used
With
Context
Category
SubCategory
ps_boxmsgshort
Modal
Message
ps_boxpagetabs
Tabs
Page
ps_boxpromptpage
Modal
Prompt
ps_boxradio
RadioButton
ps_boxrowaction
ScrollArea
ps_boxscrollarea
ScrollArea
ps_boxscrollarearow
ScrollArea
ps_boxsearchop
Modal
Prompt
ps_boxsearchto
Modal
Prompt
ps_boxsort
Grids
All
Description
messages).
Shorttextfora
MessagePopup.
Outermostcontainer
forpagetabs.
Outermostcontainer
forthepromptpage
actualcontent.
Outermostcontainer
foraradiobutton
pageelement.
Containerforrow
leveladd/delete
operationsforscroll
areapageelements.
Outermostcontainer
forascrollareapage
element.
Containerforarowof
ascrollareapage
element.
Specialwrappertoa
secondaryps_box
controlcontainingthe
dropdownforthe
searchoperators.Only
foundonaprompt
page.
Specialwrappertoa
tertiaryps_box
controlcontaininga
"TO"fieldonaprompt
pagewhen
performinga
BETWEENsearch
operation.
Styleappliedtothe
specialgridsort
buttonfoundina
grid'sheaderbar(if
sortingisenabledand
columnsortingisnot
available).
11
Style

May 2015
Used
With
Context
Category
SubCategory
ps_boxstaticimg
StaticImage
ps_boxtext
StaticText
ps_boxtypeahead
Page
Typeahead
ps_boxvalue
Controls
Disabled
ps_boxvalueemail
Controls
Disabled
ps_boxvaluelink
Controls
Disabled
ps_calendar_modal
Calendar
ps_content
Page
12
Description
Outermostcontainer
forastaticimagepage
element.
Outermostcontainer
forastatictextpage
element(orother
statictextliketherow
countinagrid
header).
Outercontainerfor
thetypeaheadresults.
ReadonlytextVALUE
(asopposedtothe
label)ofadisabled
inputtypeofcontrol,
whichisdisplayedas
TEXTratherthana
disabledcontrol(valid
forEditbox,LongEdit
box,Dropdowns,and
Checkboxes).
Wrappercontaining
thetagforrendering
anemailasa
hyperlink(when
disabledashyperlink
issetonanEMAIL
HTMLinputtype).
Wrappercontaining
thetagforrenderinga
URLasahyperlink
(whendisabledas
hyperlinkissetona
URLHTMLinputtype).
Modalcontainerstyle
appliedforthe
PeopleTool'sversion
ofaCalendarpicker
foraTextbasedDate
field.
Pagecontainer
renderedtocontain
anapplication's
Style

May 2015
Used
With
Context
Category
SubCategory
ps_contentgroup
Groupbox
ps_custom_action
Banner
ps_custom_cont
Banner,Modal
ps_detailgroup
Groupbox
ps_footer
Page
ps_gridbody
Grids
All
ps_gridcell
Grids
All
ActionsList
Collapsible
Description
content.
Containerinagroup
box(noncollapsible),
foundifaheader
exists,whichcontains
theactual
application'scontent
(siblingtops_header
group).
Specialtargetsection
oftheActionsList
whereaspecific
transaction'sactions
areplaced.
Containerin
banner/modalheader
whereapplication's
customitemsare
placed(left
[back/canel],center
[title],andright
[actions/Done]).
Similartops_content
groupbutusedon
collapsiblegroup
boxestocontainthe
actualapplication's
contentofagroup
box(versusthe
headerofthegroup
box).
Outermostcontainer
forthefootersection
ofthepage(contains
theFOOTERpage
content).
Outermostcontainer
oftheactualgrid's
body(content).
Identifieswhatis
consideredtobea
CELLofagridpage
element.Most
13
Style

May 2015
Used
With
Context
Category
SubCategory
ps_gridcol
Grids
Flex
ps_gridcollabel
Grids
Flex
ps_griddiv
Grids
Div
ps_gridflex
Grids
Flex
ps_gridflexhead
Grids
Flex
ps_gridhead
Grids
Flex,Div
ps_gridheadrow
Grids
Flex,Div
ps_gridlist
Grids
List
ps_gridrow
Grids
All
14
Description
importantforFLEX
gridsbutareapplied
GENERICALLYsothat
"groupings"withinthe
gridusinggroupboxes
canbemaintained.
Outerwrapperfora
gridcolumnheader.
Styleappliedtoa
column'sheadingLINK
whenthecolumn
sortingisenabled(and
canbebasedongrid
usage).
Qualifiertops_grid
bodytoindicatethisis
aDIVGRID.
QualifiertotheTABLE
HTMLtagtoindicate
thisisaFLEXGRID.
QualifiertotheTABLE
HTMLtagofthe
SHADOWTABLEused
tocontrolthefixed
headerinascrollable
FLEXgrid.
Outermostwrapper
forgridcolumn
headers.
Rowofagrid
containingthegrid's
columnheaders.
Wrapperwhich
containsasachildthe
actuallistitself(child
isps_gridbody,which
isaUL/OLtag).
Identifieswhatis
consideredtobea
ROWofagridpage
element(different
gridswillusedifferent
HTMLtags).
Style

May 2015
Used
With
Context
Category
SubCategory
ps_gridtitle
ps_groupleth
Grids
Grouplet
ps_header
Page
ps_header_bar
Banner
ps_header_bar_custom
Banner
ps_header_modal
Modal
ps_headergridcustom
Grids
All
ps_headergridend
Grids
All
ps_headergridsystem
Grids
All
ps_headergroup
Headings
ps_headergroupExpand
Groupbox
All
Accordion
Description
Headertagusedas
theheaderofagrid.
Groupletheadertext.
Outermostcontainer
fortheheadersection
ofthepage(contains
theHeaderPage
content).
Overallcontainerof
theBANNERarea,
whichcontainsthe
backnavigation,page
title,andaction
buttonarea.
Areabelowthe
bannerareausedto
populatean
application'scustom
headerinformation.
Containerforthe
entiremodalheader.
Similarinnatureto
theps_header_barfor
mainpages.
Containerofthe
application'scustom
buttonsinagrid
headerbar.
Specialmarkupfor
terminatingany
floatingelements
withinagridheader
bar.
Containerofthe
systemcontrolsina
gridheaderbar.For
example,thegridsort
button.
Containerofthe
groupbox'sheader.
Horizontalaccordion
expandedheader(not
used).
15
Style

May 2015
Used
With
Context
Category
SubCategory
ps_headergsearch
Banner
ps_headernavbar
Banner
ps_headernext
Banner
ActionsList
ps_headerprevious
Banner
ActionsList
ps_hidden
Layout
ps_icondate
EditBox
ps_iconprompt
EditBox
ps_iconrc
EditBox
ps_indicator
Checkbox
ps_main
Page
16
Switch
Description
GlobalSearch
functionalityinthe
headerbar(asa
buttonoritemunder
theActionsList).
NavBarfunctionality
intheheaderbar(asa
buttonoritemunder
theActionsList).
NextInList
functionalityinthe
headerbar(asanitem
undertheActions
List).
PreviousInList
functionalityinthe
headerbar(asanitem
undertheActions
List).
Internalstyleusedto
hideanelementfrom
displayandscreen
readers.
Actionableimageto
triggerthe
PeopleToolscalendar
picker.
Actionableimageto
triggertheprompt
page.
Actionableimageto
triggerrelatedactions
functionalityona
field.
Containerforthe
checkedand
uncheckedtextvalues
foracheckbox
displayedinSWITCH
(advanced)mode.
Pagecontainerforthe
contentsectionofthe
page.
Style

May 2015
Used
With
Context
Category
SubCategory
ps_main_trf
Page
Transition
ps_main_trf2
Page
Transition
ps_masktrans
Modal
ps_menucontainer
Menu
ActionsList
ps_menuitem
Menu
ActionsList
ps_menusection
Menu
ActionsList
ps_menutypeact
Banner
ActionsList
ps_mheaderbar
Modal
ps_mheadersection1
Modal
Header
ps_mheadersection2
ps_mheadersection3
Modal
Modal
Header
Header
Description
PageTransfer
animationstylewhen
animationisenabled.
Secondarypagestyle
whenpageanimation
isenabled.
Transparentpage
maskwhenamodalis
poppeduptoprohibit
workwiththemain
pageelements.
Outermoststylefor
items,whichappear
menulike.
Individualwrappers
aroundmenuitemlike
elements.
Divisionsofmenu
itemsintogroups.For
example,application
section,search
section,system
sectionoftheActions
List).
Outermoststyle
appliedtothemodal
popupfortheActions
List.
Modalheader
container.
Leftsectioncontainer
ofthemodalheader
containingthe
CANCELoperation(if
Cancel/Doneis
configuredforthe
modal).
Centersection
containerofthe
modalheader
containingthemodal
title.
Rightsection
17
Style

May 2015
Used
With
Context
Category
ps_mid_section
Page
ps_mod_wrap
Modal
ps_mod_wrapc
Modal
ps_modal_body
Modal
ps_modal_bottom
Modal
ps_modal_close
Modal
ps_modal_container
Modal
ps_modal_content
Modal
ps_modal_header
Modal
ps_modal_title
Modal
18
SubCategory
Description
containerofthe
modalheader
containingtheDONE
(orCLOSE)operation.
Pagecontainerasa
siblingbetweenthe
headerandfooter
sections,which
containstheprimary
applicationcontent.
Modalpagestructure
container.
Modalpagestructure
container(childof
ps_mod_wrap).
SpecialstyleofINNER
HTMLDOCUMENT
withtheiframeofthe
BODYtag(normal
bodytaghasnoclass
specified).
Bottomsectionofa
modaltypically
containingmodal
controls(nottypically
used).
Wrappercontainerfor
theModalClose
button(the"X"button
typicallyseenonthe
leftsideofthemodal
header).
Genericwrapperfor
modalcontent.
Specificwrapperfor
modalcontent.For
example,asecondary
pagewouldhavean
iframeasachild.
Containerstyleforthe
modalheaderarea.
Specialstyleusedon
themodaltilefor
Style

May 2015
Used
With
Context
Category
SubCategory
ps_modalgridsort
Grids
ps_modalmask
Modal
ps_modalmasktran
Modal
ps_more
Grids
ps_pagecontainer
Page
ps_pagetitle
Headings
ps_pagetitle_cont
Banner
ps_popupattach
Modal
Attachment
ps_popupback
Groupbox
Popup
ps_popuphorizontal
Groupbox
Popup
ps_popupmenu
Groupbox
Popup
Sort
Description
internallyrendered
modals(liketheGrid
Sortmodal).
Containerstyleforthe
GridsortPopup
Modal.
Overlaymaskingthe
transactionbeneatha
modalwhenamodal
appears.
Overlaymaskingthe
transactionbeneath
whenamodal
appears.
RelatedContentitem
indicatoroffolder
(chevron).
Pagestructureused
byPeopleToolsin
renderingapage.
Styleappliedtothe
HEADERelement
withinagroupboxof
type"PageTitle".
Sectionstyleofthe
centerareaofthe
mainpagebanner
containingthetitle(or
HomePageSelector).
Pagestyling
attachmentdialog.
Backbuttonfor
specialPeopleTools
generatedmodals.
Styleusedwhen
renderingPopup
groupboxeswithTAIL
pointerontheleftor
right.
Styletobeapplied
whentheinternal
contentofaPopup
Groupboxisalistof
19
Style

May 2015
Used
With
Context
Category
SubCategory
ps_popupmsg
Modal
Message
ps_popupvertical
Groupbox
Popup
ps_process
HomePage
Tile
ps_promptcriteria
Modal
Prompt
ps_promptdone
Modal
Prompt
ps_promptinmode
Modal
Prompt
ps_promptintemp
Modal
Prompt
ps_promptresultsgrid
Modal
Prompt
ps_promptresultswrapper
Modal
Prompt
ps_promptsearchoptions
ps_promptsourcelabel
Modal
Modal
Prompt
Prompt
20
Description
items(menulike).
Outermoststyle
appliedtoa
MessageBox/
WinMessagepopup.
Styleusedwhen
renderingPopup
groupboxeswithTAIL
pointeronthetopor
bottom.
Stylewhenrendering
staticimageonatile
intheHomepage.
Collapsiblegroupbox
containingaprompt
page'scriteriafields.
PromptPageDone
button.
Styleappliedwhen
thepromptpage
openedfromanIN
OPERATIONprompt.
EnablestheDone
buttonandthemulti
rowselectionsonthe
grid.
Specialhiddenfieldon
thepromptpagefor
INOPERATION
prompting.
Gridpageelement
containingtheprompt
page'sresultsgrid.
Collapsiblegroupbox
containingaprompt
page'sresultsgrid.
Hyperlinkonprompt
pagetotoggledisplay
ofthecriteriafields
showingthesearch
operatorasadrop
down.
Fielddisplayingthe
Style

May 2015
Used
With
Context
Category
SubCategory
ps_pspagecontainer
Page
ps_pspagecontainer_srch
Page
ps_saved_text
Page
ps_scrollable
Grids,Groupbo
xes
All
ps_scrollable_both
Grids,Groupbo
xes
All
ps_scrollable_h
Grids,Groupbo
xes
All
ps_scrollable_v
Grids,Groupbo
xes
All
ps_search
Page
Component
Search
ps_searchcustom
Banner
ps_switch
ps_box
checkbo
x
Checkbox
Switch
Description
labelofthefieldfrom
whichthePrompt
pagewastriggered.
Pagestructureused
byPeopleToolsin
renderingapage.
Pagestructureused
byPeopleToolsin
renderingapage.
Textstylefor
displayingthesave
confirmationtext
(hiddenin8.54/8.55).
Indicatesthat
PeopleToolsscrolling
hasbeenenabledfor
agridorgroupbox.
Indicatesthatboth
horizontalandvertical
isenabled.
Indicatesthat
horizontalonly
isenabled.
Indicatesthatvertical
onlyToolsscrollingis
enabled.
Specialareaofapage
containingthesearch
criteriaandfieldsfor
ComponentLevel
(Realtime)searching.
Searchbutton
displayedwhena
componentsearchhas
beeninvolved(visually
replacesthestandard
GlobalSearch).
Stylingappliedtothe
containerofa
checkboxinadvanced
mode(default),which
21
Style

May 2015
Used
With
Context
Category
Banner,
Modal
ps_system_cont
ps_tab
ps_tabs
Tabs
ps_tablink
ps_tab
Tabs
ps_tabs
Tabs
ps_test_level_1
Debug
ps_test_level_10
Debug
ps_test_level_2
Debug
ps_test_level_3
Debug
22
SubCategory
Description
displayacheckboxas
aSWITCH.
Containerin
banner/modalheader
wheresystemspecific
itemsareplaced.
Thereareleft
[back/canel],center
[title],andright
[actions/Done].
Styleforanindividual
tabaspartofalistof
tabs(pagetaborgrid
tab).
Actualhyperlink
controlforthetab
itself.
Actuallistcontainer
foracollectionoftabs
(ps_tab).
Simpleinternallayout
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
Style

May 2015
Used
With
Context
Category
ps_test_level_4
Debug
ps_test_level_5
Debug
ps_test_level_6
Debug
ps_test_level_7
Debug
ps_test_level_8
Debug
ps_test_level_9
Debug
ps_toolbar_mod
ps_typeahead
ps_typeahead_modal
Page
Modal
Modal
SubCategory
Description
Typeahead
Typeahead
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
debuggingwhenthe
LayoutOnlycheckbox
isenabledina
component's
properties.
Potentialtargetfor
toolsactionsatthe
bottomofthe
document(notused).
Typeaheadcontainer.
Typeaheadmodal
23
Style

May 2015
Used
With
Context
Category
SubCategory
ps_viewattachdoc
Modal
ps_wrapper
Page
psaccesshidden
Layout
Accessibility
psattachloadcontainer
Modal
Attachment
psbox_groupExpand
Groupbox
Accordion
psboxgridcright
Grids
All
psbutton
Pushbutton
psbuttonwrapper
Pushbutton
psc_animatefadeinout8s
Banner
Confirmation
psc_attachclear
Modal
Attachment
psc_attachcompleted
Modal
Attachment
24
Attachment
Description
wrapperstyling.
Stylingattachment
viewerstyling(for
iOS).
Pagestructureused
byPeopleToolsin
renderingapage
(locationswherePAGE
STYLESusingPage
propertiesor
PeopleCodeare
located).
Renderscontent
offscreenbutreadable
byscreenreader.
Containeroftheload
indicatorfor
attachmentdialog.
Expandedstate
indicatorfor
accordiongroupbox.
Innercontainerforall
gridsdirectlyunder
ps_boxgridc
container.
ActualHTMLbutton
control(AnchorTag).
Buttoninternal
wrapperwheretitle
attributeisapplied.
Confirmationarea
animationfor
automaticdismissal.
Staysopenfora
numberofseconds
andthen
automatically
disappears.
Classappliedtothe
attachment"Clear"
button.
Stateappliedtothe
attachmentpage
Style

May 2015
Used
With
Context
Category
SubCategory
psc_attachmultiple
Modal
Attachment
psc_attachselected
Modal
Attachment
psc_attachselecting
Modal
Attachment
psc_attachupload
Modal
Attachment
psc_attachuploading
Modal
Attachment
psc_button
Grids
All
psc_cancel
Modal
Message
psc_carousel
Groupbox
Carousel
psc_checkbox
Grids
All
psc_close
Groupbox
Accordion,
Collapsible
Description
indicatingthatupload
iscompleted.
Attributeclassapplied
toattachmentpage
indicatingmultiple
filescanbeuploaded.
Stateappliedtothe
attachmentpage
indicatingthatatleast
onefilehasbeen
selectedtobe
uploaded.
Stateappliedtothe
attachmentpage
indicatingthatafile
selectionispending.
Classappliedtothe
attachment"Upload"
button.
Stateappliedtothe
attachmentpage
indicatingthat
uploadingisin
progress.
Styleongrid
column/cellsto
identifythatabutton
iscontainedinthe
column.
Cancelbuttonon
MessageboxPopup.
Stylingappliedwhen
Carouselscrollingis
enabledforagroup
box.
Styleongrid
column/cellsto
identifythata
checkboxiscontained
inthecolumn.
Closedstateclass
appliedforcollapsible
groupboxesand
25
Style

May 2015
Used
With
Context
Category
SubCategory
psc_closed
Banner
psc_collapsible
Groupbox
Collapsible
psc_confirmationarea
Banner
Confirmation
psc_confirmationclose
Banner
Confirmation
psc_confirmationmsg
Banner
Confirmation
psc_date
Grids,EditBox
psc_datetime
Grids,EditBox
psc_disabled
Controls
psc_easeb
Page
Transition
psc_easel
Page
Transition
psc_easer
Page
Transition
psc_easet
Page
Transition
psc_empty
Controls
26
Description
accordions.
Usedinseveral
constructstoindicate
thatastructureis
closed(liketheGlobal
Searchtray).
Indicatorthatagroup
boxisacollapsible
groupbox.
Containerforthe
confirmationarea
underthebanner.
Confirmationarea
Closebutton.
Confirmationtext
messagestyling.
Styleongrid
column/cellsto
identifythatadateis
containedinthe
column/Field.
Styleongrid
column/cellsto
identifythata
date/timeiscontained
inthecolumn/field.
Usedonmanypage
elemeentsandonrow
actionstoindicate
thatthecontrolis
DISABLED.
Pageanimation
styling.
Pageanimation
styling.
Pageanimation
styling.
Pageanimation
styling.
Afewstructureshave
apsc_emptystyleto
indicatethatthe
structurehasnovalue
Style

May 2015
Used
With
Context
Category
psc_error
Controls
psc_focus
Controls
psc_formlarger
FormFactor
psc_formmedium
FormFactor
psc_formsmall
FormFactor
psc_formxlarge
FormFactor
SubCategory
Description
(whiletheinner
structureexiststhe
containerisnot
empty).
Styleappliedtothe
wrapperofapage
fieldwhenanerroris
raisedonthefield.For
example,Field
Validationorformat
issue.
Styleappliedtothe
wrapperofspecific
controlstoindicate
thatinputfocushas
beenappliedwithin
thestructurefor
specialstyling.For
exampleradiobuttons
andcheckboxes.
Specialstyleapplied
totheHTMLtagto
indicatethatthe
systemhasdetected
theDEVICEfitsinthe
largeformfactor
range.
Specialstyleapplied
totheHTMLtagto
indicatethatthe
systemhasdetected
theDEVICEfitsinthe
mediumformfactor
range.
Specialstyleapplied
totheHTMLtagto
indicatethatthe
systemhasdetected
theDEVICEfitsinthe
smallformfactor
range.
Specialstyleapplied
totheHTMLtagto
27
Style

May 2015
Used
With
psc_gridnohbar
Context
Category
Grids
psc_has_selected
Grid
psc_hidden
Layout
psc_hideBP1
Banner
psc_hideBP2
Banner
28
SubCategory
All
Description
indicatethatthe
systemhasdetected
theDEVICEfitsinthe
extralargeformfactor
range.
Styletoindicatethat
nogridheaderbarhas
rendered.Thisallows
properformattingof
otherelementsinthe
overallgridheader.
Specialstyleapplied
whenauserhas
selectedoneofmore
rowsusingtherow
selectioncheckox.
Appliedtothat
outermostlevelofthe
gridforstylingitems
inthegridheaderbar
whenarowis
selected.
Stylewhichhidesa
structureorpage
element(CSSdisplay
ofnone).
Usedtohideacontrol
atagivenbreakpoint
tohidebanner
buttonswhenthe
widthofthewindow
getstoosmall.This
breakpointisforapps
custombuttonsputin
thebanner(hide
below900px).
Usedtohideacontrol
atagivenbreakpoint
tohidebanner
buttonswhenthe
widthofthewindow
getstoosmall.This
breakpointisforthe
Style

May 2015
Used
With
Context
Category
psc_hideBP3
Banner
psc_hideBP4
Banner
psc_icon
EditBox
psc_icondisable
Pushbutton
psc_image_only
Pushbutton
psc_labelsuppressed
Grids
psc_layout
Groupbox
SubCategory
All
Description
Homebutton(hide
below800px).
Usedtohideacontrol
atagivenbreakpoint
tohidebanner
buttonswhenthe
widthofthewindow
getstoosmall.This
breakpointisforthe
GlobalSearchbutton
(hidebelow680px).
Usedtohideacontrol
atagivenbreakpoint
tohidebanner
buttonswhenthe
widthofthewindow
getstoosmall.This
breakpointisforthe
Navbarbutton(hide
below580px).
Indicatesthatanicon
existsaspartofthe
renderingofthefield
(datecontrolor
promptcontrol).
Indicatesthata
disabledversionofthe
iconisavailablesothe
systemdoesn'tapply
thedefaultdisabled
iconstyleforabutton.
Styleappliedtoa
buttonwhenonlyan
imageisspecified(no
text).
Indicatesthatthe
labelisnotlocatedin
thestructurefora
givenpagefieldwithin
agrid.
Specialstyleapplied
toindicatethata
groupboxisoftype
29
Style

May 2015
Used
With
Context
Category
SubCategory
psc_link
Grids
Flex
psc_maxdocheight
Modal
Attachment
psc_modalbutton
Modal
psc_modalcancel
Modal
psc_modalclose
Modal
psc_modaldone
Modal
psc_modalfullscreen
Modal
psc_modalpagetitle
Modal
psc_modeaccess
Page
Accessibility
psc_modehc
Page
Accessibility
30
Description
Layout.
Indicatesthata
hyperlinkcontrolis
containedwithinthe
columnofanormal
Flexgrid.
Stylingofattachment
viewerforiOS.
Styleindicatingthata
buttonshouldbe
styledlikeamodal
headerbutton,which
isaslightlysmaller
thanaconventional
button.
IdentifiestheCANCEL
buttonofamodal.
IdentifiestheCLOSE
buttonofamodal(the
"X"button).Notethat
theimageisnot
suppliedinthestyle.
IdentifiestheDONE
buttonforamodal.
Styleappliedwhena
modalis
programmaticallyset
tobeafullpage
modal.
Styleappliedtothe
headertitlefoundina
modal(similarto
ps_pagetitlebutona
modal).
Classappliedtoan
HTMLtagtoallow
specialstylingin
accessibilitymode.
Classappliedtoan
HTMLtagtoallow
specialstylingwhen
runninginOShigh
contrastmode.
Style

May 2015
Used
With
Context
Category
SubCategory
psc_more
Grids
psc_norowstext
Modal
Prompt
psc_num
Grids,Edit
All
psc_off
Checkbox
Switch
psc_off_container
Checkbox
Switch
psc_ok
Modal
Message
psc_on
Checkbox
Switch
psc_on_container
Checkbox
Switch
psc_opbetween
Modal
Prompt
psc_open
Banner
Confirmation
psc_openalt
psc_primary
Banner
Pushbutton
Confirmation
Description
Gridrowindicatorof
tapability.
Styleappliedtoa
promptpagegroup
box,whichappears
whennorowsexist.
Textisrenderedasa
headerofagroupbox
butdisplaysasnormal
text.Onlyusedfor
promptpage.
Styleappliedto
indicatethatdatatype
forthefield(or
column)isanumeric
type.
Stateindicatorthat
thecheckboxSWITCH
isoff.
ContaineroftheOFF
sectionofacheckbox
SWITCH.
OKbuttonona
MessageBoxPopup.
Stateindicatorthat
thecheckboxSWITCH
ison.
ContaineroftheON
sectionofacheckbox
SWITCH.
Styleindicatingthata
specialpromptcontrol
operatorhasbeenset
toBETWEEN.
Usedto
display/animatethe
confirmationarea
foundintheheader.
Usedto
display/animatethe
confirmationarea
foundintheheader.
Visuallyindicatesthat
31
Style

May 2015
Used
With
Context
Category
SubCategory
psc_processing
Page
psc_rowact
Grids,
Groupboxes
Trigger
psc_rowcount
Grids
All
psc_rownum
Grids
All
psc_saved
Page
psc_selected
Controls
psc_showBP1
Banner
psc_showBP2
Banner
32
Description
abuttonisprimary.
Structuretodisplay
theprocessingimage
duringservertrips.
StyleappliedtoaGrid
roworgroupbox
whenthedeveloper
hasenabledthe
"ExecutePCon
Group/RowClick"for
ahyperlink/buttonto
enableactionsonthe
entirerow/groupbox.
Texttypeofrendered
controlwhichdisplays
thenumberofrowsin
agrid.
Styleappliedtothe
gridrownumber
renderedby
PeopleToolsinagrid.
Structurecontaining
thesaveconfirmation
text(notcurrently
displayedinFluid).
Styleappliedwhena
"row"oracontrol
displayedasanitemis
selected.Forexample,
setbyPeopleToolson
agridrowwhenthe
userhasselecteda
gridrowcheckboxto
selecttherow.
Oppositeofpsc_hide
BP1.Showsbanner
itemsinActionsList
whenbelow
breakpoint900px.
Oppositeofpsc_hide
BP2.Showsbanner
itemsinActionsList
whenbelow
Style

May 2015
Used
With
Context
Category
SubCategory
psc_showBP3
Banner
psc_showBP4
Banner
psc_sort
Grids
Sort
psc_sortascend
Grids
Sort
psc_sortdescend
Grids
Sort
psc_sortenabled
Grids
Sort
psc_tab_always
Grids
Flex
psc_tab_column
Grids
Flex
psc_time
Grids
All
Description
breakpoint800px.
Oppositeofpsc_hide
BP3.Showsbanner
itemsinActionsList
whenbelow
breakpoint680px.
Oppositeofpsc_hide
BP4.Showsitemsin
ActionsListwhen
belowbreakpoint
580px.
Styleappliedtothe
interioroftheGrid
Sortpopupcontent
(thelistofcolumns).
Indicatesthattheuser
hasselectedtosorta
gridbythiscolumn
(ascending).
Indicatesthattheuser
hasselectedtosorta
gridbythiscolumn
(descending).
Indicatesthata
columnisavailableto
beusedforsorting
buttheuserhasnot
selectedthatcolumn
yet.
Styleappliedwhich
indicatesacolumnis
FROZEN.Always
shownregardlessof
thetabselected.
AssociatedattheCELL
levelidentifyingacell
asacolumnassigned
toatab.
Styleongrid
column/cellsto
identifythatatimeis
containedinthe
column/Field.
33
Style

May 2015
Used
With
Context
Category
SubCategory
psc_trigger
Grids,
Groupboxes
Trigger
psc_wrappable
Controls
Disabled
pscheckbox
Checkbox
psdropdown
Dropdown
psedit
EditBox
psfileList
Modal
Attachment
psfilesList
Modal
Attachment
pshr
Layout
pshtmlarea
HTML
psiconwrapper
EditBox
34
Description
Triggerfieldwhen
psc_rowactisapplied
toshowwhich
column/fieldistobe
usedasthetrigger
fieldforthe
row/groupboxaction
tobeexecutedwhen
therow/groupboxis
activated.
Styleaddedby
PeopleToolswhenthe
wrappingflagissetfor
disabledlongeditand
editfields(displayed
astext).
ActualHTMLcheckbox
control
(input[type="checkbo
x"]).
ActualHTMLselect
control.Selectwith
optionchildren.
ActualHTML
input[type=?]control
forEditboxes.The
actualtypemayvary
basedontheHMTL
typeselectedinIDE.
Attachmentdialoglist
offiles.
Containerforthe
attachmentdialoglist
offiles.
ActualHTMLHR
control(horizontal
rule).
Actualcontainerfor
anHTMLAreacontrol.
Containerappliedto
iconsfoundwithin
editboxes,suchas
dateandprompt
Style
psimg

May 2015
Used
With
Many
Places**
*
Context
Category
SubCategory
Image
psinputfile
Modal
pslabel
Label
pslink
Hyperlink
pslinkwrapper
Hyperlink
pslongedit
LongEdit
psmheadersection1
Modal
psradio
RadioButton
pssearchcurrentop
Modal
Prompt
pssearchjoin
Modal
Prompt
pssearchopshow
Modal
Prompt
Attachment
Page
Description
icons,forexample.
ActualHTMLImage
tagusedin
pushbuttons,
hyperlinks,andimage
controls.
Containerforthe
inputfileandbuttons
intheattachment
dialog.
Actuallabelformost
controls.
ActualhyperlinkHTML
control.
Parentwrapper
aroundtheactual
hyperlinkHTML
control.
Actuallongeditor
textareaHTML
control.
Modalheaderleft
sectionwherethe
Negativedismissal
(CANCELbutton)is
found.
Actualradiobutton
HTMLcontrol.
CurrentSearch
operatorreadonly
textfoundonlyin
specialpromptpage
criteriafields.Not
availableoutside
promptpage.
Specialtextfound
betweentheprompt
inputfieldswhen
BETWEENisused.Not
availableoutside
promptpage.
Qualifierstyleonthe
Hide/ShowOperators
35
Style

May 2015
Used
With
psstaticimg
pstext
Context
Category
SubCategory
StaticImage
Many
Places**
*
Text
PTCALHEAD
Calendar
ptgridmultiselect
Grids
All
ptgridrowadd
Grids
All
ptgridrowdelete
Grids
All
ptgridrownumber
ptgridsingleselect
Grids
Grids
All
All
36
Description
linksontheprompt
pagewhichindicates
thatweareinSHOW
MODEtodisplaythe
searchoperators.
ActualimageHTML
forastaticimage.This
differsfromother
typesofimagetags,
whicharetypically
styledaspsimg.
Usedinmany
constructstocontain
texttobedisplayed.
Forexample,headers,
buttons[image+text],
hyperlinks
[image+text],static
text.
PeopleToolsCalendar
PickerHeader.
Identifiesthe
column/cell
containingthe
PeopleTool'scheckbox
allowingmultirow
selections.
Identifiesthe
column/cell
containingthe
PeopleTool'srowlevel
addbutton.
Identifiesthe
column/cell
containingthe
PeopleTool'srowlevel
deletebutton.
Identifiesthe
column/cell
containingthe
PeopleTool'srow
number.
Identifiesthe
Style
pts_addbtn
pts_addmode
pts_bulkramode
pts_bulkrelactions
pts_facet
pts_facet_checkbox
pts_fltr
pts_fltr_no_fltr
pts_fltr_no_noop
pts_fltr_noop
pts_gblsearchmode
pts_gsearch_cont
pts_gsearch_go
pts_gsearch_tray
pts_gsearch_tray_item
pts_include_hist
pts_keyvalues
pts_keyword
pts_listbulkramode
pts_listnobulkramode
pts_listnoramode
pts_listramode
pts_nobulkramode
pts_noramode
pts_noxlat
pts_ramode
pts_searchbtn
pts_searchmode
pts_srchcriteria
pts_srchcriteriafilters_nodtpromp
t
pts_srchcriteriafilters_nononpro
mpt
pts_srchcriteriafilters_noprompt

May 2015
Used
With
Context
Category
SubCategory
Description
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
column/cell
containingthe
PeopleTool'scheckbox
allowingsinglerow
selections.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
Search
SearchStyling.
Search
Search
SearchStyling.
SearchStyling.
37
Style

May 2015
Used
With
Context
Category
SubCategory
pts_srchcriteriafilters_nopromptn
oedit
pts_srchcriteriafilters_noxlat
pts_srchcriteriafilters_noyesno
pts_srchfltrdtpmt
pts_srchfltrnopmt
pts_srchfltrpmt
pts_srchfltrpmtnoedit
pts_srchfltrxlat
pts_srchfltryesno
pts_srchrslts_gridmixedtypes
pts_srchrslts_list
pts_srchtype
pts_transparent_label
pts_xlat
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
rsz_h1
HomePage
Tile
rsz_h2
HomePage
Tile
rsz_w1
HomePage
Tile
rsz_w2
HomePage
Tile
safari
Browser
sbar
Scrollbar
sbar_h
Scrollbar
sbar_v
Scrollbar
side
N/A
38
Description
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
SearchStyling.
TileStyling(height)for
Tilesonahomepage.
TileStyling(height)for
Tilesonahomepage.
TileStyling(width)for
Tilesonahomepage.
TileStyling(width)for
Tilesonahomepage.
StyleAppliedonHTML
browserhasbeen
identifiedasSafari.
Genericstylefor
PeopleTools
implementedscroll
bar.
Styleusedfor
PeopleTools
implemented
horizontalscrollbar.
Styleusedfor
PeopleTools
implementedvertical
scrollbar.
Sidestylingforthe
searchpage.
Style

May 2015
Used
With
Context
Category
SubCategory
tab_0
Grids
Flex
tab_1
Grids
Flex
tab_2
Grids
Flex
tab_3
Grids
Flex
tab_4
Grids
Flex
tab_5
tab_6
Grids
Grids
Flex
Flex
Description
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
39
Style

May 2015
Used
With
Context
Category
SubCategory
tab_7
Grids
Flex
tab_8
Grids
Flex
tab_9
Grids
Flex
tab_a
Grids
Flex
win
OS
40
Description
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
Statestyleappliedon
atabbedgridto
indicatewhichtabhas
beenselectedand
whichtabafieldis
associated(usedin
twoplaces).
StyleappliedonHTML
device'sOSis
Windows.

May 2015
Fluid Application Content CSS Styles

The styles in this table can be used to style content provided by PeopleSoft fluid applications and custom
applications.
Used
With
Style
Context
Category
SubCategory
ps_apps_content
Layout
Page
ps_apps_pageheader
AppsBanner
ps_button_backnav
Pushbutton
Banner
ps_collecti
on
ps_button_bar
ButtonBar
ps_button_stdheader
ps_collection
Pushbutton
Banner
Layout
Collections
Description
Styleappliedtothe
outermostgroupboxofa
primaryorsecondarypage.
UsestheCSSFLEXmodelfor
sizingandhasscrollingand
paddingautomatically
applied.
Outermoststyleforagroup
boxtobeusedasan
applicationheader
(persistentarea).Thisis
typicallyreparentedtothe
CustomerHeaderBottom
sectionexceptonsmallform
factorwhereitwouldbe
useddirectlywithinthebody
(suppressthereparenting
groupboxONLYonsmall
formfactor).
Styleappliedtorenderthe
backbuttoninthebanner.
Onlyuseifyouarecreatinga
custombuttoninthebanner
toREPLACEthesystem'sback
button.
Groupboxstylewhich
containsradiobuttonstobe
displayedasamutually
exclusiveselector(notas
standardradiobuttons).
Textbuttonfoundinthe
header(asopposedtoimage
buttonswhicharestyledas
ps_header_button).Useonly
whencreatingcustom
buttonsinthebanner.
Acollectionofbuttons,radio
buttons,orlinksthathave
41

May 2015
Used
With
Style
ps_gridnorowborder
ps_header_button
Context
Category
SubCategory
Grid
Flex
Pushbutton
Banner
simplisticlayout.Additional
qualifierscanbeaddedfor
additionalstyling.
Prohibitsrenderingthe
borderbetweenrowsofa
FLEXgrid.
Pushbuttonstyleforimage
onlybannerbuttons.
Marksalllabelstructures
foundwithinthecontaineras
invisible.Spaceisstill
reserved.
Marksalllabelstructures
foundwithinthecontaineras
visible(actuallythedefault).
ps_labelhide
ps_labelshow
ps_menucontainer
Label
Label
Menu
ps_menitem
ps_menusection
Menu
ActionMenu+
Actionsheet
Menu
ActionMenu
Menu
??
ps_menutypegrid
ps_proc_pageheader
psc_aligncenter
42
OutermostListcontainingall
theindividualmenusections.
ActionMenu
AppsBanner
Layout
Description
ListItemstyleappliedinthe
ActionsListoractionsheet
stylescontainingasingle
hyperlinktrigger.
Collectionofps_menuitem
entries(sublisttypicallywith
role="presentation")forthe
differentsectionsofthe
ActionsList(application
custom,search,andsystem
sections).
Rarelyusedstyletodisplaya
SIMPLEgridoflinkssimilarto
amenustyle.Seesee
psc_listlinkmenuforamore
completestyling.
Similarto
ps_apps_pageheaderbutis
usedtodisplayaPROCESS
fixedheaderatthetopofa
page.Itisrecommendedto
useps_apps_pageheader
instead.
Centerscontent.Special

May 2015
Used
With
Style
Context
Category
SubCategory
usagewhenyouhaveblock
buttonssothatthetextand
imageportionsofthebutton
arecentered.
Usedtoimposenosizelimit.
Ifappliedtoanimage
hyperlinkorbutton,the
imagewithinisrendered
withitsdefaultsize.
Disablesanybackground
imageandsetsthe
backgroundcolorto
transparent.
psc_auto_size
psc_background
transparent
psc_badgehide
Layout
Visual
psc_badge
imageOR
psc_badge
text
Pushbutton
Badge
Pushbutton
Badge
Pushbutton
Badge
Layout
Collections
Layout
Collections
psc_badgeimage
psc_badgetext
ps_collecti
on.ps_butt
on_bar
psc_baritemfirst
ps_collecti
on.ps_butt
on_bar
psc_baritemlast
psc_block
Layout
Description
UsedtohidetheBADGE
portionofabuttonenabled
forbadgedisplay.
Usedonapushbuttonto
displayabadgewhenthe
badgeistheIMAGEofa
Text+Imagebutton(likea
warningiconbadge).
Usedonapushbuttonto
displayabadgewhenthe
badgeistheTEXTofa
Text+imageButton(likea
badgecount).
Usedtoidentifythefirst
visibleitemofabuttonbar
collectionforstylingwhen
someelementsarebeing
hidden.
Usedtoidentifythelast
visibleitemofabuttonbar
collectionforstylingwhen
someelementsarebeing
hidden.
Onasimplecontainer,itsets
thedisplaytoBLOCKand
centerstheitems.Ona
buttonorhyperlinkcontrol,it
setsallelementsofthe
43

May 2015
Used
With
Style
psc_body_backgroun
d
Context
Category
SubCategory
Visual
psc_bold
Visual
psc_border
Visual
ScrollAreaRow
psc_bordert
psc_border
bottomonly
Visual
psc_border
standard
Visual
Any
Visual
Groupbox
psc_bordercontent
44
Description
button/linkstructureto
block.Inthiscase,linksare
leftjustifiedandbuttonsare
centered.Ifthereistextand
animageinvolved,theimage
andthetextareondifferent
"lines,"eachbeingblockon
theirown.Thisallowsa
buttonwithanimageontop
(thelabelcomesafterthe
image)andthetext
underneath.
Setsthebackgroundand
foregroundcolortothesame
asthebody'sbackground
colorandthedefaultfont
color.
Setsthefontweighttobold.
Thismaynothaveaneffect
dependingonthecontrol
usedandstylingasitmaybe
overridenbyotherstyles.
Setstheborderofa
container,simplistically.The
psc_borderstandardismore
recommended.Whenusedin
thecontextofascrollarea,
eachrowwillhaveaborder
aroundit.
Setsthetopborder.Itis
recommendedtouse
psc_borderstandardand
psc_bordertoponly.
Disablesallotherborders
otherthanthebottomand
setsthebottomborderto
1px.
Onasimplegroupbox,it
disablesthebottomborder
andmarginofthegroupbox
headerandplacesaborder
aroundtheCONTENT.

May 2015
Used
With
Style
Context
Category
SubCategory
psc_borderheader
psc_border
headernone
psc_borderleftonly
psc_border
standard
Visual
Groupbox
Visual
Groupbox
Visual
Any
Visual
Any
Visual
Any
Visual
Any
psc_bordernone
psc_borderrightonly
psc_borderstandard
psc_borderthicker
psc_bordertoponly
psc_border
transparent
psc_border
standard
psc_border
standard
psc_border
standard
Visual
Any
Visual
Any
Visual
Any
psc_border
standard
psc_button
minwidth20em
Pushbutton
psc_buttonnext
Pushbutton
Directional
Pushbutton
Directional
psc_buttonprevious
Description
placesabottomborder
undertheheader(the
default).
turnsoffthebottomborder
undertheheader.
Disablesallbordersexcept
theleftandsetstheleft
borderto1px.
Disablesallbordersona
container(directcontainer
onlydoesnotpropagateto
children).
Disablesallbordersexcept
therightandsetstheright
borderto1px.
Setsadefaultborderona
container.
Setstheborderwidthto2px
insteadof1px.
Disablesallotherborders
otherthanthetopandsets
thetopborderto1px.
Setsthebordertobe
transparentbutstill
consumesspace.Theborder
isstill1pxinsize.
Uniquestyletoseta
minimumwidthofabutton
tobe20em.Alignmentwill
bethedefaultsoyoumay
needtousepsc_aligncenter
orpsc_haligncenter.
Styletobeappliedtoa
button,whichwillbeaNEXT
button.Imageincludedin
styling.
Styletobeappliedtoa
button,whichwillbea
PREVIOUSbutton.Image
includedinstyling.
45

May 2015
Used
With
Style
Context
Category
SubCategory
psc_buttonsimple
psc_clipcontent
psc_clipoverflow
Pushbutton
Layout
Layout
psc_colon
Label
psc_column2
Layout
psc_column3
Layout
psc_columnitem1of2
psc_columnitem
1of2fixed
Layout
Layout
psc_columnitem1of3
Layout
psc_columnitem2of2
46
Layout
Groupbox
Description
UsedtomakeaTEXTbased
buttontodisplaylikean
imageonlybutton.Typical
usageareforbuttonswithin
agrid,buttonsintheheader
barofagrid,andbuttonsin
theBODYofamodal.
Onasimplegroupbox,
disablesscrollingonthe
contentarea(thedefault).
Setsoverflowattributeto
hidden(noscrolling).
Usedonapagefieldelement,
whichhasaps_boxlabel
structuretoaddaCOLON(:)
afterthelabel.
Setsupbasiccontainerfora
twocolumncontainer,
havingpsc_columnitems*as
children.
Setsupbasiccontainerfora
threecolumncontainer,
havingpsc_columnitems*as
children.
Setsupanitemthatfloats
leftofsize1of2(or50%).
Convertstoblockmode(no
float/autowidth)when
windowfallsbelow767px.
Neverconvertsalways50%.

May 2015
Used
With
Style
Context
Category
SubCategory
psc_columnitem2of3
psc_columnitem
3of10
Layout
Layout
psc_columnitem3of3
psc_columnitem
7of10
Layout
Layout
psc_columnitemauto
Layout
psc_confirmation
area
psc_confirmation
msg
Confirmation
Groupbox
Confirmation
LongEdit/Edit
(disabledastext)
Layout
Groupbox
Layout
Edit/LongEdit/Dr
opdown
psc_containersmall
psc_controlfullwidth
Description
Setsupanitemthatfloat's
leftwithnospecificwidth
requirement.Widthis
whateversizeisnecessaryto
render.
UsedtocreateanINLINE
confirmationmessage,where
theconformationareaispart
ofthepage.Thisstyleisset
ontheLayoutGroupbox
containerofthearea.
Setonthelongeditoredit
box(disabledarerenderedas
textandwrappable)withina
confirmationareatodisplay
aconfirmationmessage.
Styleappliedonacontainer
toallowtheelementsstyled
withinhavingpsc_fld*toact
asiftheyarebeingrendered
onthesmallformfactor.
Changesthebehavior/sizing
ofthepagefields,whichare
inputbased(eitherdisabled
astextorhavingactualinput
typeHTMLtags)toconsume
47

May 2015
Used
With
Style
Context
Category
SubCategory
psc_controlheight{1
20}em
Layout
psc_controlheight{1
100}pct
Layout
psc_controlheight{1
100}px
psc_control
heightauto
psc_controlwidth{1
100}em
48
Layout
Layout
Layout
Edit/LongEdit/Dr
opdown
Description
theentirewidthofthe
container.Changesthe
displaytoblockandwidthof
100%.Thisstyledoesnot
haveanyimpactonthe
associatedlabel(uselabel
stylingtoadjustthelabel
typicallypsc_labeltop).
Setstheheightoftheactual
HTMLcontrolforEdit,
LongEdit,anddropdownas
wellasthereadonly(text
[anycontrol]andhyperlink)
versionsofthesecontrols.
Valuesrangefrom1emto
20eminincrementsof1em.
HTMLcontrolforEdit,
HTMLcontrolforEdit,
Setstheheightofapagefield
tohaveanautomaticheight.
UsedtoremoveanyDEFAULT
heightsappliedinsimplistic
styling.
Setsthewidthoftheactual
HTMLcontrolforEdit,

May 2015
Used
With
Style
Context
Category
SubCategory
psc_controlwidth{1
100}pct
Layout
psc_controlwidth{1
100}px
psc_control
widthauto
Layout
Layout
psc_dataimage
AppsBanner
Edit/LongEdit/Dr
opdown
Description
HTMLcontrolfor
Edit,LongEdit,anddropdown
aswellasthereadonly(text
HTMLcontrolforEdit,
Setthewidthofapagefield
tohaveanautomaticwidth.
UsedtoremoveanyDEFAULT
widthsappliedinsimplistic
styling.
Imagetobedisplayedin
persistentappsheader.It
shouldbethefirst
displayableitemasitwillbe
floatedleftsothatother
elementscanfloataroundit.
Becausethiselementis
floated,itisrecommended
thattheimage,primarydata,
andsecondarydatabe
containedinalayoutgroup
boxwithastylepsc_float
clearoverflowsothatthe
applicationheaderwill
containalloftheFLOATED
elements.Hasnoeffectif
notfoundwithin
ps_apps_pageheaderor
49

May 2015
Used
With
Style
Context
Category
SubCategory
ps_proc_pageheaderatsome
level.
Primarytextdataelement
foundintheapplication
persistentheader.Hasno
effectifnotfoundwithin
level.
Nonprimarytextdata
elementfoundinthe
applicationpersistent
header.Hasnoeffectifnot
foundwithin
level.
psc_dataprimary
AppsBanner
psc_datasecondary
psc_directionrow
psc_disabled
normaltext
psc_displayblock
psc_displayinline
psc_display
inlineblock
AppsBanner
psc_page
container
orother
FLEXstyled
containers Layout
Visual
Layout
Layout
Hyperlinks
Any
Any
Layout
Any
Visual
Edit/LongEdit/Dr
opdown
Layout
Collections/Butto
nBar
psc_displayonlyastext
_adjust
psc_distribute
50
ps_collecti
on
Description
UsedonaFLEXbased
containertoindicatethatthe
flexdirectionisHORIZONTAL
(columnisvertical).
Styleappliedonhyperlinks
fordisabledhyperlinkstobe
renderedasNORMALTEXT,
notasadisabledlink.
AppliesdisplayofBLOCK.
AppliesdisplayofINLINE.
AppliesdisplayofINLINE
BLOCK.
Styleappliedwhenyouhave
displayonlyinformation(as
text)inatwocolumnlayout
besideaneditablefield.This
styleadjuststheheightso
thatitmorecloselymatches
theheightofaneditable
pagefieldelement.
UsesCSSFlextodistribute
theitemsinasequala
fashionaspossiblewithinthe

May 2015
Used
With
Style
Context
Category
SubCategory
Description
collection.
psc_editadjustforlink
Layout
Editdisabled
renderinga
hyperlink
psc_embedded_tabs
DoNotUse
psc_fieldset
hidereadable
Layout
psc_label_f
iller
Layout
psc_fldaligned
psc_fldautolabel
Layout
Accessibility
Thisisaspecialadjustment
styletoadjustadisablededit
fieldrenderingahyperlink
(likeanemailorURLtypeof
editbox)toalignbetterwith
otherlinksfoundina
collection.Italsohasdisplay
ofinlineblocklike
conventionalhyperlinks.
Outercontainerfor
embeddedtabstobe
renderedbyapplications.
Whilethestylingwillworkto
createatabLOOK,keyboard
navigationisnotavailablefor
propertabsoutsideofthe
thepage/gridtabssupplied
byPeopleToolsTherefore,it
isnotrecommendedtouse
thisstyle.
Stylesafieldsetasabasic
containerwithnodisplayable
text,butthelegendis
displayedoffscreensothatit
isalwaysavailabletothe
screenreader.
Styleappliedtoagroupbox
styledwithpsc_label_filler
whichcausesthevisualsto
changeonlyonasmallform
factor(orwithina
psc_containersmall
container).Removesall
horizontalpaddingforthe
labelfillersincelabelswillbe
appearingontop.Consumes
theentirewidthofthe
container.
Styleappliedtoapagefield
element(not
51

May 2015
Used
With
Style
Context
Category
psc_fldstandard
psc_flexequal
psc_flexleast
52
Layout
Childrenof
psc_page
container,
psc_distrib
ute
Childrenof
psc_page
container,
psc_distrib
ute
Layout
Layout
SubCategory
Description
hyperlinks/buttons)causing
thevisualstochangeonlyon
asmallformfactor(orwithin
apsc_containersmall
container).Doesnotreserve
spaceforthelabel(typically
33%),butinsteadallowsthe
fieldtobedisplayed
immediatelyafterthelabel
string.
Styleappliedtoapagefield
element(not
hyperlinks/buttons)causing
thevisualstochangeonlyon
asmallformfactor(orwithin
apsc_containersmall
container).Thistypicallyputs
thelabelontopofthefield
andthecontrolisplaced
belowthelabel.Ifthe
controlisatextarea(long
edit),thefieldwillspanthe
entirewidthofthecontainer.
Otherwise,thewidthofthe
controlisnotchanged.You
cannotusepsc_control
fullwidthinconjunctionwith
thisstyle.Ifyouneedthis
typeofbehavior,youwould
needtousepsc_label
top/psc_controlfullwidthbut
removepsc_fldstandard.
UsedonachildofaFLEX
containerwheretheflex
propertyissetto"flex:11
auto".Sameaspsc_flexleast.
UsedonachildofaFLEX
auto".Sameaspsc_flex
equal.

May 2015
Used
With
Style
psc_flexless
psc_flexmore
psc_flexmost
psc_flexnone
Childrenof
psc_page
container,
psc_distrib
ute
Childrenof
psc_page
container,
psc_distrib
ute
Childrenof
psc_page
container,
psc_distrib
ute
Childrenof
psc_page
container,
psc_distrib
ute
Context
Category
Description
Layout
UsedonachildofaFLEX
auto".
Layout
UsedonachildofaFLEX
auto".
Layout
Layout
psc_flexsame
Childrenof
psc_page
container,
psc_distrib
ute
Layout
psc_floatclear
Layout
psc_floatclearleft
Layout
psc_float
clearoverflow
psc_floatleft
psc_floatnone
psc_font
size{025,033,05,06,0
7,075,08,09,095,1,11,
12,13,14,15,16,17,18,
19,2}em
psc_fontsizeinitial
Layout
Layout
Layout
SubCategory
Visual
Visual
UsedonachildofaFLEX
auto".
UsedonachildofaFLEX
auto",meaningthatthischild
isNOTFLEXIBLE(flexwillnot
adjustitssize).
UsedonachildofaFLEX
auto".
Usedtoclearfloatonboth
left/right.
Usedtoclearfloatontheleft
only.
Usedonacontaineroffloats
toclearthefloatingbehavior
bysettingtheoverflowas
hiddenonthecontainer.
Setsitemtofloatleft.
Setsitemtohavenofloat.
Setsthefontsize(025em=
0.25emand11emisactually
1.1emasexamplesofthe
abbreviationswithinthestyle
names).
Setsthefontsizetobe
53

May 2015
Used
With
Style
psc_fontsizeinherit
Context
Category
SubCategory
Visual
psc_forcefloatclear
Layout
psc_forcefloatnone
Layout
psc_forcehidden
Layout
psc_force
marginnone
psc_forcenomargin
Layout
psc_forcenopadding
Layout
psc_force
paddingnone
Layout
Layout
psc_fullsize_button
PushButton
Image
Grid
Flex
psc_gridallowscroll
54
Description
INITIAL.
Setsthefontsizetobe
INHERITED.
Forcesthefloattobecleared
onbothleft/right.Uses
!importanttooverride
"normal"floatstyles.
Forcestheitemtohaveno
float.Uses!importantto
override"normal"float
styles.
Forcesanitemtobenot
displayed(orreadableby
screenreaders)byusing
!importanttooverrideother
displaystyles.
Forcesnomargin.Uses
marginstyles.
Sameaspsc_force
marginnone.
Sameaspsc_force
paddingnone.
Forcesnopadding.Uses
paddingstyles.
Modifiesanimagebuttonto
removetheheight
restrictionsontheimageand
toturnoffall
borders/backgrounds
(transparent).
Canbeusedwhennotusing
PeopleToolsimplemented
scrolling.Maxwidthforgrid
isnolongerset,allowingitto
growbeyondthecontainer
width.Widthissetby
content(nospecificwidth
set)andoverflowisglobally
enabledontheoverallgrid
(includingtheheader),both

May 2015
Used
With
Style
Context
Category
SubCategory
psc_gridallowscrollv
psc_gridborder
Grid
Flex
Grid
Flex
psc_gridborderall
psc_grid
borderbottom
psc_gridbordernone
Grid
Grid
Grid
psc_gridbordersides
Grid
psc_gridbordertop
psc_grid
bordertopbottom
Grid
Grid
psc_gridcellborders
Grid
Flex
Grid
List
psc_gridcollection
Description
horizontallyandvertically.
Canbeusedwhennotusing
PeopleToolsimplemented
scrollingtoperformvertical
scrollingonly.Maxwidthto
fullwidthofthecontainer
andsetsoverflowtoscrollif
necessaryontheentiregrid
(includinggridheader).
Putsaborderaroundthe
TABLEelementoftheFLEX
grid.
Putsaborderaroundthe
ps_boxgridccontainer,
whichcontainstheentire
grid.Foraflexgridthereare
TWOTablestosupportFIXED
headersupport,sobothgrids
areincludedwhenusingthis
bordermechanism.
Putsaborderatthebottom
onlyofthegrid.
Turnsoffbordersonthe
outerpartofthegrid(gridc
container).
Putsbordersontheleftand
rightofthegrid.
Putsaborderonthetopof
thegrid.
Putsbordersonthetopand
bottomofgrid.
SetsbordersontheTABLE,
TH,andTDtagsforaflexgrid
only.
Usedtostyleagridsimilarto
aps_collection.Horizontal
renderingallowing
separatorsbetweenthe
rows.Typicalusageisasingle
elementperrowofthesame
type,suchasalistoflinks,
listofbuttons,andsoon.
55

May 2015
Used
With
Style
Context
Category
SubCategory
psc_grid
countabovebody
psc_grid
countabovebodyflex
Grid
Grid
psc_grid
headernoborder
psc_grid
headertopborder
Flex
Grid
Grid
psc_gridhideinlist
Grid
psc_grid
hidereadableallhead
Grid
Accessibility
Grid
Accessibility
psc_grid
hidereadablecolhead
psc_gridnobody
56
Grid
Description
Movestherowcountofa
gridtobedirectlyabovethe
griditselfratherthanonthe
samelineastheGridTitle.
Typicallyusedwhenyou
don'twantaborderaround
thegridheaderbar(psc_grid
headernoborder)butstill
havecontentintheheader
bar.Forexample,aprompt
page.
Sameaspsc_grid
countabovebodybutonly
appliestoFLEXversionofa
grid.
Usedtoturnofftheborder
surroundingagrid'sheader
bar.
Usedtoturnofftheleft/right
bordersonagrid'sheader
bar.
Usedonapagefieldwithina
gridwhenyoutoggle
betweengridtypes.Thisstyle
hidesthepagefieldwhenin
aLISTgrid.
Rendersthegridcolumn
headerstructure(THEAD
structureofaTABLEofaFlex
grid)offscreensothatitis
availabletothescreen
reader.Thishappensinall
modesnotjustaccessibility
mode.
Renderstheindividual
columnheadersoffscreen
withtheexceptionofthe
select/deselectallcheckbox
withinaFlexgrid'scolumn
headerstructure.
Hidestheps_gridbody(the
contentnottheheaders)ofa

May 2015
Used
With
Style
Context
Category
SubCategory
psc_grid
nocolheaders
psc_grid
nocustomheader
psc_grid
nocustompad
psc_grid
noheaderbar
psc_grid
noinnergroup
psc_gridnorowcount
Grid
Flex
Grid
Grid
Grid
Grid
Grid
psc_gridnorows
Groupbox
EmptyGrid
Pattern
Grid
EmptyGrid
Pattern
psc_gridnorowstext
psc_grid
nosideborder
psc_grid
nosystemheader
psc_gridnotitle
Grid
Grid
Grid
Description
grid.
Hidesthegridcolumnheader
structure,exceptin
accessibilitymodewhereit
willberenderedoffscreen
likepsc_grid
hidereadableallhead.
Hidesthecustomsectionofa
grid'sheaderbar.
Removesthedefaultpadding
ofthecustomsectionofa
grid'sheaderbar.
Hidesagrid'sheaderbar.
HidesallGROUPBOX
HEADERScontainedwithina
gridcell,regardlessofgrid
displaytype.
Hidesthetotalrowcount
typicallydisplayedabovethe
grid.
Styleappliedtoagroupbox,
whichwilldisplaytheempty
gridpattern.Groupboxtitle
isthesameasthegrid's
headerandnorowstextwith
optionaladdbutton.
Styleappliedtoadisabled(as
text)editorlongeditpage
controlORstatictextcontrol.
UsedtodisplaytheNOROWS
FOUNDtextforagrid.
Typicallyusedwithin
psc_gridnorowsstyled
container.
Sameaspsc_grid
headernoborder.
Hidesthesystem
(PeopleToolsowned)section
ofagrid'sheaderbar.
Hidesthegrid'sheader
(actuallyaH#tag)butis
57

May 2015
Used
With
Style
Context
Category
SubCategory
psc_gridnotitlearea
Grid
psc_gridwidthauto
Grid
Flex
Grid
List
Grid
List
Grid
List
Grid
List
Grid
List
Grid
List
Grid
List
Grid
List
psc_gridlistautolabel
psc_gridlistborderall
psc_gridlist
borderbottom
psc_gridlist
bordernone
psc_gridlist
bordersides
psc_gridlist
bordertop
psc_gridlist
bordertopbottom
psc_gridliststandard
58
Description
renderedoffscreenwhen
runninginaccessibilitymode.
Simlartopsc_gridnotitle,
butithidestheentiretitle
area.Thisincludesnotonly
theHEADERforthegridbut
alsotherowcount.Thisis
renderedoffscreenin
accessibilitymodesoitwill
bereadable.
Removestheminimumwidth
foraFlexgrid.Thedefaultfor
aFlexgridisaminimum
widthof100%ofits
container.
StyleappliedtoaLISTgrid
(nottoindividualfields)
wherethefieldlabelsdonot
havereservedspace(default
is33%).Typicallyusedfor
displayonlyastextpage
elements.
Similartopsc_gridborderall
butonlyappliestoLISTgrids.
Similartopsc_grid
borderbottombutonly
appliestoLISTgrids.
Similartopsc_grid
bordernonebutonlyapplies
toLISTgrids.
Similartopsc_grid
bordersidesbutonlyapplies
toLISTgrids.
Similartopsc_gridbordertop
butonlyappliestoLISTgrids.
Similartopsc_grid
bordertopbottombutonly
appliestoLISTgrids.
StyleappliedtoaLISTgrid
(nottoindividualfields),
wherethefieldlabelshave
thestandardreservedspace

May 2015
Used
With
Style
psc_gridrowsep
breadcrumb
Context
Category
SubCategory
psc_grid
collection
Grid
List
Grid
List
ButtonBar
ViewSelector
ButtonBar
ViewSelector
ButtonBar
ViewSelector
ButtonBar
ViewSelector
TwoPanel
Selector
Groupbox
psc_grid
collection
psc_gridrowseppipe
psc_gridviewgrid
psc_gridviewitem
psc_gridviewlist
ps_collecti
on.ps_butt
on_bar
psc_gridviewtoggle
psc_groupspecial
Description
(defaultis33%).Typically
usedfordisplayonlyastext
pageelements.
Inalistgridstyleasa
collection,separateseach
rowwitha">"for
breadcrumbrendering.
Inlistgridstyleasa
collection,separateseach
rowwithaPIPESYMBOL(or
"|")forsimplelink
separation.
Childofpsc_gridviewtoggle
containerusedtotoggleto
GRIDviewofagrid.This
shouldbearadiobutton
pagefield.
containerusedtoadd
anotherpossibleviewmode
otherthanList/Gridviews.
Thisshouldbearadiobutton
pagefield.
containerusedtotoggleto
LISTviewofagrid.This
shouldbearadiobutton
pagefield.
SpecialButtonBarcollection
usuallyaddedtoagridinits
headerbartotoggle
betweenGRIDandLIST
views.Typicallyyouwould
alsoaddpsc_display
inlineblockaswellsince
therearetypicallyother
controlsalsofoundinthe
gridheader.Seeanexample
onthePromptPage.
Specialstyledesignedfor
placementintheNavigation
Panelofatwopanellayout
59

May 2015
Used
With
Style
psc_groupbox
noheader
psc_groupboxnotitle
ps_collecti
on.ps_butt
on_bar
(and
typically
psc_distrib
ute)
psc_grouped
Context
Category
SubCategory
containingaspecialcontrol
field(likeadropdown)that
drivesthecontentoftheleft
panelinterior.Thisareahas
thesamecolorasthe
SELECTEDiteminapanel,as
inthelabelcolorisdarkened
andaborderisaddedaround
thecontainer.Canbeapplied
onafieldoragroupbox
containingafield.Thisstyle
israrelyused.
Hidesagroupbox'sheader
structure,butrendersitoff
screeninaccessibilitymode.
Sameaspsc_groupbox
noheader.
Visual
Visual
ButtonBar
Collections
ButtonBar
Collections
ps_collecti
on.ps_butt
on_bar
(and
typically
psc_distrib
ute)
psc_grouped_fitted
psc_groupheader
adjust
psc_haligncenter
psc_halignleft
60
Visual
Layout
Layout
Description
Turnsofftherounded
bordersofthebuttonbar.
Usuallyusedinconjunction
withpsc_distributedto
consumethefullwidthofthe
container.
Similartopsc_groupedfitted
butthetopandsideborders
aredisabled.Thisstyleofbar
istypicallyusedatthetopof
acontainerthatalreadyhas
sometypeofborderor
whereaborderatthetop
andsideswouldnotbe
needed,likeatthetopofa
pageorpanelcontent.
Adjustelementswithinthis
containertohavethesame
fontsizeasfoundinagrid
headerbarorapplication
header.
Alignthecontentas
centered.
Alignthecontentasleft

May 2015
Used
With
Style
Context
Category
psc_halignright
Layout
psc_hascount
psc_list
linkmenu
ListView
psc_haslink
psc_list
linkmenu
ListView
psc_haslivedata
psc_haslivedata1
psc_haslivedata
count
psc_haslivedata
countnone
SubCategory
Tile
Tile
Tile
Tile
psc_haslivedatanone
Tile
psc_header
hidereadable
psc_header
innerfloat
psc_headernone
Visual
DoNotUse
Visual
Accessibility
Description
justified.
Alignthecontentasright
justified.
Usedtoindicatethatafield
ontheLISTVIEWrowisused
asabadgecount.Thefieldis
styledwithastyleof
psc_list_count.
Showsanactionable
indicatorontherow
(CHEVRON),exceptiftherow
alsohasacount(asin,
psc_hascountstyleis
applied).
Styletoindicatethatthe
groupboxcontains/showsa
livedatasection.
Styletoindicatethatlive
dataexists.
groupboxcontains/showsa
tilecount.
groupboxdoesnot
contain/showatilecount.
groupboxdoesnot
contain/showalivedata
section.
Renderstheheaderofa
groupboxoffscreensoitis
notvisible(anddoesnot
consumespace)butis
readablebyascreenreader
(inanymode).
Foragroupboxheader,turns
offtheborder(psc_border
headernone)withno
backgroundimageanda
transparentbackground.
Donotdisplaythegroupbox
header.ItisNOTreadablein
61

May 2015
Used
With
Style
psc_header
nospacing
psc_height
{1,100}em
psc_height
{1,100}pct
Context
Category
SubCategory
Visual
Layout
Any
Layout
Any
Layout
Any
Layout
Any
psc_height{1,100}px
psc_heightauto
psc_hidden
psc_hideimage
Visual
Pushbutton/Hyp
erlink
psc_hidepagetabs
Visual
psc_reldisp
container
psc_hidereldispunits
62
RelatedDisplay
Description
accessibilitymode.
Onagroupbox,removesany
textindentionormargin
fromtheheader.
Setstheheightofa
container/entity.Values
rangefrom1emto100emin
incrementsof1em.
Setstheheightofa
rangefrom1%to100%in
incrementsof1%.
Setstheheightofa
rangefrom1pxto100pxin
incrementsof1px.
Setstheheightofa
container/entityto"auto,"
whichallowsthecontent(or
someotherstyling)todrive
theheightoftheitem.
Hidessomethingfrombeing
displayed.SetsCSSdisplayto
none.Contentwillnotbe
availableinaccessibility
mode.
Typicallyusedonan
Image+Textbuttonor
hyperlinktohidetheIMAGE.
Usedonapagewhichis
renderingpagetabstohide
them.Thisstylemustbe
appliedatthepagelevel
only.
Usedtohidetherelated
displayUNITStextwhenthe
valueisempty.Stylewould
havetobesetbasedonthe
contentsofpsc_reldisp
value.Thisstyleisnot
automaticallyappliedand
mustbeconditionallyapplied

May 2015
Used
With
Style
Context
Category
SubCategory
Description
usingPeopleCode.
psc_reldisp
container
psc_hidereldispvalue
RelatedDisplay
Pushbutton/Hyp
erlink
psc_hidetext
psc_image{115}em
psc_imageheight{1
15}em
psc_image
heightauto
psc_image
maxheight{115}em
psc_image
maxheightauto
psc_image
maxwidth{115}em
psc_image
maxwidthauto
Layout
Image
Layout
Image
Layout
Image
Layout
Image
Layout
Image
Layout
Image
Usedtohidetherelated
displayVALUEwhenthe
valueisempty.Stylewould
havetobesetbasedonthe
contentsofpsc_reldisp
value.Thisstyleisnot
automaticallyappliedand
mustbeconditionallyapplied
usingPeopleCode.
Typicallyusedonan
Image+Textbuttonor
hyperlinktohidetheTEXT.
Beawarethatthiscould
causeaccessibilityissuesas
thetextwillnotbereadable
byscreenreaders.
Setswidthandheightofan
imagetoaspecificemsize,
rangingfrom1emto15em
incrementingby1em.
Setstheheightofanimage.
15emincrementedby1em.
Setstheheightofanimage
tobeautomatic.Usethesize
oftheimageassumingno
otherstylingaffectssizing.
SetstheMAXIMUMheightof
animage.Valuesrangefrom
1emto15emincrementedby
1em.
SetstheMAXIMUMheightof
animagetobeautomatic(no
maximumheight).
SetstheMAXIMUMwidthof
animage.Valuesrangefrom
1emto15emincrementedby
1em.
SetstheMAXIMUMwidthof
animagetobeautomatic(no
63

May 2015
Used
With
Style
psc_image
nomaxheight
Context
Category
SubCategory
Layout
maximumwidth).
Removesthemaximum
heightspecificationforan
imageusedwithinabutton.
Increasesthemaximum
heightslightlytotheimage
withinabutton.Thissetting
isactuallyNOTthemax
heightofastandardbutton
butslightlylargerthanthe
standardsize.Rarelyusedas
italsoaffectsthebasic
footprintofabutton.
Setsthewidthofanimage.
15emincrementedby1em.
Setsthewidthofanimageto
beautomatic.Usethesizeof
theimageassumingnoother
stylingaffectssizing.
SetstheCSSvisibility
propertytohidden.
Usedtosetthejustify
contentCSSpropertyona
FLEXcontainer.Thissetting
justifiestheitemscollected
togetherinthecenterofthe
container.
Usedtosetthejustify
togetherinthe"END"ofthe
container.
Usedtosetthejustify
justifiestheitemsbasedon
anancestor'sjustification
setting.
Layout
Usedtosetthejustify
Layout
Buttonwith
Image
Layout
Buttonwith
Image
Layout
Image
Layout
Image
psc_image
standardbutton
psc_imagewidth{1
15}em
psc_imagewidthauto
psc_invisible
Visual
SimpleCSS
Flex
container
Layout
psc_justifycenter
SimpleCSS
Flex
container
psc_justifyend
Layout
SimpleCSS
Flex
container
psc_justifyinherit
psc_justifyinitial
64
SimpleCSS
Flex
Description

May 2015
Used
With
Style
Context
Category
SubCategory
container
psc_justify
spacearound
SimpleCSS
Flex
container
Layout
SimpleCSS
Flex
container
psc_justify
spacebetween
Layout
SimpleCSS
Flex
container
Layout
psc_justifystart
psc_label
psc_label
haligncenter
psc_labelhalignleft
DoNotUse
Layout
Label
Layout
Label
Layout
Label
Layout
Label
psc_labelhalignright
psc_labelhide
Description
justifiestheitemsasinitially
providedbydefault.
Usedtosetthejustify
justifiestheitemstryingto
distributespacesbetween
andaroundelementsequally.
Usedtosetthejustify
justifiestheitemssothatthe
spacebetweentheitemsis
usedtodistributetheitems.
Thefirstandlastitemsareat
theENDsofthecontainer.
Usedtosetthejustify
togetherinthe"START"of
thecontainer.
Setsthevalueoftheps_box
labelstructuretobeinline
block(thedefault).Styleisno
longerneeded.
Changesthealignmentof
labeltobecenteredwithin
thereservedarea.
labeltobeleftwithinthe
reservedarea.
labeltoberightwithinthe
reservedarea,whichisthe
defaultifthelabelisnoton
top.
Sameaspsc_labelnone.It
completelymakesthelabel
notvisibleanddoesnot
consumespace.Thisaffects
65

May 2015
Used
With
Style
Context
Category
SubCategory
psc_label
hidereadable
Layout
Accessibility
Visual
Label
Layout
Label
Visual
Label
Visual
Label
Visual
Label
Layout
Label
psc_labelinvisible
psc_labelnone
psc_labelnormaltext
psc_labelopacity0
psc_labelopacity1
psc_labeltop
66
Description
layout.
Rendersthelabeloffscreen
sothatitisnotvisible,butit
isalwaysavailableforscreen
reader.Visually,itactslike
psc_labelnoneinthatthe
layoutisaffected.Thelabel
structureisnotdisplayed
visuallysothereisnospace
reservedforthelabel.
Accomplishesthesameas
psc_labelnone,EXCEPTthat
thelabelspaceisRESERVED.
Thelabeltextisjustinvisible.
Warning:inaccessibility
mode,thelabelisNOT
AVAILABLEforthescreen
reader.
Hidestheentirelabel
structuresothatthelabelis
notshown,whichaffectsthe
LAYOUT.Inaccessibility
mode,thelabelwillbe
renderedoffscreensothatit
isavailableforthescreen
reader.
Displaysthelabelaspartofa
pagefieldasnormaltext,
ratherthanalabel.
Effectivelythesameas
psc_labelinvisible,butituses
theopacityCSStohide
versusvisibility.Warning:the
labelwillnotbeavailablefor
thescreenreaderwiththis
style.
Setsopacityofthelabelback
tothetypicaldefaultvalue
(1).Thisdisplaysthelabel.
Styletosetthelabelofa
pagefieldonTOPofthe
control.Thisdoesnotinclude

May 2015
Used
With
Style
Context
Category
SubCategory
psc_label
valignbaseline
Layout
Label
Layout
Label
Layout
Label
Layout
Label
Visual
Label
Layout
Label
Layout
Label
Layout
Label
psc_label
valignbottom
psc_label
valignmiddle
psc_labelvaligntop
psc_labelvisible
psc_labelwidth{1
50}em
psc_labelwidth{1
100}pct
psc_labelwidthauto
Description
buttonsorhyperlinks.This
styledoesnotaffectthe
CONTROLarea,onlythe
label.
Setstheverticalalignmentof
thelabeltobebaseline.In
somecases,thismaynot
haveanaffectifthereare
otherstylesoverriding
labelingaspartofthe
construct.
thelabeltobebottom.This
maynothaveanaffectif
thereareotherstyles
overridinglabelingaspartof
theconstruct.
thelabeltobetop.Thismay
nothaveanaffectifthere
areotherstylesoverriding
labelingaspartofthe
construct.
thelabeltobemiddle.This
maynothaveanaffectif
thereareotherstyles
overridinglabelingaspartof
theconstruct.
Setsthelabelvisibilitytobe
visible.Oppositeof
psc_labelinvisible.
Setsthelabelwidthtoa
specificwidth.Valueranges
from1emto50em
incrementedby1em.
Setsthelabelwidthtoa
specificwidth.Valueranges
from1%to100%
incrementedby1%.
Setsthelabelwidthtobe
computedautomatically
67

May 2015
Used
With
Style
Context
Category
SubCategory
psc_label_filler
Layout
psc_legend
hidereadable
psc_lineheightfull
Layout
Layout
psc_linkdrilldown
Hyperlink
psc_linknormaltext
Hyperlink
psc_linktextsize
psc_link_normalsize
Visual
Visual
psc_list1col
68
psc_list
linkmenu
ListView
Accessibility
Description
basedoncontent.
(orapagefieldelement
havingalabelrenderedto
consumespace)toallocate
thesamespacingasismade
forlabelssothatthecontent
willalignwiththeotherfields
onthepage,reservingspace
ASIFithadalabel.Ona
smallformfactor,ifpsc_fld
standardisalsoapplied,the
labelspacewillnotbe
reserved,whichisthesame
asforotherpsc_fldstandard
wherethelabelswillbe
placedontopinthesmall
formfactoraswellaswithin
apsc_containersmallstyled
container.
RendersthelegendofaField
Set(aRelatedFieldGroup
groupboxtype)offscreenso
thatitdoesnotconsumeany
visualspacebutisavailable
forscreenreaders.
Setsthelineheightfora
containerto100%.
Usedtomakeahyperlink
lookliketheDRILLDOWN
construct,whichhasaborder
andachevrontoindicateitis
actionable(maxwidthis
automaticallyimposed).
Displaysahyperlinkas
normaltext.
Sameaspsc_fontsize1em,
whichisthenormaltextsize.
Sameaspsc_fontsizeinherit.
IndicatesthattheListView
willshow/containone
column/field.

May 2015
Used
With
Style
Context
Category
psc_list2col
psc_list
linkmenu
ListView
psc_list3col
psc_list
linkmenu
ListView
psc_listcol1
psc_listcol2
psc_list
commonmenu
psc_list
linkmenu
ListView
ListView
ListView
psc_listdetail
Grid
psc_listexpanded
Grid
SubCategory
Description
willshow/containtwo
columns/fields,equally
distributed.
willshow/containtwo
columns/fields,butthe
layoutissuchthatthefirst
columnconsumesmorethan
thelastcolumn.
Identifiesagroupboxorfield
withinaLISTVIEWgridrowas
"column1"data.
Identifiesagroupboxorfield
withinaLISTVIEWgridrowas
"column2"data.
IdentifiesaLISTVIEW
implementationasasimple
COMMONMENU,asif
displayingastandardmenu
liketheActionsListMenu.
Fontwillbeslightlylarger
thanthatusedontheActions
List,butthefontweightwill
besimilar.
UsedonaLISTgrid(gridlevel
orrowlevel)toindicate
additionaldetailsshouldbe
shownononeormorerows,
asinitemsmarkedas
psc_showdetailwillbe
Summary/Detail displayed).
Functionallythesameas
psc_listdetailbutuses
differentsettingsattheFIELD
level.UsedonaLISTgrid
(gridlevelorrowlevel)to
indicateadditionaldetails
shouldbeshownononeor
morerows,asinitems
markedaspsc_show
Summary/Detail expandedwillbedisplayed.
69

May 2015
Used
With
Style
Context
Category
psc_list
linkmenu
ListView
psc_list
psc_listiconmedium linkmenu
ListView
psc_list
linkmenu
ListView
psc_listhasicon
psc_listicontop
psc_listlinkmenu
psc_list
secondarydata
70
ListView
ListView
SubCategory
Description
IndicatesthattheLISTVIEW
itemshaveanicononthe
row.Thisiconcanbeastand
aloneimageORalinkwith
Image+textconfigured.
Stylestheimagesfound
withinaLISTVIEWrowtobe
alargerimagethana
conventionalLISTVIEW
implementation.
UsedwithLISTIVEWgrid
havinganimage(when
psc_listhasiconisused)
indicatingthattheimage
shouldbealignedvertically
withtheTOPoftherow
insteadofmiddle(the
default).
PRIMARYSTYLEusedtoset
upaLISTGridtobeusedasa
basicnavigational
mechanism.Thereare
differentmodesfordifferent
usecases.Thedefault
displaysaLISTVIEWthat
wouldtypicallybeusedfor
leftpanelnavigation.Using
psc_listcommonmenucan
beusedonalistgridbrought
upwithinapopupgroupbox
tobedisplayedlikeasimple
menuitem.Usingpsc_list
settingmenuisaspecialized
twocolumnlistshowinga
Setting(name)andaSetting
Value(value)display.These
arethehighlevelvariations
oftheLISTVIEWstyling.
Thisstyleidentifiesafield
withinamultifieldLISTVIEW
implementationas
SECONDARYdata.The

May 2015
Used
With
Style
psc_listsettingmenu
psc_list
linkmenu
Context
Category
ListView
psc_listtertiary
psc_listvtab
ListView
psc_list
linkmenu
ListView
psc_list_count
ListView
psc_livedatametrics
psc_livedatametrics
label
Tile
Tile
psc_livedatastrong
Tile
SubCategory
Description
defaultistodisplayas
primary.Typicallythelink
thattriggerstherow.
Usedonatwocolumn
LISTVIEWtodisplayaSetting
NameandValueonthesame
row.Itisexpectedthatthat
thefirstcolumn(groupbox
withpsc_listcol1)wouldbe
usedfortheSettingand
wouldcontainaLINKwith
thesettingnameasthelabel.
Thesecondcolumn(group
boxwithpsc_listcol2)
wouldcontainaneditbox
(displayonlyastext)forthe
valueofthesetting.
Thisstyleidentifiesafield
withinamultifieldLISTVIEW
implementationasTERTIARY
data(havingtheleast
importance).
UsedonaLISTVIEW
implementationtoreduce
theverticalspacingbetween
fieldsinaListgridrow.
Typicallyusedwhenyouhave
multiplepiecesofdatato
showinarowatatime(not
acommonmenuorsettings
menu).
Usedonafieldtoidentify
itselfasthebadgecountfield
whenusingLISTVIEWandthe
psc_hascount.
StylingformetricsDATA
foundinthelivedataarea.
StylingforthemetricsLABEL
foundinthelivedataarea.
Adjuststhefontsizeofdata
(onlyonsmallformfactor).
71

May 2015
Used
With
Style
Context
Category
psc_margin{1
30em}em
psc_margin{0_1
10_1}em
Layout
psc_margin{1
50}pct,
psc_margin{0_5
49_5}pct
psc_margin{1
100}px
Layout
Layout
psc_marginauto
psc_margin
bottom{130em}em
psc_margin
72
Layout
Layout
SubCategory
Description
Setsallmargins(top,right,
bottom,left)tothespecified
value.Rangesforthefirstset
arebetween1emto30em,
incrementsof1em.Second
specificationsarefrom0.1em
to10.1emincrementingby
0.1em(0_1emequatesto
0.1em).Inthesecond
specifications,the_0is
droppedfornondecimal
items.Forexample,thereis
no1_0embutinsteadyou
wouldmerelyuse1em.
arebetween1%to50%,
incrementof1%.Second
specificationsarefrom0.5%
to49.5%incrementingby
0.5%(so0_5%equatesto
0.5%).Inthesecond
no1_0pctbutinsteadyou
wouldmerelyuse1pct.
arebetween1pxto100px,
incrementof1px.
Setsthetop/bottommargins
to0andsetstheside
marginstoauto,which
shouldeffectivelycenteran
itemwithinitscontainer.
Sameaspsc_margincenter.
Setsbottommargintothe
specifiedvalue.Rangesfor
thefirstsetarebetween1em

May 2015
Used
With
Style
Context
Category
bottom{0_110_1}em
psc_margin
bottom{150}pct,
psc_margin
bottom{0_549_5}pct
psc_margin
bottom{1100}px
psc_margin
bottomnone
psc_margincenter
psc_marginheader
Layout
Layout
psc_margin
headernone
psc_marginleft{1
30}em,
Layout
Layout
Layout
Layout
Layout
SubCategory
Description
to30em,incrementof1em.
Secondspecificationsare
from0.1emto10.1em
incrementingby0.1em(so
0_1emequatesto0.1em).In
thesecondspecifications,the
_0isdroppedfornon
decimalitems.Forexample,
thereisno1_0embut
insteadyouwouldmerely
use1em.
thefirstsetarebetween1%
to50%,incrementsof1%.
from0.5%to49.5%
incrementingby0.5%(so
0_5%equatesto0.5%).In
_0isdroppedfornon
thereisno1_0pctbut
use1pct.
thefirstsetarebetween1px
to100px,incrementof1px.
Removesthebottommargin.
Sameaspsc_marginauto
(attempttocenterusingside
marginstoauto).
Appliesthestandardmargin
toaps_headergroupstyle
(nottypicallyused).
Removesthemarginfrom
beneathagroupbox's
header.
Setsleftmargintothe
73

May 2015
Used
With
Style
Context
Category
psc_marginleft{0_1
10_1}em
psc_marginleft{1
50}pct,
psc_marginleft{0_5
49_5}pct
Layout
psc_marginleft{1
100}px
psc_marginleftnone
psc_marginnone
psc_marginright{1
30}em,
psc_margin
right{0_110_1}em
74
Layout
Layout
Layout
Layout
SubCategory
Description
to30em,incrementsof1em.
from0.1emto10.1em
_0isdroppedfornon
thereisno1_0embut
use1em.
Setsleftmargintothe
from0.5%to49.5%
_0isdroppedfornon
thereisno1_0pctbut
use1pct.
Setsleftmargintothe
to100px,incrementsof1px.
Removestheleftmargin.
Removesallmarginsfromall
sides.
Setsrightmargintothe
from0.1emto10.1em

May 2015
Used
With
Style
Context
Category
psc_marginright{1
50}pct,
psc_margin
right{0_549_5}pct
psc_marginright{1
100}px
psc_margin
rightnone
Layout
Layout
Layout
psc_marginsides{1
30}em,
psc_marginside{0_1
10_1}em
psc_marginsides{1
50}pct,
psc_margin
Layout
Layout
SubCategory
Description
_0isdroppedfornon
thereisno1_0embut
use1em.
to50%,incrementof1%.
from0.5%to49.5%
_0isdroppedfornon
thereisno1_0pctbut
use1pct.
Removestherightmargin.
Setssidemargins(rightand
left)tothespecifiedvalue.
Rangesforthefirstsetare
between1emto30em,
incrementof1em.Second
0.1em(so0_1emequatesto
0.1em).Inthesecond
wouldmerelyuse1em.
75

May 2015
Used
With
Style
Context
Category
sides{0_549_5}pct
psc_marginsides{1
100}px
Layout
psc_marginstandard
Layout
psc_margintop{1
30}em,
psc_margintop{0_1
10_1}em
psc_margintop{1
50}pct,
psc_margintop{0_5
49_5}pct
76
Layout
Layout
SubCategory
Description
between1%to50%,
incrementof1%.Second
0.5%).Inthesecond
wouldmerelyuse1pct.
between1pxto100px,
incrementof1px.
Setsthemarginasitwould
befora"normal"fieldona
page(specifiesbottom
marginonly).
Setstopmargintothe
from0.1emto10.1em
_0isdroppedfornon
thereisno1_0embut
use1em.
Setstopmargintothe
from0.5%to49.5%

May 2015
Used
With
Style
Context
Category
psc_margintop{1
100}px
psc_margintopnone
psc_maxwidth40em
Layout
psc_maxwidth60em
Layout
Layout
Layout
psc_menu
actionsheet
psc_minwidth20em
ActionSheet
Layout
psc_modalbutton
psc_modalclose
Pushbutton
Pushbutton
SubCategory
Description
_0isdroppedfornon
thereisno1_0pctbut
use1pct.
Setstopmargintothe
Removesthetopmargin.
Setmaximumwidthfora
containertobe40em.
Setmaximumwidthfora
containertobe60em.
Styleusedasapopupoption
styleforaPopupgroupbox
typewherethepopupwill
containlistitemsstyledas
ps_menuitems(containing
buttons).Thisstyleisapplied
asanargumentto
DoModalPopuponly.
Setminimumwidthfora
containertobe20em.
Styleappliedtoabuttonthat
wouldtypicallybefoundina
modalheader.Thisis
typicallyonlyusedOUTSIDE
ofthemodalheader.Ifyou
putabuttoninthemodal
header,itwillautomatically
getstyledinthisfashion.So
thisstyle(whilenotthe
standard)wouldallowyouto
createthesamestyled
buttonwithintheBODYofa
modal(smallerthanthe
standardbuttonsize).
Styletobeappliedtoa
customCLOSEbutton(withX
image)thatwouldbeplaced
77

May 2015
Used
With
Style
Context
Category
SubCategory
psc_modaldone
Pushbutton
psc_modalnoheader
Layout
psc_more
Grid
psc_multiselecthide
Grid
psc_nolabel
DoNotUse
psc_noscroll
psc_nospace
78
ps_collecti
Layout
Layout
Flex
Description
inamodalheader.
Stylewhichcouldbeapplied
toacustommodalbutton
whichwouldbethepositive
actionbutton(notrequired).
However,thepositiveaction
buttoninthemodalheader
shouldalsohavethe
psc_primarystyleappliedas
well.
PageLevelstyletonot
displaythemodalheader.
Thisshouldnotbeusedin
accessiblitymodesinceall
modalsshouldhavea
header.
Usedonadisplayonly(as
text)fieldonaflexgridrow
whentherowactionhas
beenenabledinorderto
showanactionableindicator
attheendoftherow.This
styleshouldnotbeusedon
anyflexgridwiththe
Add/Delete(PeopleTools
provided)actionbuttons
enabled.Thisdisplayonly
fieldmustbethelastfieldon
thegrid.
Appliedtoagrid,indicating
thatthesingleselection
mechanismrenderedby
Peopletoolswillbehidden.
Usedtohidethelabel.More
recommendedtouse
psc_labelhideorpsc_label
none.
Setsoverflowashidden(no
scrolling)onacontainer.Itis
forcedwiththe!important
setting.
Turnsoffspacingbetween

May 2015
Used
With
Style
Context
Category
on
psc_notext
Switch
psc_nowrap
Layout
psc_image
_onlyor
psc_button
simple
ToggleButton
Visual
psc_on
psc_opacity085
psc_overflowauto
psc_overflowhidden
psc_overflowxauto
psc_overflow
xhidden
Layout
Layout
Layout
Layout
SubCategory
Description
theitemsinthelistwithina
collection.Onlyusedwhen
theps_collectionisalsoaUL
orOLtag.
Specialtypeofswitchthat
doesnotdisplayanytextfor
eithertheon/offvaluesof
thecheckbox.Typicallyused
ifthereisnospaceavailable
torendertextvaluesforthe
on/offstate.
Byitself,itturnsoffwrapping
forthespecificcontainer.
Thisisaninheritedsettingso
itcanaffectthechildren.Itis
alsousedbylistlinkmenuto
turnofftextwrappingof
links.
Styleappliedtoindicate
visuallythatavalue
underneathhasbeenset(a
buttonwithastate).The
defaultstateisoff.Note,for
accessibility,whenusingthis
styleyoumustalsomake
sureyousettheariapressed
attributetotrueusing
PeopleCodeatthesametime
thatyouareapplyingthe
psc_onstatestyle.
Setstheopacityto85%.
Setsoverflowofacontainer
toauto.Addscrollbarsif
necessary.
tohidden(noscrollingand
clipcontentifitdoesnotfit).
toscrollhorizontallyif
necessary.
tonotscroll(andpossibly
79

May 2015
Used
With
Style
psc_overflowyauto
psc_overflow
yhidden
Context
Category
SubCategory
Layout
Layout
psc_override
TwoPanel
psc_padding{1
30em}em
psc_padding{0_1
10_1}em
psc_padding{1
50}pct,
psc_padding{0_5
49_5}pct
80
Layout
Layout
SinglePage
containertwo
panels
Description
truncate)horizontallyonly.
toscrollverticallyif
necessary.
tonotscroll(andpossibly
truncate)verticallyonly.
Specialpanelstylingtoallow
theapplicationtooverride
(bycustomstyling)the
breakpontswhenthepanel
convertsfromCOLLAPSIBLE
orFIXEDmodeintoaoverlay.
Theapplicationiscompletely
responsibleforthemedia
querystylingasfoundinthe
defaultsystem.Asatypical
rule,thecustomstyling
wouldcopythemediaquery
forthetwopanelsectionand
merelychangethebreak
point,replacingthe
:not(.psc_override)with
.psc_override.
Setsallpadding(top,right,
arebetween1emto30em,
0.1em).Inthesecond
no1_0em,butinsteadyou
wouldmerelyuse1em.
arebetween1%to50%,

May 2015
Used
With
Style
psc_padding{1
100}px
Context
Category
Layout
psc_padding
bottom{130em}em
psc_padding
bottom{0_110_1}em
Layout
psc_padding
bottom{150}pct,
psc_padding
bottom{0_549_5}pct
Layout
SubCategory
Description
incrementsof1%.Second
0.5%).Inthesecond
wouldmerelyuse1pct.
arebetween1pxto100px,
incrementof1px.
Setsbottompaddingtothe
from0.1emto10.1em
_0isdroppedfornon
thereisno1_0embut
use1em.
from0.5%to49.5%
_0isdroppedfornon
thereisno1_0pctbut
81

May 2015
Used
With
Style
Context
Category
SubCategory
Description
use1pct.
psc_padding
bottom{1100}px
psc_padding
bottomnone
psc_paddingcontent
psc_padding
contentnone
Layout
Layout
Layout
Layout
psc_paddingleft{1
30}em,
psc_padding
left{0_110_1}em
Layout
psc_paddingleft{1
50}pct,
psc_padding
left{0_549_5}pct
82
Layout
Removesthebottom
padding.
Addsthestandardpaddingto
thecontentareaofagroup
box(noncollapsible).
Setspaddingtocontentarea
ofagroupboxtohaveno
padding(default).
Setsleftpaddingtothe
from0.1emto10.1em
_0isdroppedfornon
thereisno1_0embut
use1em.
from0.5%to49.5%
_0isdroppedfornon
thereisno1_0pctbut

May 2015
Used
With
Style
Context
Category
SubCategory
Description
use1pct.
psc_paddingleft{1
100}px
psc_paddingleftnone
Layout
Layout
psc_paddingnone
Layout
psc_paddingright{1
30}em,
psc_padding
right{0_110_1}em
Layout
psc_paddingright{1
50}pct,
psc_padding
right{0_549_5}pct
psc_paddingright{1
100}px
psc_padding
Layout
Layout
Layout
Removestheleftpadding.
Removesallpaddingfromall
sides.
Setsrightpaddingtothe
from0.1emto10.1em
_0isdroppedfornon
thereisno1_0embut
use1em.
from0.5%to49.5%
_0isdroppedfornon
thereisno1_0pctbut
use1pct.
Removestherightpadding.
83

May 2015
Used
With
Style
Context
Category
SubCategory
Description
rightnone
psc_paddingsides{1
30}em,
psc_padding
side{0_110_1}em
Layout
psc_paddingsides{1
50}pct,
psc_padding
sides{0_549_5}pct
psc_paddingsides{1
100}px
psc_padding
standard
psc_paddingtop{1
30}em,
psc_padding
top{0_110_1}em
84
Layout
Layout
Layout
Layout
Setssidepadding(rightand
between1emto30em,
0.1em).Inthesecond
wouldmerelyuse1em.
between1%to50%,
incrementsof1%.Second
0.5%).Inthesecond
wouldmerelyuse1pct.
between1pxto100px,
incrementof1px.
Setsthepaddingasitwould
befora"normal"fieldona
page(specifiesbottom
marginonly).
Setstoppaddingtothe

May 2015
Used
With
Style
Context
Category
psc_paddingtop{1
50}pct,
psc_padding
top{0_549_5}pct
psc_paddingtop{1
100}px
psc_paddingtopnone
Layout
Layout
Layout
psc_pagecontainer
Layout
SubCategory
Description
from0.1emto10.1em
_0isdroppedfornon
thereisno1_0embut
use1em.
Setstoppaddingtothe
from0.5%to49.5%
_0isdroppedfornon
thereisno1_0pctbut
use1pct.
Setstoppaddingtothe
Removesthetoppadding.
Usedifyouneedan
intermediatecontainer
betweenps_apps_content
andthePeopleTools
renderedpagestructures.
ThisallowsthesametheCSS
Flexmodeltobecontinued
(chainnotbroken)soyoucan
useflexstylingonother
containersbeingsibilingsto
ps_apps_content.For
example,youcouldcreatea
fixedareaaboveorbelow
85

May 2015
Used
With
Style
psc_pageheader
darkborder
Context
Category
ps_apps_p
ageheader,
ps_proc_pa
geheader
AppsBanner
ps_apps_p
ageheader,
ps_proc_pa
geheader
psc_pageheader
fixed
psc_pagepadding
content
AppsBanner
Layout
psc_pagepadding
margin
psc_pagepadding
sidemargin
86
Layout
Layout
SubCategory
Description
ps_apps_contentwhich
wouldhaveamiddlearea
scrolling.Thisissimilarto
howthebannerandthe
footerarecreated,butyou
couldalsocreateasimilar
itemwithinyour"content"
area.
Placesadarkerborderbelow
theapplicationpageheader
forbettervisibilityofthe
separation.
Appliesthesamebackground
asifthe
ps_apps_pageheaderwere
actuallycontainedwithinthe
bannersection(usedthe
reparentingtotheCustom
HeaderBottomtarget).This
isonlyneededifyouareNOT
usingthisreparentingbut
youarefixingthisheadernot
toscrollwiththepageand
wanttohavea"fixed"look.
Appliesthestandardpage
paddingtothecontentarea
ofagroupbox(nota
collapsiblegroupbox).
Appliesthesamedimensions
forpaddingfoundin
ps_apps_contentbutis
appliedasaMARGINinstead
ofpadding(outsidethe
containerratherthaninside
thecontainer).
Setsthesidedimensionsfor
thestandardpaddingonly
butimplementedasMARGIN
insteadofpadding.

May 2015
Used
With
Style
psc_panelaction
Context
Category
TwoPanel
SubCategory
SinglePage
containertwo
panels
psc_panelbutton
TwoPanel
SinglePage
containertwo
panels
TwoPanel
SinglePage
containertwo
panels
SinglePage
containertwo
panels
Outermostcontainerforthe
panelstructure(partofCSS
FLEXpagestructure).This
structureisusedtocreatea
horizontalFLEXbetweenthe
LEFTPANEL,whichistypically
usedfornavigation
(psc_panelaction)andthe
RIGHTorcontentpanel,
whichisusedforthemain
content(psc_panelcontent).
Toseetheproperlayoutfora
SINGLEPAGEcontainingtwo
psc_panelcontainer
Secondlevellayoutgroup
boxcontainingtheaction
panel(orleftpanel).
Childofthepsc_panelaction.
ThisisaSECTION(orregion)
thatwillbeassignedalabelif
youusetheTwoPanelAPI
providedby
SetNavigationPanelInfo()or
SetActionPanelInfo()ifthe
leftpanelisnotusedfor
navigation.Underthis
container,the
ps_apps_contentlayout
groupboxistypicallyusedas
theoutermostcontainerofa
pagetobefound.Scrolling
behaviorfor
ps_apps_contentwill
performasnormal.Sinceyou
typicallydon'tusepadding
fornavigationlists,youmay
alsoneedtoadd
psc_paddingnonetothe
ps_app_contentfoundunder
thiscontainer.
Actualtaborbuttonthat
opens/closestheleftpanel(if
thecontrolisavailable).
psc_panel
actioninterior
Description
TwoPanel
87

May 2015
Used
With
Style
Context
Category
SubCategory
Description
panelimplementation,
reviewthePSL_TWOPANEL
layoutpageinApplication
Designer.
psc_panelcontent
TwoPanel
SinglePage
containertwo
panels
TwoPanel
SinglePage
containertwo
panels
TwoPanel
SinglePage
containertwo
panels
psc_panel
contentinterior
psc_panelfixed
88
Secondlevellayoutgroup
boxcontainingthecontent
panel.
Childofthepsc_panel
content.ThisisaSECTION(or
region)thatwillbeassigned
alabelifyouusetheTwo
PanelAPIprovidedby
SetContentPanelInfo().Under
thiscontainer,the
ps_apps_contentlayout
groupboxistypicallyusedas
theoutermostcontainerofa
pagetobefound.Scrolling
behaviorfor
ps_apps_contentwill
performasnormal.
ThisisaMODEstylethat
changesthedefaultbehavior
oftheleftpanel.Default
behaviorisforthepanelTAB
tobealwaysavailableto
allowtheusertoopen/close
thepanel(defaultstateof
panelisclosed).FIXEDmode
meansthatifspacepermits,
thetabishiddenandtheleft
panelisalwaysdisplayed(no
usercontrolifspaceallows).
Ifspaceisnotsufficient(orif
youareinPORTRAITmode
onadevice),thepanelisin
OVERLAYmode,meaning
thatthepaneldoesnotaffect
thewidthofthecontent.In
thissituation,theleftpanel
merelyoverlaysthecontent
ratherthanmakingthe

May 2015
Used
With
Style
Context
Category
SubCategory
Description
contentsizesmallertosee
theleftpanel.
psc_panelfullsize
TwoPanel
SinglePage
containertwo
panels
TwoPanel
SinglePage
containertwo
panels
TwoPanel
SinglePage
containertwo
panels
psc_paneloverlay
psc_panel
tabcontainer
psc_posabsolute
psc_posbottomleft
Layout
Layout
Thisstyleadjuststhesizeof
theleftpanelwhenitis
OPENEDtoconsumethe
entirewidthofthewindow.
Therewillbenotabtoclose
thepanelsotheuseris
forcedtomakeaselection.
Thisstyleisusedwhenyou
wanttousetheleftpanelin
aLANDINGPAGEformof
panelconstruct.Typically,
thiswouldonlybeseenina
smallformfactordevice.
ThisisaMODEstylethat
changesthedefaultbehavior
oftheleftpanel.Seethe
descriptionforpsc_panel
fixedforthedefault
behavior.InOVERLAYmode,
thepaneldoesnotaffectthe
widthofthecontent.Inthis
situation,theleftpanel
merelyoverlays(hidespart
of)thecontentratherthan
makingthecontentsize
smallertoseetheleftpanel.
Containerforthe"tab"tobe
availableundercertain
circumstancestoallowthe
usertoopen/closetheleft
panel.
AppliestheCSSposition
propertytoabsolutefor
explicitmovementofan
elementwithinanother
positionedcontainer.
Performsabsolute
positioningrelativetothe
bottomleftcornerofthe
89

May 2015
Used
With
Style
Context
Category
SubCategory
psc_posbottomright
Layout
psc_posfixed
Layout
psc_posrelative
psc_posstatic
Layout
Layout
psc_postopleft
Layout
psc_postopright
Layout
psc_primary
psc_radius{1,2)em,
psc_radius{0102}em
90
Pushbutton
Visual
Primary
Description
nearestpositionedancestor.
Performsabsolute
positioningrelativetothe
bottomrightcornerofthe
nearestpositionedancestor.
propertytofixed,relativeto
thebrowserwindow(willnot
scroll).
propertytorelativefor
relativemovementsorto
identifyacontainerfor
positioningusingother
positioningmeans(suchas
absolute).
propertytostatic(the
default).
Performsabsolute
positioningrelativetothetop
leftcornerofthenearest
positionedancestor.
Performsabsolute
positioningrelativetothetop
rightcornerofthenearest
positionedancestor.
Importantstyleusedtomake
astandardbutton(notinthe
bannernoranimagebutton
noraSIMPLEbutton)tobe
displayedasthe"important"
button(primaryaction).
Thereshouldbeonlyasingle
primarybuttononthedisplay
atatimebecauseyouare
tryingtodrawattentionto
theprimaryactiontobe
completedontheoverall
page.
Setstheborderradiustoa
containertothespecified

May 2015
Used
With
Style
Context
Category
psc_radius{110}px
psc_radiusnone
Visual
Visual
psc_radius
top{1,2)em,
psc_radiustop{01
02}em
Visual
psc_radiustop{1
10}px
psc_radiustopnone
Visual
Visual
SubCategory
Description
value.Valuesrangefrom
0.1emto1emincrementing
by0.1em.Thereisalsoa2em
aswell.Ifthiscontainerisa
groupboxwithaheader,the
header'sTOP(left/right)
radiusarealsoadjustedto
thesamevalueaswell.
Setstheborderradiustoa
containertothespecified
value.Valuesrangefrom1px
to10pxincrementingby1px.
Ifthiscontainerisagroup
boxwithaheader,the
header'sTOP(left/right)
radiusarealsoadjustedto
thesamevalueaswell.
Setstheborderradiustobe
none(thedefault).
SetstheTOP(left/right)
borderradiustoacontainer
tothespecifiedvalue.Values
rangefrom0.1emto1em
incrementingby0.1em.
Thereisa2emaswell.Ifthis
containerisagroupboxwith
aheader,theheader'sTOP
(left/right)radiusarealso
adjustedtothesamevalueas
well.
borderradiustoacontainer
tothespecifiedvalue.Values
rangefrom1pxto10px
incrementingby1px.Ifthis
containerisagroupboxwith
aheader,theheader'sTOP
(left/right)radiusarealso
adjustedtothesamevalueas
well.
borderradiustobenone(the
91

May 2015
Used
With
Style
Context
Category
psc_reldispcontainer
RelatedDisplay
psc_reldispfield
RelatedDisplay
psc_reldispprompt
92
RelatedDisplay
SubCategory
Description
default).
Appliedtoalayoutgroupbox
tocontaintwofields
(typically):therelateddisplay
controlandtherelated
displayvalue/units.Within
thisstyledcontainer,you
typicallyhavetwotothree
elementsinthisorder:an
editablefield(psc_reldisp
field),anoptionalimage
button(psc_reldispprompt),
andadisplayonlyastext
field(psc_reldispvalueOR
psc_reldispunits).
Withinapsc_reldisp
container,thisstyleisapplied
toaneditablefieldwhichis
usedtoderivethevalueto
bedisplayedastherelated
displayvalue.Ifthecontents
ofthisfieldisexample,you
canusepsc_hide
reldispvaluewhichwillhide
theassociateddisplayonly
value(orunit)sothatno
additionalspaceis
consumed.Onasmallform
factor,ifthisfieldisalsohas
psc_fldstandarditwill
controlnotonlythelabel
positiononthisfieldbutalso
theplacementofthe
psc_reldispvaluefieldas
well.
Stylingonanimageonly
buttonwithinapsc_reldisp
container,whichtypically
lookslikeaprompt.Createsa
special"prompt"buttonthat
appearsinsidethe
psc_reldispfieldeditable

May 2015
Used
With
Style
Context
Category
psc_reldispunits
RelatedDisplay
psc_reldispvalue
psc_rowaddhide
psc_rowdeletehide
RelatedDisplay
Grid
Grid
psc_rowinserthidden
psc_rowlabelshide
Layout
Grid
psc_rowlabelsnone
Grid
SubCategory
Description
field(likeapromptbutton).
Similartopsc_reldispvalue
butisusedtodisplayFIXED
TEXT,ratherthanrelated
displaywhichQUALIFIESthe
valuefoundinpsc_reldisp
field.Likeunitsofmeasure.
Whenonasmallformfactor,
unlikepsc_reldispvalue,this
displayonlyvaluewill
continuetobepositioned
BYSIDEthefieldasitisa
qualificationofthefield.
Withinapsc_reldisp
container,thisstyleisapplied
toaDISPLAYONLY(asText)
fieldtodisplaytheassociated
valuetothefieldpsc_reldisp
field.Onasmallformfactor,
ifthepsc_reldispfieldalso
haspsc_fldstandard,this
valuewillmoveBELOWthe
editablefield.
Hidesthecolumnthat
containsthePeopleTools
generatedrowAddaction.
Hidesthecolumnthat
containsthePeopleTools
generatedrowDeleteaction.
Appliedtoarowtohideit
whileyouareperforming
INSERTS.Removefromthe
rowafteryou'veaddedthe
informationsuccessfullyina
modal.
Sameaspsc_rowlabelsnone.
Appliedatagridlevel,this
styleisusedtonotdisplay
thelabelstructure(doesnot
consumespace)inFLEXgrid
rows.Inaccessibilitymode,
theselabelswillberendered
93

May 2015
Used
With
Style
psc_rownumberhide
Context
Category
SubCategory
Grid
psc_scroll
Layout
psc_scrollcontent
Layout
psc_scrolloverflow
Layout
psc_scrollareanotitle
Layout
psc_selected
State
psc_list
linkmenu
psc_selectionnone
psc_separator
breadcrumb
94
ListView
ps_collecti
on
Layout
ScrollArea
Description
offscreensotheywillbe
availabletothescreen
reader.
Hidesthecolumncontaining
thePeopleToolsgenerated
rownumber.
Setsoverflowasauto
(scrollingenabledif
necessary)onacontainer.It
isforcedwiththe!important
setting.
Enablesthecontentareaofa
standardgroupbox,nota
collapsiblegroupbox,to
scrollifnecessary.
Sameaspsc_overflowauto.
Setsoverflowasauto
(scrollingenabledif
necessary)onacontainerbut
isNOTforced.
Appliedatthescrollarea
level.Thisstyleturnsoffthe
rowheadersforeachrowof
thescrollarea.Theyare
hiddenandnotavailablein
accessibilitymode.
Usedtoindicatethatanitem
Tabs,ButtonBar, (typicallyaroworanitemin
alist)isselected.
Listview,Grids
Usethisstyletohidethe
checkbox/radiobuttonfor
thePeopleToolsrow
selectionmechanismona
LISTVIEWimplementation.
Usedtohidetheselection
mechanismforarow.
Setstheseparatorforanon
gridcollectiontobea
breadcrumbcharacter(orthe
greaterthansign">").
Collections

May 2015
Used
With
Style
Context
Category
ps_collecti
on
psc_separatorpipe
psc_shadow
standard
Layout
Visual
psc_showactionable
Actionable
SubCategory
Description
Setstheseparatorfor
elementsinanongrid
collectiontobeapipe
character,"|".
Collections
Appliesthesimpleouter
shadowtoacontainer.
Thereareseveralusagesfor
thisstyling.Someare
standaloneandothersare
usedinconjunctionwiththe
psc_morestyle.Thisstyleis
usedtodisplayaCHEVRON
whichindicatesthatthe
entity(agroupboxoragrid
row)isACTIONABLE.It
requiresthatwithin
ApplicationDesignerthata
fieldhasthesetting"Execute
PConRow/GroupClick"
enabled,whichwillcause
PeopleToolstorenderastyle
ofpsc_rowactatthe
appropriatelevel.Ifthe
triggerfield(identifiedwith
thestylepsc_trigger)has
beendisabled,therowaction
willalsobedisabledandthe
CHEVRON(oractionable
indicator)willnotbe
displayed.Ifthisstyleis
appliedonanactionable
GROUPBOX,thechevronwill
merelyappearinthegroup
boxintheappropriate
location.IfappliedonaLIST
orDIVgrid(atthegridlevel),
theindicatorwillappearat
theendofeveryrowthatis
actionable.Ifthisisusedona
FLEXgrid,itisexpectedthat
adisplayonly(astext)field
Grid/Groupboxes willbeusedasthelastfield
95

May 2015
Used
With
Style
Context
Category
psc_show
baronselect
Grid
psc_showdetail
Grid
psc_showexpanded
Grid
psc_showgridonly
Grid
psc_showlistonly
Grid
psc_show
rowselected
96
Grid
SubCategory
Description
onthegridhavingthestyle
psc_moreappliedtoit.This
fieldmayormaynothave
content.
Displaysagrid'sheaderbar
(wheretheactionsare
locationed)onlywhenarow
isselected,usingsingleor
multirowPeopleTools
selectionmechanism.
Appliedatthegridlevel.
HeaderBar
UsedonafieldwithinaLIST
gridindicatingthatthisitem
shouldonlybedisplayed
whenthelistgridisindetail
mode(psc_listdetailapplied
Summary/Detail atthegridorrowlevel).
UsedonafieldwithinaLIST
gridindicatingthatthisitem
shouldonlybedisplayed
whenthelistgridisin
expandedmode(psc_list
expandedappliedatthegrid
Summary/Detail orrowlevel).
Indicatesthatthefieldshould
onlybedisplayedinaFLEX
grid.Thefieldwouldbe
hiddeninaLISTorDIVgrid
rendering.
Indicatesthatthefieldshould
onlybedisplayedinaLIST
grid.Thefieldwouldbe
hiddeninaFLEXorDIVgrid
rendering.
Onabuttonappearingwithin
aheaderbarofagrid,this
stylewillcauseapagefield
elementtobedisplayedonly
whenarowhasbeen
selectedwithinthegrid
(usingthePeoplToolssingle
ormultipleselection
ButtonArea

May 2015
Used
With
Style
Context
Category
SubCategory
Description
mechanismonarow.
psc_simple_label
Layout
psc_singleselecthide
Grid
psc_sizelarge
Switch
psc_sizemedium
Switch
psc_sizexsmall
Switch
psc_standard
Switch
Label
Applyonpagefieldtodisplay
asimplelabelwherethereis
noreservedspaceforthe
label.Thewidthisthesizeof
thelabelitselfratherthan
thetypical33%resevered
spaceofthecontainer.
Appliedtoagrid,itindicates
thatthesingleselection
mechanismrenderedby
PeopleToolswillbehidden.
Becausethesizeofthe
SWITCHformofthe
checkboxisfixed,usethis
styleonacheckboxtogeta
largestwidthforthelabel.
Becausethesizeofthe
SWITCHformofthe
largerwidthforthelabel
(defaultisanIMPLIED
SMALL).
Becausethesizeofthe
SWITCHformofthe
smallerwidthforthelabel
(defaultisanIMPLIED
SMALL).Ifyouwantanotext
version,seethestyle
psc_notext.
Usedifanapplicationwanted
totogglebetweenSWITCH
displayofacheckboxandthe
STANDARDdisplayofa
checkbox.Ifyouapply
psc_standardtoaSWITCH
form,itwillappearasa
normalcheckbox.
97

May 2015
Used
With
Style
psc_strong
Context
Category
Visual
psc_subtitle
psc_tablelayoutauto
Visual
Grid
psc_tablelayoutfixed
psc_tablelayout
inherit
Grid
Grid
psc_textdisclaimer
Visual
psc_textexample
98
Visual
SubCategory
Description
Setsfontweighttobold
(sameaspsc_bold).
Thisstyleapplieschangesto
agridtitleoragroupbox
titletoappearnotasa
standardheadingbutmore
likeasubtitle,expectingthat
acontainerwouldhavea
higherlevelheading.The
fontsizeoftheactual
headinglevelbeingusedin
thegridtitle/groupbox
headerrenderingisnot
modified,butthecoloris
(usesinheritedcolorrather
thannormalheadercolors),
border(removed)and
Grid/Groupboxes padding.
Setsthetablelayoutfora
FLEXgridtoauto.
FLEXgridtofixed.
FLEXgridtoinherit.
Similartopsc_textimportant
butdoesnotincludean
image,andthistypeoftextis
usedtodisplaydisclaimer
informationatthebottomof
content.
NotusedbyPeoplesoft
Applicationsbutitisastyle
toprovideanexampleintext
formofavaluetobe
entered.Thistypically
displayedbeneath(or
possiblybeside)anentryfield
togiveanexample.Typical
usagemightbetodescribe
formatting.Ifplacedbelow
anentryfield,thespacing
belowtheentryfieldshould

May 2015
Used
With
Style
Context
Category
psc_textimportant
psc_text_center
psc_tileboxdata
psc_tileboximg
psc_tileimg
Visual
Layout
Tile
Tile
Tile
psc_tile_content
Tile
SubCategory
Description
beremoved(psc_margin
bottomnone)sothatthe
exampleisclosetothefield.
Also,inaccessibilitymode,
applicationsshouldusearia
describedbyandpointtothe
textfieldthatdescribesthe
formatsothataccessible
usershavethesamecontext
informationavailableforthe
field.Ifyouwanttheexample
texttobebesidetheentry
field,lookatthepsc_reldisp
*stylestostylethissimilarto
psc_reldispunits.
Simplestyletotextinsucha
waytobringimportanceto
thisarea.Withinthislayout
groupbox,youwould
typicallyhaveadisplayonly
(astext)editboxor
longeditboxandanoptional
image(whichshouldcome
firstasachild).The
editbox/longeditcontrolswill
havetheirlabel'shiddenand
willwraparoundtheimage
(ifpresent).
Sameaspsc_haligncenter.
Performstextalignmentas
centered.
Setspaddingonagroupbox
tocontaintiledata.
Styleusedonacontainer
whichhasaimagetobeused
asthetile'smainimage.
Styleappliedtothetile
image.
Basicstylefortilecontent
interior.Therearetwo
sectionsofagrouplet
displayedinatile.This
99

May 2015
Used
With
Style
psc_tile_content
center
psc_tile_contentkpi
image
psc_tile_content
metrics
psc_tile_content
metricsdata
psc_tile_kpi
psc_tile_kpi1
psc_tile_kpibox1
psc_tile_kpibox2
psc_tile_kpilabel
Context
Category
Tile
Tile
Tile
Tile
Tile
Tile
Tile
Tile
Tile
psc_tile_livedata
psc_tile_livedata
count
100
Tile
Tile
SubCategory
Description
section(psc_tile_content),
whichcontainsthemain
contentofthetile,andthen
thereisthepsc_tile_livedata
section.
Usedtocenterthecontent
withinatile(canbeusedat
variouslevels)usingtheFLEX
CSSmodel.Commonlyused
onpsc_tile_content.
StylingforContainerofaKPI
imagewithinthecontent
area.
Stylingformetricscontainer
foundwithinthetilecontent
area(asopposedtothelive
dataarea).
Stylinglivedatawhenitis
locatedwithinthecontent
area.
StylingforKPIdata.
StylingforKPIdata.
Styleforgroupbox
containingKeyPerformance
Indicator(KPI)data.
Styleforgroupbox
containingKeyPerformance
Indicator(KPI)data.
StyleforlabelforKPIdata.
thatwouldbeasiblingto
psc_tile_contentwhena
parentgroupboxisusedto
houseboththe
psc_tile_contentand
psc_tile_livedata.
Styleappliedtoaneditbox
(typically)containingacount
tobedisplayedinthelow
cornerofthetile(typically
usepsc_labelnone).

May 2015
Used
With
Style
psc_tile_livedata
descr
psc_tile_livedata
descrbox
psc_tile_livedataimg
psc_tile_livedata
trendimage
psc_tile_livedata_des
cr1
psc_tile_livedata_ite
m
Context
Category
Tile
Tile
Tile
Tile
Tile
Tile
psc_titleh1
Visual
psc_titleh2
Visual
psc_titleh3
Visual
SubCategory
Description
Outercontainerusedforlive
datadescription(childof
psc_tile_livedata).
Childofpsc_tile_livedata
descrcontainingactual
information.
Imagestylewithinlivedata
area.
Imageusedtoshowtrend
directionwithinlivedata
section.
Livedataitem(childof
psc_tile_livedatadescrbox).
Typicallyalsohasstyle
psc_tile_livedata_item.
Styleindicatingapagefieldis
partoflivedata.
Usesthesamestylingoftext
astheH1.Warningifyouuse
thisonaregularfieldandit
visuallyisaheader,youneed
todealwithaccessibilityto
addattributestomakeita
headertoascreenreaderas
well.Simplystyling
somethingtolooklikea
headerisnotsufficient.
well.Simplystyling
101

May 2015
Used
With
Style
Context
Category
SubCategory
psc_titleh4
Visual
psc_titleh5
Visual
psc_titleh6
psc_titlepage
psc_titlesub
psc_toggle
imagecontainer
102
Visual
Visual
Visual
ps_collecti
on.ps_butt
on_bar
ButtonBar
ViewSelector
Description
well.Simplystyling
well.Simplystyling
well.Simplystyling
well.Simplystyling
Samestylingaspsc_titleh1.
Samestylingaspsc_titleh2.
Similartopsc_gridview
togglebutamoregeneric
constructforgeneralpurpose
radiobuttonsstyledwith
imagesviacustomCSS.This

May 2015
Used
With
Style
Context
Category
SubCategory
Description
isacontainerforpsc_toggle
imageitem.
psc_toggle
imageitem
psc_transparent
ButtonBar
ViewSelector
Visual
Button
psc_list
linkmenu
ListView
psc_triggerhidden
psc_valignbaseline
Layout
psc_valignbottom
Layout
psc_valignmiddle
Layout
psc_valigntop
Layout
psc_valuealignauto
psc_valueellipsis
Layout
Layout
Similarto.psc_gridviewitem
butusedasachildof
psc_toggleimagecontainer.
Eachitemissizedsimilarlyto
thepsc_gridviewitemasfar
astheimagesize.Itisupto
thedevelopertoaddthe
definitionsfortheactual
imagestouse.Youcannot
specifyimagesinApplication
Designerforradiobuttons.
Usedtomakeabutton's
backgroundandborder
completelytransparent.
StyleusedonListViewstyling
tohidethetrigger
column/fieldEXCEPTin
accessibilitymode.
Setsverticalalignment
propertytobaseline.
propertytobottom.
propertytomiddle.
propertytotop.
Appliesstyletopagefield
elementstoalignthetext
(whetherineditablecontrol
orsimpletext[withsize])
basedontype.Mosttypes
arealignedleftbutnumeric
typesarealignedright.The
onlytimethatauto
alignmentoccursiswithina
flexgrid,wherenumericsare
right,buttonsarecentered,
andtextisleft.
Appliestextoverflowtobe
anellipsisforthevalueif
103

May 2015
Used
With
Style
Context
Category
psc_valuefullwidth
psc_value
haligncenter
psc_valuehalignleft
psc_valuehalignright
Layout
Layout
Layout
Layout
psc_valueheight{1
20}em
Layout
psc_valueheight{1
100}pct
Layout
psc_valueheight{1
100}px
Layout
psc_valueheightauto
104
Layout
SubCategory
Description
thereisaspecificsize
designatedforthevalue
structure.Thisisonly
applicableforcontrols
renderedasdisplayonlyas
text.
Setsthesizeofdisplayonly
astextorhyperlinkvalueas
thefullwidthofthe
container(alsochangesto
displaystyleofblock).
Horizontallycentersthetext
withineditablecontrolora
sizeddisplayonlytext.
Horizontallyleftjustifiesthe
textwithineditablecontrols
orasizeddisplayonlytext.
Horizontallyrightjustifiesthe
textwithineditablecontrols
orasizeddisplayonlytext.
Settheheightofdisplayonly
textordisplayonlyas
hyperlink(email/url)tothe
specifiedvalue.Valueranges
from1to20emincremented
by1em.
textordisplayonlyas
from1to100%incremented
by1%.
textordisplayonlyas
from1to100pxincremented
by1px.
textordisplayonlyas
hyperlink(email/url)tobe
automatic,basedoncontent.

May 2015
Used
With
Style
psc_value
valignbaseline
psc_value
valignbottom
psc_value
valignmiddle
psc_valuevaligntop
Context
Category
SubCategory
Layout
Layout
Layout
Layout
psc_valuewidth{1
100}em
Layout
psc_valuewidth{1
100}pct
Layout
psc_valuewidth{1
100}px
Layout
psc_valuewidthauto
Layout
psc_width{1100}em
Layout
Any
Description
displayonlytext(withheight
specified)tobebaseline.
specified)tobebottom.
specified)tobemiddle.
specified)tobetop.
Setsthewidthofdisplayonly
textordisplayonlyas
from1to100em
incrementedby1em.
textordisplayonlyas
from1to100%incremented
by1%.
textordisplayonlyas
from1to100pxincremented
by1px.
textordisplayonlyas
hyperlink(email/url)tobe
automatic,basedoncontent,
whichisthedefaultif
wrappinghasnotbeen
enabledinApplication
Designer.
Setsthewidthofa
rangefrom1emto100emin
incrementsof1em.
105

May 2015
Used
With
Style
Context
Category
SubCategory
psc_width{1100}pct
Layout
Any
Layout
Any
Layout
Any
psc_width{1100}px
psc_widthauto
psc_wrap
psc_wraplink
psc_wraplinktext
106
Layout
Hyperlink
Hyperlink
Description
Setsthewidthofa
rangefrom1%to100%in
incrementsof1%.
Setsthewidthofa
rangefrom1pxto100pxin
incrementsof1px.
Setsthewidthofa
container/entityto"auto,"
whichallowsthecontent(or
someotherstyling)todrive
thewidthoftheitem.
Byitself,turnsonwrapping
forthespecificcontainer.
Thisisaninheritedsettingso
itcanaffectthechildren.Itis
alsousedbylistlinkmenuto
turnofftextwrappingoflinks
containedwithinthe
LISTVIEW.Thedefaultisno
wrapping,ortruncation.
Usedonahyperlink
(standardhyperlink)toallow
wrappingoftext.
UsedonanImage+Text
hyperlinktoallowwrapping
ofthehyperlinktext.

May 2015
107

Peoplesoft Fluid Ui Css Guide v01

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Peoplesoft Fluid Ui Css Guide v01

Enviado por

Direitos autorais:

Formatos disponíveis

Oracle PeopleSoft PeopleTools Product Documentation

CSS Guide for PeopleSoft Fluid User

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

PeopleTools System Default CSS Styles

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update

CSS Guide for PeopleSoft Fluid User Interface

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Product Documentation Update