Oracle PeopleSoft PeopleTools Product Documentation - PDF document

1 Oracle PeopleSoft PeopleTools Product Do
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 u

2 sed under license and are trademarks or
sed 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 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,

3 copy, reproduce, translate, broadcast, m
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 i

4 s delivered to the U.S. Government or an
s 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 RIGHTSPrograms, 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 li

5 cense terms set forth in the applicable
cense 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

6 may create a risk of personal injury. If
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 fr

7 om third parties. Oracle Corporation and
om 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 ha

8 rdware on which you are using the softwa
rdware 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 Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Introduction ..............................................................................................

9 ....................PeopleTools System D
....................PeopleTools System Default CSS Styles .........................................................................................Fluid Application Content CSS Styles .......................................................................................... Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. As described in the PeopleSoft PeopleTools 8.54: Fluid User Interface Developer’s Guide, creating fluid applications relies heavily

10 on CSS 3.0 for the look, feel, and layo
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 Developer’s Guide, “Adding Page Controls,” Applying Styles. http://docs.oracle.com/cd/E58500ApplyingStyles.html#topofpage This document provides descriptions of nearly a thousand CSS styles delivered with PeopleToo

11 ls 8.54. The styles are divided in these
ls 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 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 styl

12 e does not appear in this document, it
e 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

13 will be listed here. Sub Category: If a
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 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. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved.

14 PeopleTools System Default CSS Styles T
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 Category Appliedindicatingdevice's Appliedindicatingidentified debugtextDebuggingDebuggingConsole. used. Appliedindicatingidentified pt_attachmentpageModalAttachmentFrame. pt_prompt

15 pageModal pt_viewattachModalAttachmentAt
pageModal pt_viewattachModalAttachmentAttachmentFrame AppliedindicatingidentifiedInternet ModalAttachmentused. Appliedindicatingdevice's ModalAttachmentused. loadingIndicatorModalAttachmentused. Appliedindicatingdevice's Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category Settingdefaults for Image indicatecontentTile. nuitilegridTileGrid pt_promptpageModalpage. TypeAppliedindicatingdevice'sTYPEtablet/phonetypicallyused). Homepagepersonali

16 zation ps_accordion_contentcontainer. ps
zation ps_accordion_contentcontainer. ps_accordion_content0container(inner). ps_accordion_content0Expandexpanded(not ps_accordionHversionaccordion ps_actions_contcontainerrightaction(i.e., Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category button,button,button). ps_ajax_consoledebuggingtoolAjax. ModalStyleModal(pointtriggeringelement). ModalStyleModal(pointtriggeringelement). ModalStyleModal(pointtriggeringelement). ModalStyleModal(pointtrigg

17 eringelement). ModalStyleModal(pointtrig
eringelement). ModalStyleModal(pointtriggeringelement). ps_arrow_right_disableModalStyleModal(pointtriggeringelement). ModalStyleModal(pointtriggeringelement). completetextModalAttachmenttextattachmentdialog. ModalAttachment ModalAttachmentattachments Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category instructModalAttachmentInstructionTextmultiattachment ModalAttachment(progresstext). ModalAttachmenttext. uploadtextModalAttachmenttext ps

18 _back_contcontainerleft(ortheHomepage).
_back_contcontainerleft(ortheHomepage). ps_box_gridcolumn buttonOutermostpage CheckboxOutermostcheckbox controlcontaine,elementtypically). dropdownOutermostdown editOutermosteditpage Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category editlblUNKNOWN Genericinner header). Outermost flexOutermost tablegrid. elementsnumbertabs). grid listOutermost a titleGrid groupGeneric groupletGroupletOutermostgrouplet. Outermostelement. htmlareaOutermosteleme

19 nt. Product Documentation Update CSS Gui
nt. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category OutermostImage containerpageelementtypically). Outermost longeditOutermostLongEdit menuRelated Accessibilitybutton msgactionsModalbuttonsPopup. msgalertModalcontainercontainingthetextmsgactions). msgcontainerModalOutermostcontent. msglongModalExplanationtextPopup. msgnumModalSet/NumberPopup. msgotherModalSupplimentaltypesPopups(liketrace Product Documentation Update CSS Guide for Peo

20 pleSoft Fluid User Interface Copyright
pleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category msgshortModaltextPopup. pagetabsOutermosttabs. promptpageModalOutermostpromptpagecontent. Outermostbuttonelement. add/deleteelements. Outermost aa Modalps_boxcontainingprompt Modalps_boxcontaining"TO" gridsortenabledand Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category staticimgImageOutermost textTextOutermosttext(orothertextlike

21 thegrid typeaheadcontainertypeahead text
thegrid typeaheadcontainertypeahead textdisabledtypedisplayedcontrolCheckboxes). containingrenderinghyperlink(whenEMAILinputtype). valuelinkcontainingrenderinghyperlinkdisabledhyperlinksetinputtype). ps_calendar_modalModalcontainertheTextbased ps_contentcontainerapplication's Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category content. ps_contentgroupcollapsible),headeractualcontent ps_custom_actiontargetplaced. ps_custom_contBanner,Modalbanne

22 r/modalitems(left[back/canel],center[tit
r/modalitems(left[back/canel],center[title], ps_contentbutgroupcontaintheapplication'scontent OutermostFOOTERcontent). Outermostactual(content). gridMost Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category but"groupings"thegroup header. column'sheadingcolumnenabled ps_gridindicate TABLEindicate TABLETABLEthescrollable Outermostwrappercolumn gridcontainingthegrid'sheaders. thelistitselftag). grid(differenttags). Product Documentation Updat

23 e CSS Guide for PeopleSoft Fluid User In
e CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category title ps_grouplethGroupletGroupletheadertext. Outermostheadercontent). ps_header_barcontainerBANNERcontainsaction ps_header_bar_custominformation. ps_header_modalModalps_header_barpages. custom markupterminatinganyelementsgrid controlsheaderthebutton. header. expandedheader Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. St

24 yle Category GlobalSearchthe(asitemunder
yle Category GlobalSearchthe(asitemunderActionsList). functionalityitemunderActionsList). nextthe(asitemActions Listthe(asitemActions ps_hiddenelement dateimagepicker. promptimageprompt imagerelated ps_indicatorCheckboxcheckeduncheckedtextcheckboxSWITCHmode. containercontent Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category ps_main_trf ps_main_trf2pageanimation ps_masktransModalprohibittheelements. ps_menucontainerMenuOutermostlike. ps_menui

25 temMenuwrappersmenuitemlike ps_menusecti
temMenuwrappersmenuitemlike ps_menusectionMenuintogroups. ps_menutypeOutermostthethe ps_mheaderModalModalheadercontainer. ps_mheaderModalsectioncontainingtheoperationconfiguredfor ps_mheaderModalsectionheadercontainingthe ps_mheaderModalRightsection Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category headercontainingthe(or ps_mid_sectioncontainerbetween ps_mod_wrapModalModalpagestructurecontainer. ps_mod_wrapcModalModalpagestructureps_mod

26 _wrap). ps_modal_bodyModal ps_modal_bott
_wrap). ps_modal_bodyModal ps_modal_bottomModaltypicallycontainingmodal ps_modal_closeModalcontainerModalbutton ps_modal_containerModalGenericcontent. ps_modal_contentModalSpecificcontent.secondary ps_modal_headerModaltheheader ps_modal_titleModaltile Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category (likemodal). gridsorttheModal. ps_modalmaskModalbeneath ps_modalmasktranModalbeneathmodal Relateditemindicatorfolder(chevron). ps_pagecontainer

27 PeopleToolspage. ps_pagetitleelementgrou
PeopleToolspage. ps_pagetitleelementgroupTitle". ps_pagetitle_contcenterpagebannercontainingthetitle(orSelector). attachModalAttachmentattachmentdialog. backbuttongenerated when menucontentGroup Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category (menu msgModalOutermost when whenrenderingimageHomepage. criteriaModalgroupcontainingcriteria doneModalbutton. ModalpageOPERATIONDonethe ModalhiddenpageOPERATIONprompting. Modalelementcontainingt

28 heprompt Modalgroupcontaining Modaltoggl
heprompt Modalgroupcontaining Modaltoggle Modaldisplaying Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category thetriggered. ps_pspagecontainerPeopleToolspage. ps_pspagecontainer_srchPeopleToolspage. ps_saved_textthe8.54/8.55). Grids,GroupboIndicatesenabledgroup ps_scrollable_bothGrids,GroupboIndicates ps_scrollable_hGrids,GroupboIndicates ps_scrollable_vGrids,GroupboIndicatesscrolling containingtheandLevel(Realtime) buttonwhencomponentsearchGl

29 obalSearch). checkboCheckboxappliedcheck
obalSearch). checkboCheckboxappliedcheckbox(default),which Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category checkbox ps_system_contModalbanner/modalplaced.[back/canel],center[title], individualtab hyperlink container(ps_tab). ps_test_level_1debuggingwhencheckboxcomponent's ps_test_level_10debuggingwhencheckboxcomponent's ps_test_level_2debuggingwhencheckboxcomponent's ps_test_level_3debuggingwhencheckboxcomponent's Product Documentatio

30 n Update CSS Guide for PeopleSoft Fluid
n Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category ps_test_level_4debuggingwhencheckboxcomponent's ps_test_level_5debuggingwhencheckboxcomponent's ps_test_level_6debuggingwhencheckboxcomponent's ps_test_level_7debuggingwhencheckboxcomponent's ps_test_level_8debuggingwhencheckboxcomponent's ps_test_level_9debuggingwhencheckboxcomponent's ps_toolbar_modtargetthethedocumentused). ps_typeaheadModal ps_typeahead_modalModal Product Documentation Update CSS Guide for P

31 eopleSoft Fluid User Interface Copyright
eopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category styling. ModalAttachmentattachment(for PeopleToolspage(locationswhereusing psaccesshiddenAccessibilityRenderscontentbutreader. ModalAttachmentindicatorattachmentdialog. box_groupExpandExpandedindicator containerdirectlycontainer. (Anchor wrapperinternaltitleattribute psc_animatedismissal.numberseconds psc_attachclearModalAttachmentattachmentbutton. psc_attachcompletedModalAttachmentappliedattachment Product Documentation Update CS

32 S Guide for PeopleSoft Fluid User Interf
S Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category indicatingthatuploadcompleted. psc_attachModalAttachmentAttributeclassattachmentindicating psc_attachselectedModalAttachmentappliedattachmentpageindicatingthat psc_attachselectingModalAttachmentappliedattachmentpageindicatingthatpending. psc_attachuploadModalAttachmentattachmentbutton. psc_attachModalAttachmentappliedattachmentpageindicatingthat psc_buttoncolumn/cellsthatcontainedthe psc_cancelModalbutton applied psc_check

33 boxcolumn/cellsthatcheckbox applied Prod
boxcolumn/cellsthatcheckbox applied Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category indicateGlobal Indicatorthat psc_confirmationbanner. psc_confirmationbutton. psc_confirmationtextstyling. Grids,EditBoxcolumn/cellsthatcontainedcolumn/Field. psc_datetimeGrids,EditBoxcolumn/cellsthat psc_disabledmanyelemeentscontrol psc_emptypsc_emptyindicate Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015,

34 Oracle and/or its affiliates. All rights
Oracle and/or its affiliates. All rights reserved. Category theinnerexistsempty). Field specificindicateinputapplied largerindicatedetectedDEVICEfactor mediumindicatedetectedDEVICEmedium indicatedetectedDEVICEfactor xlarge Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category indicatedetectedDEVICEform nohbarheaderThisformattingelementsheader. psc_has_selectedcheckox.thatleveltheitemsheaderselected. psc_hidden whichhides psc_hidehidegivenb

35 reakbannerthetheThisbuttonsput psc_hideh
reakbannerthetheThisbuttonsput psc_hidehidegivenbreakbannerthetheThis Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category button(hide psc_hidehidegivenbreakbannerthetheThisGlobalSearchbelow680px). psc_hidehidegivenbreakbannerthetheThisbutton Indicatesiconcontrolcontrol). Indicatesavailabledoesn'tdisabled psc_image_onlytext). Indicatesnotlocatedpage indicatethat Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyrigh

36 t © 2015, Oracle and/or its affiliates.
t © 2015, Oracle and/or its affiliates. All rights reserved. Style Category Indicateshyperlinkcontrolcontainednormal psc_maxdocheightModalAttachmentattachment buttonModalindicatinglikesmallerconventionalbutton. cancelModalmodal. closeModalmodal(thebutton).imagethe doneModal fullscreenModalprogrammaticallypage pagetitleModalfound(similarps_pagetitle Accessibility Accessibilityrunningmode. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category ind

37 icatortapability. Modalappearsrenderedgr
icatortapability. Modalappearsrenderedgrouptext. psc_numindicatetypenumeric Checkboxindicatorcheckbox psc_off_containerCheckboxcheckbox Modalbutton Checkboxindicatorcheckbox Checkboxcheckbox betweenModalindicatingprompt psc_openin psc_openin psc_primaryindicatesthat Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category primary. psc_processing Griddeveloperenabled"ExecuteClick"hyperlink/buttonactionsthe psc_rowcounttyperenderednumber psc_row

38 numnumbergrid. containingconfirmationcur
numnumbergrid. containingconfirmationcurrentlyFluid). psc_selectedcontrolitemselected.whencheckboxtherow. psc_hidebannerActions psc_hidebannerActions Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category psc_hidebannerActions psc_hidewhenbreakpoint theGridpopup(thecolumns). Indicates(ascending). Indicates(descending). enabledIndicatesusedsorting psc_tab_alwaysindicatesFROZEN.Always psc_tab_columnidentifyingcolumntab. psc_timecolumn/cellsthatcont

39 ainedcolumn/Field. Product Documentation
ainedcolumn/Field. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category psc_triggerappliedcolumn/fieldtriggerexecutedrow/groupbox psc_wrappable(displayedtext). checkboxCheckboxcheckbox(input[type="checkbox"]). Selectchildren. input[type=?]boxes.IDE. ModalAttachmentAttachment ModalAttachmentattachment (horizontal containerArea prompt Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or

40 its affiliates. All rights reserved. Ca
its affiliates. All rights reserved. Category example. usedpushbuttons,hyperlinks,image ModalAttachment Actual hyperlinkHTML actualhyperlinkHTML longeditedit ModalModalheaderwherethedismissalbutton) control. searchcurrentopModalpromptpage Modaltextfoundbetweenwhen ModalOperators Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category promptindicatesSHOWthe staticimgImageThisotherimageimg. text[image+text],hyperlinks[image+text],text. Header.

41 multiselectcolumn/cellcontainingthechec
multiselectcolumn/cellcontainingthecheckbox column/cellcontainingthebutton column/cellcontainingthebutton rownumbercolumn/cellcontainingthenumber. singleselect Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category column/cellcontainingthecheckboxsingle pts_addbtnStyling. pts_addmodeStyling. pts_bulkramodeStyling. pts_bulkrelactionsStyling. pts_facetStyling. pts_facet_checkboxStyling. Styling. Styling. Styling. Styling. pts_gblsearchmodeStyling.

42 pts_gsearch_contStyling. pts_gsearch_go
pts_gsearch_contStyling. pts_gsearch_goStyling. pts_gsearch_trayStyling. pts_gsearch_tray_itemStyling. pts_include_histStyling. pts_keyvaluesStyling. Styling. pts_listbulkramodeStyling. pts_listnobulkramodeStyling. Styling. pts_listramodeStyling. pts_nobulkramodeStyling. pts_noramodeStyling. Styling. Styling. Styling. Styling. Styling. pts_srchcriteriafilters_nodtprompStyling. pts_srchcriteriafilters_nononproStyling. pts_srchcriteriafilters_nopromptStyling. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright ©

43 2015, Oracle and/or its affiliates. All
2015, Oracle and/or its affiliates. All rights reserved. Style Category pts_srchcriteriafilters_nopromptnStyling. pts_srchcriteriafilters_noxlatStyling. pts_srchcriteriafilters_noyesnoStyling. pts_srchfltrdtpmtStyling. Styling. Styling. Styling. Styling. Styling. pts_srchrslts_gridmixedtypesStyling. pts_srchrslts_listStyling. Styling. Styling. Styling. (height)homepage. (height)homepage. homepage. homepage. Appliedindicatingidentified Genericimplemented implemented implemented stylingpage. Product Documentation Update CSS Guide for PeopleSoft

44 Fluid User Interface Copyright © 2015,
Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category tabbedgridindicatewhich tabbedgridindicatewhich tabbedgridindicatewhich tabbedgridindicatewhich tabbedgridindicatewhich tabbedgridindicatewhich Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category tabbedgridindicatewhich tabbedgridindicatewhich tabbedgridindicatewhich tabbedgridindicatewhich tabbedgridindicatewhich indicatingdevice's Prod

45 uct Documentation Update CSS Guide for P
uct Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Fluid Application Content CSS Styles The styles in this table can be used to style content provided by PeopleSoft fluid applications and custom applications. Category ps_apps_contentgroupboxsecondarypage.theautomatically ps_apps_pageheaderOutermostgroupusedheaderThisreparentedHeaderdirectlythebodyONLY ps_button_backnavthebanner.youcreatingbuttonthebannerREPLACEbackbutton. ps_button_barGroupexclusive(not

46 buttonfoundimageps_header_button).onlyc
buttonfoundimageps_header_button).onlycreatingthebanner. collectionlinks Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category layout.Additionalcanaddedstyling. norowborderthebetween ps_header_buttonstyleimage hidelabelcontainerSpacestill showlabelcontainer(actuallydefault). ps_menucontainerMenuMenuOutermostListcontainingmenusections. ps_menitemMenuMenustyleappliedcontaininghyperlinktrigger. ps_menusectionMenuMenups_menuitem(sublisttypical

47 lyrole="presentation") ps_menutypeMenuus
lyrole="presentation") ps_menutypeMenuusedstyledisplaysimilarmenulinkmenumorecompletestyling. ps_proc_pageheaderps_apps_pageheaderdisplaytherecommendedps_apps_pageheader centercontent.Special Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category blockthatthetextbuttoncentered. psc_auto_sizeappliedhyperlinktheitsdefault psc_backgroundbackgroundbackground psc_badgehidepsc_badgepsc_badgehideBADGEbuttonenabled psc_badgeimagepushbuttonbadgetheIMAGETe

48 xt+Imagebutton(likeiconbadge). psc_badge
xt+Imagebutton(likeiconbadge). psc_badgetextpushbuttonbadgetheText+imageButton(likecount). on.ps_buttidentifyitembuttonbarwhenbeinghidden. on.ps_buttidentifyitembuttonbarwhenbeinghidden. setscenterstheitems.hyperlinkcontrol,elements Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category button/linkstructurejustifiedandbuttonstextandinvolved,textdifferent(thecomestextunderneath. psc_body_backgrounbackgroundbackgrounddefault dependingthe Rowbo

49 rdersimplistically.Thestandardrecommende
rdersimplistically.Thestandardrecommended.usedcontextarea,willborder psc_bordertrecommendedstandard thebottom groupthebordermarginplacesborderCONTENT. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category headergroupheader groupborderheader. leftonlybordersleftandsetstheleft1px. noneborders(directcontainerchildren). rightonlybordersright1px. standardcontainer. border2px1px. the borderbutbordersize. psc_buttonUniqueminimumbuttonAlignmentdefaultce

50 nterpsc_haligncenter. psc_buttonnextbutt
nterpsc_haligncenter. psc_buttonnextbutton.Imageincluded psc_buttonpreviousbutton.styling. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category psc_buttonmakeTEXTbaseddisplaybutton.TypicalbuttonsheaderbuttonsBODY psc_clipcontentgroupscrollingthecontent(thedefault). psc_clipattributehidden pageelement,ps_boxaddthelabel. psc_columnbasiccolumnpsc_columnitems*children. psc_columnbasiccolumncontainer,psc_columnitems*children. psc_columnitemitem

51 (or50%).blockmode(no psc_columnitemitem(
(or50%).blockmode(no psc_columnitemitem(or50%).converts50%. psc_columnitemitem(or33%).blockmode(no psc_columnitemitem(or100%).blockmode(no Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category psc_columnitemitem(or66%).blockmode(no psc_columnitemitem(or30%).converts30%. psc_columnitemitem(or100%).blockmode(no psc_columnitemitem(or30%).converts70%. psc_columnitemitemspecificrequirement. psc_confirmationcreateINLINEThisGroupbox psc_confirmationLon

52 gEdit/Edittext)thelongediteditwrappable)
gEdit/Edittext)thelongediteditwrappable)displayconfirmation psc_containercontainertheelementspsc_fld*actrenderedform psc_controlEdit/LongEdit/Draredisabledhavingconsume Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category entirecontainer.ChangesThisimpactthelabellabel ‐‐ psc_labeltop). psc_controlheight{1heightcontrolEdit,LongEdit,t, control]hyperlink)theseincrements psc_controlheight{1heightcontrolEdit,LongEdit,t, control]hyperlin

53 k)theseincrements psc_controlheight{1hei
k)theseincrements psc_controlheight{1heightcontrolEdit,LongEdit,t, control]hyperlink)theseincrements psc_controlheightautoEdit/LongEdit/Drheightfieldautomaticheight.removeappliedsimplistic psc_controlwidthactualcontrolEdit,LongEdit,t, control]hyperlink) Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category theseincrements psc_controlwidthactualcontrolEdit,LongEdit,(textt control]hyperlink)theseincrements psc_controlwidthactualcontrolEdit,Long

54 Edit,t, control]hyperlink)theseincremen
Edit,t, control]hyperlink)theseincrements psc_controlwidthautoEdit/LongEdit/Drautomaticremoveappliedsimplistic imageheader.itemleftrecommendedcontainedgrouptheheaderHasps_apps_pageheader Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category ps_proc_pageheader primarytextelementheader.notfoundps_apps_pageheaderps_proc_pageheader secondarythepersistentps_apps_pageheaderps_proc_pageheader psc_directionstyledFLEXindicatedirection(column psc_di

55 sabledhyperlinksTEXT,disabledlink. block
sabledhyperlinksTEXT,disabledlink. blockdisplay inlinedisplayINLINE. inlineblockdisplayINLINE psc_displayonlyastextEdit/LongEdit/Drhaveinformationtext)editableThisheightmatchesheighteditableelement. psc_distributedistributeitems Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category psc_editdisabledhyperlinkdisablededithyperlinkURLalignfoundhyperlinks. psc_embedded_tabscontainerembeddedtabsstylingLOOK,keyboardoutsidesuppliedPeopleTools psc_fields

56 ethidereadableAccessibilityfieldsetbutle
ethidereadableAccessibilityfieldsetbutlegendthatreader. psc_label_fboxpsc_label_fillerform(orpsc_containercontainer).paddingtheConsumesentirecontainer. (not Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category hyperlinks/buttons)causingchangefactor(orwithinpsc_containercontainer).reserve(typicallybutinsteaddisplayedimmediatelythelabel (nothyperlinks/buttons)causingchangefactor(orwithinpsc_containercontainer).Thistypicallyputslabelcontrolpl

57 acedtext(longcontainer.thethechanged.You
acedtext(longcontainer.thethechanged.Youpsc_controlneedbehavior,top/psc_controlpsc_fld psc_distribchildFLEX"flex:least. psc_distribchildFLEX"flex: Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category psc_distribchildFLEX"flex: morepsc_distribchildFLEX"flex: psc_distribchildFLEX"flex: nonepsc_distribchildFLEX"flex:meaningFLEXIBLE psc_distribchildFLEX"flex: clearclear clearleftclearleft thehiddenthecontainer. leftfloat none 7,075,08,09,095,1,11,1

58 2,13,14,15,16,17,18,11emactuallyexamples
2,13,14,15,16,17,18,11emactuallyexamples sizeinitial Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category INITIAL. inheritINHERITED. floatclearthefloatclearedleft/right. floatnonetheitem"normal" hiddenitem(orreaders)styles. psc_forcemarginnone. psc_forcepaddingnone. paddingnonepadding. Modifiesimagetheheighttheimageandborders/backgrounds(transparent). Maxgridcontainercontentspecificgloballygrid(includingheader), Product Documentation Updat

59 e CSS Guide for PeopleSoft Fluid User In
e CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category andvertically. only.Maxcontainerentiregrid(includinggridheader). element containsareFIXEDincludedmechanism. borderbottombottomgrid. borders(gridccontainer). a grid. cellbordersTABLE, collectionsimilarps_collection.thebuttons, Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category MovestherowcountdirectlyitselfTitle.

60 usedheader(psc_gridheadernoborder)butcon
usedheader(psc_gridheadernoborder)butcontentexample,prompt psc_grid headernoborderborderheader headertopborderleft/right hideinlistpageyoutogglebetweengridThispage AccessibilityRenderstheFlexThishappens hidereadablecolheadAccessibilityRenderstheindividualheadersexceptionselect/deselectFlexcolumn nobodyps_grid(thecontentheaders) Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category gridcolumnheaderexceptpsc_gridhidereadableallhead. nocustomheader

61 custom nocustompadpaddingcustom a contai
custom nocustompadpaddingcustom a containedtype. totalcountdisplayed Emptybox,displaytheemptypattern.Grouptitlegrid'swithbutton. Emptydisabledtext)longeditstatictextcontrol.displaytextusedcontainer. psc_gridheadernoborder. systemheader notitlegrid'sheadertag)but Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category runningmode. notitleareanotitle,entiretitleincludesbutThis minimumThedefaultminimumcontainer. autolabelgrid(notindividualTypica

62 llytextpage borderallborderallgrids. bor
llytextpage borderallborderallgrids. borderbottomborderbottombut butapplies bordertopgrids. but standardgrid(notindividualstandard Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category (default33%).Typicallydisplaytextelements. breadcrumbgridstyle�""breadcrumb "|") psc_gridviewSelectorpsc_gridviewtoggleusedradio psc_gridviewSelectorpsc_gridviewtoggleusedpossiblemodeList/Gridviews. psc_gridviewSelectorpsc_gridviewtoggleusedradio psc_gridvi

63 ewon.ps_buttSelectorcollectionaddeditsbe
ewon.ps_buttSelectorcollectionaddeditsbetweenGRIDTypicallypsc_displayinlineblocktypicallyheader.example special Navigation two Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category containingcontrol dropthat contentleft interior.has itempanel, is border container. aa containingThis used. psc_groupboxheader psc_groupboxnotitlepsc_groupbox psc_groupedon.ps_buttpsc_distribute)thebuttonusedpsc_distributedthecontainer. psc_grouped_fittedon.ps_bu

64 ttpsc_distribute)fittedandborderstypical
ttpsc_distribute)fittedandborderstypicallyusedthecontainerborderwouldnotneeded,thepanelcontent. psc_groupheaderelementsthisthefoundgridapplication psc_haligncontent psc_halignleftcontent Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category justified. psc_halignrightcontent countlinkmenucount.Thepsc_list_count. linkmenuindicator(CHEVRON),exceptcount psc_haslivedatacontains/shows psc_haslivedataexists. psc_haslivedatacontains/shows psc_haslivedat

65 adoescontain/showtilecount. psc_haslived
adoescontain/showtilecount. psc_haslivedatadoescontain/show psc_headerhidereadableAccessibilityRendersthe(andbutanymode). psc_headerturnsborderheadernone)backgroundimagebackground. psc_headernonedisplay Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category accessibility psc_headerbox,marginheader. psc_heightheightcontainer/entity.1em psc_heightheightcontainer/entity. psc_heightheightcontainer/entity.1px psc_heightheightcontainer/entity"auto

66 ,"contentstyling)driveheightitem. psc_hi
,"contentstyling)driveheightitem. psc_hiddenSetsaccessibility psc_hideimagePushbutton/HypusedImage+TextbuttonhyperlinkIMAGE. psc_hidepagetabspagepagethem.Thismustthe psc_hidereldispunitsRelatedhiderelatedtextwhentheempty.StylethecontentsThisappliedapplied Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category PeopleCode. psc_hideRelatedhiderelatedempty.StylethecontentsThisappliedappliedPeopleCode. psc_hidetextPushbutton/HypusedImage+Textbuttonhyp

67 erlinkTEXT.thatcouldaccessibilitytextrea
erlinkTEXT.thatcouldaccessibilitytextreaders. heightincrementing height{1height heightautoheightautomatic.thesizing. maxheight{1MAXIMUMheightimage.incremented maxheightautoMAXIMUMheightautomaticmaximumheight). maxwidth{1MAXIMUMimage.incremented maxwidthautoMAXIMUMautomatic Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category maximumwidth). nomaxheightmaximumheightspecificationwithinbutton. standardbuttonmaximumheightslightlyimagebutton.set

68 tingNOTheightstandardbuttonslightlylarge
tingNOTheightstandardbuttonslightlylarger width{1widthimage. widthautowidthimageautomatic.theimage hidden. centercontentcontainer.Thistheitemscollectedtogethercontainer. endcontentcontainer.Thistheitemscollectedtogether"END"container. inheritcontentcontainer.Thistheitemsancestor'sjustificationsetting. initialcontent Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category container.Thistheitemsinitially contentcontainer.Thistheitemstryingdistribute

69 betweenelements spacebetweencontentconta
betweenelements spacebetweencontentcontainer.Thistheitemsthatbetweenitemsdistributetheitems.itemscontainer. contentcontainer.Thistheitemscollectedtogether"START"container. theps_boxinline(thedefault).Styleneeded. alignmentcenteredreserved halignleftalignmentleft halignrightalignmentnot hidepsc_labelcompletelymakeslabelnot Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category hidereadableAccessibilityRendersthelabelbutVisually,actsliketherel

70 abel. invisibleEXCEPTlabelRESERVED.label
abel. invisibleEXCEPTlabelRESERVED.labeltextinvisible.accessibilitylabelfor labelwhichaccessibilitylabel labeltext, theinvisible,butopacityscreen backtypicalThisdisplayslabel. include Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category hyperlinks.not valignbaselinelabelbaseline.overridingpart labelbottom.Thislabelingconstruct. valignmiddlelabelThisaffectpart labelThislabelingconstruct. labelOppositeinvisible. labelwidth.ranges labelwidth.range

71 s100% widthautolabelcomputedautomaticall
s100% widthautolabelcomputedautomatically Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category content. psc_label_fillerbox(orpageelementlabelrenderedallocatespacingmadecontentthefactor,psc_fldthewillpsc_fldpsc_containercontainer. psc_legendhidereadableAccessibilityRendersthelegendFieldRelatedFieldGrouptype)consumeany lineheight drilldownmakehyperlinkborderchevronindicate normaltexttext. textsizepsc_fontsizetext psc_link_normalsizepsc_font

72 sizeinherit. 1collinkmenuIndicatescolumn
sizeinherit. 1collinkmenuIndicatescolumn/field. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category 2collinkmenuIndicatescolumns/fields,distributed. 3collinkmenuIndicatescolumns/fields,theconsumes grouprow"columndata. grouprow"columndata. commonmenulinkmenuimplementationMENU,menuMenu.slightlyusedfont detailDetaillevelindicatedetailsrows,itemsmarkeddetail expandedDetaildetailbutFIELDlevelindicateexpandeddisplayed. Product Documentation Update C

73 SS Guide for PeopleSoft Fluid User Inter
SS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category linkmenuIndicatesiconImage+text iconmediumlinkmenuimagethanimplementation. iconlinkmenu(whenused)indicatingthatimagealignedmiddle(the linkmenuSTYLEsetLISTGridusedmechanism.modesdifferentThedefaultthattypicallypanelcommonmenucanusedbroughtpopupgroupdisplayeditem.psc_listsettingmenuspecializedcolumnlistSetting(name)SettingThesehighlevel identifiesLISTVIEWimplementationSECONDARYThe Product Documentation Update CSS Guide

74 for PeopleSoft Fluid User Interface Co
for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category Typicallylinktriggers settingmenulinkmenutwoSettingValueexpectedthatcolumn(groupboxSettingandcontainsettingnamelabel.(grouppsc_listcontaintext)thethesetting. tertiaryidentifiesLISTVIEWimplementationTERTIARYleast vtablinkmenuimplementationbetweenusedmultiplerowtimemenusettingsmenu). psc_list_countidentifybadgecount. psc_livedatametricslive psc_livedatametricsmetricsLABELlive psc_livedatafontdata(only Product Documentation Update C

75 SS Guide for PeopleSoft Fluid User Inter
SS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category psc_marginpsc_marginmargins(top,left)specifiedRangessetbetweenSecondspecifications0.1em(0_1emspecifications,butinsteadyou psc_marginpsc_marginmargins(top,left)specifiedRangessetbetweenSecondspecifications0.5%incrementing0_5%equatesspecifications,butinsteadyou psc_marginmargins(top,left)specifiedRangessetbetween psc_marginautotop/bottomcentercontainer.psc_margincenter. psc_marginpsc_marginRangesbetween1em Product Docu

76 mentation Update CSS Guide for PeopleSof
mentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category incrementincrementing0.1emequatesspecifications,droppeddecimalexample,1_0em psc_marginpsc_marginRangesbetweenincrementsincrementingequatesspecifications,droppeddecimalexample,1_0pctbut psc_marginRangesbetween1pxincrement psc_margin psc_marginpsc_margin(attempt psc_marginheadermarginps_header(nottypically psc_margingroup psc_marginleft{1lefttheRanges Product Documentation Update CSS Guide for PeopleSoft F

77 luid User Interface Copyright © 2015, Or
luid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category psc_marginleft{0_1between1emincrementsincrementing0.1emequatesspecifications,droppeddecimalexample,1_0em psc_marginleft{1psc_marginleft{0_5lefttheRangesbetweenincrementsincrementingequatesspecifications,droppeddecimalexample,1_0pctbut psc_marginleft{1lefttheRangesbetween1pxincrements psc_marginleftnone psc_marginnone psc_marginright{1psc_marginmargintheRangesbetween1emincrementsincrementing0.1emequatesspecifications, Product Documentation Up

78 date CSS Guide for PeopleSoft Fluid User
date CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category droppeddecimalexample,1_0em psc_marginright{1psc_marginmargintheRangesbetweenincrementincrementingequatesspecifications,droppeddecimalexample,1_0pctbut psc_marginright{1margintheRangesbetween1pxincrement psc_marginrightnone psc_marginsides{1psc_marginside{0_1margins(rightthebetweenSecondspecifications0.1emequatesspecifications,butinsteadyou psc_marginsides{1psc_marginmargins(rightthe Product Documentation Update CSS

79 Guide for PeopleSoft Fluid User Interfa
Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category betweenSecondspecifications0.5%incrementing0_5%equatesspecifications,butinsteadyou psc_marginsides{1margins(rightthebetween psc_marginstandardmargin"normal"(specifiesonly). psc_marginpsc_marginmargintheRangesbetween1emincrementincrementing0.1emequatesspecifications,droppeddecimalexample,1_0em psc_marginpsc_marginmargintheRangesbetweenincrementsincrementingequates Product Documentation Update CSS Guide for PeopleSoft Fl

80 uid User Interface Copyright © 2015, Or
uid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category specifications,droppeddecimalexample,1_0pctbut psc_marginmargintheRangesbetween1pxincrement psc_marginmargin. psc_maxwidthmaximum psc_maxwidthmaximum psc_menuActionSheetwherepopupitemsps_menuitems(containingbuttons).appliedargument psc_minwidthminimum buttonbuttontypicallyheader.OUTSIDEyoubuttontheautomatically(whilethe(smallerbutton closebutton(withplaced Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015,

81 Oracle and/or its affiliates. All right
Oracle and/or its affiliates. All rights reserved. Style Category header. donewhichappliedbutton(nottheheaderpsc_primaryapplied noheaderthemodal displaytext)rowenabledindicatortheendbuttonsThis psc_multiselecthideindicatingsinglemechanismrenderedhidden. hidelabel.Morerecommendedhidepsc_label hidden(nocontainer.setting. spacingbetween Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category itemsOnlyps_collectiontag. psc_notexttypethattextthecheck

82 box.Typicallytheretext turnsspecificcont
box.Typicallytheretext turnsspecificcontainer.settingcanchildren.listtext psc_buttonButtonindicateunderneathmustpressedattributetimethe psc_opacityopacity85%. container hiddencontainerhiddencontent container containerscroll Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category truncate)horizontallyonly. container yhiddencontainerscrolltruncate)verticallyonly. twoapplicationthewhenpanelfromCOLLAPSIBLEmodeapplicationtypicalthecustommediaquery

83 panelchangethebreakreplacing:not(.psc_ov
panelchangethebreakreplacing:not(.psc_override).psc_override. psc_paddingpsc_paddingpadding(top,right,left)specifiedRangessetbetweenSecondspecifications0.1emequatesspecifications,butinsteadyou psc_paddingpsc_paddingpadding(top,right,left)specifiedRangessetbetween Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category Secondspecifications0.5%incrementing0_5%equatesspecifications,butinsteadyou psc_paddingpadding(top,right,left)specifiedRangessetbet

84 ween psc_paddingpsc_paddingtheRangesbetw
ween psc_paddingpsc_paddingtheRangesbetween1emincrementsincrementing0.1emequatesspecifications,droppeddecimalexample,1_0em psc_paddingpsc_paddingtheRangesbetweenincrementsincrementingequatesspecifications,droppeddecimalexample,1_0pctbut Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category psc_paddingtheRangesbetween1pxincrement psc_paddingpadding. psc_paddingcontentcontentareagroupcollapsible). psc_paddingcontentnonecontent(default). psc_p

85 addingpsc_padding10_1}emleftpaddingtheRa
addingpsc_padding10_1}emleftpaddingtheRangesbetween1emincrementsincrementing0.1emequatesspecifications,droppeddecimalexample,1_0em psc_paddingpsc_padding49_5}pctleftpaddingtheRangesbetweenincrementincrementingequatesspecifications,droppeddecimalexample,1_0pctbut Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category psc_paddingleftpaddingtheRangesbetween1pxincrement psc_paddingpadding. psc_padding psc_paddingpsc_paddingRangesbetween1emincrementin

86 crementing0.1emequatesspecifications,dro
crementing0.1emequatesspecifications,droppeddecimalexample,1_0em psc_paddingpsc_paddingRangesbetweenincrementincrementingequatesspecifications,droppeddecimalexample,1_0pctbut psc_paddingRangesbetween1pxincrement psc_paddingpadding. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category rightnone psc_paddingpsc_padding(rightthebetweenSecondspecifications0.1emequatesspecifications,butinsteadyou psc_paddingpsc_padding(rightthebetweenSecondspeci

87 fications0.5%incrementing0_5%equatesspec
fications0.5%incrementing0_5%equatesspecifications,butinsteadyou psc_padding(rightthebetween psc_paddingpadding"normal"(specifiesonly). psc_paddingpsc_paddingpaddingtheRangesbetween1emincrements Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category incrementing0.1emequatesspecifications,droppeddecimalexample,1_0em psc_paddingpsc_paddingpaddingtheRangesbetweenincrementincrementingequatesspecifications,droppeddecimalexample,1_0pctbut psc_paddingpa

88 ddingtheRangesbetween1pxincrement psc_pa
ddingtheRangesbetween1pxincrement psc_paddingpadding. containerbetweenps_apps_contentpagethecontinued(chainbroken)beingsibilingsps_apps_content.create Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category ps_apps_contentmiddlebannercreated,butcreatesimilaryour"content" psc_pageheaderdarkerbelowapplicationheadervisibility psc_pageheaderbackgroundps_apps_pageheaderweresectionBottomtarget).ThisneededNOTbutand"fixed" psc_pagepaddingcontentpaget

89 hecontentgroupbox). psc_pagepaddingdimen
hecontentgroupbox). psc_pagepaddingdimensionsfoundps_apps_contentbutMARGINpaddinginsidecontainer). psc_pagepaddingstandardimplementedMARGINpadding. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category psc_paneltwolayoutcontainingthe(or psc_panelactioninteriortwopsc_panelaction.(orregion)willlabelSetNavigationPanelInfo()SetActionPanelInfo()paneltheps_apps_contentoutermostcontainerScrollingps_apps_contentnormal.Sincepaddingpsc_paddingps_app_conte

90 ntundercontainer. psc_panelbuttontwoleft
ntundercontainer. psc_panelbuttontwoleft psc_panelcontainertwoOutermost(partThisFLEXbetweentypically(psc_panelaction)contentpanel,content(psc_panelcontent).properSINGLEcontainingtwo Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category implementation,the psc_panelcontenttwolayoutcontainingthecontent psc_panelcontentinteriortwopsc_panelcontent.(ortheprovidedSetContentPanelInfo().container,ps_apps_contentoutermostcontainerScrollingps_apps_con

91 tentnormal. psc_paneltwoMODEthebehaviorp
tentnormal. psc_paneltwoMODEthebehaviorpanel.user(defaultclosed).FIXEDmodepermits,hiddenleftalwayscontrolallows).(orPORTRAITdevice),mode,meaningpanelwidthcontent.panelcontentthe Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category contentsmallerleftpanel. psc_paneltwotheleftwindow.willmakeselection.youleftpanelPAGEconstruct.Typically,factordevice. psc_paneltwoMODEthebehaviorpanel.psc_panelmode,doesthecontent.thispartthecontentthanthetheleftpane

92 l. psc_paneltabcontainertwo"tab"undercer
l. psc_paneltabcontainertwo"tab"undercertaincircumstancestheleft absoluteexplicitmovement relativetheleft Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category positionedancestor. relativetherightpositionedancestor. relative relativemovementscontainermeans(such property topleftrelativethe toprightrelativethe psc_primarymakebutton(notbuttonSIMPLEbutton)"important"buttontimebecausedrawattentionactioncompletedthe {1,2)em,borderspecified Produc

93 t Documentation Update CSS Guide for Peo
t Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category incrementingThere2emcontainer(left/right)alsowell. borderspecified1pxincrementing1px.containergroupheader,(left/right)alsowell. noneborder(thedefault). (left/right)containerspecified0.1emincrementing0.1em.well.header's(left/right)radius (left/right)containerspecified1pxincrementingthisheader's(left/right)radius (left/right)(the Product Documentation Update CSS Guide for PeopleSoft Fluid User Interf

94 ace Copyright © 2015, Oracle and/or its
ace Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category Relatedlayoutcontaintwo(typically):relatedvalue/units.Withinthree(psc_reldisp(psc_reldispprompt),text(psc_reldisp Relatedpsc_reldispthisappliededitablederivethedisplayedrelatedcontentsyoupsc_hidehide(orconsumed.willonlybutalsoplacement promptRelatedwhichtypicallyprompt."prompt"buttontheeditable Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category prompt Rel

95 atedFIXEDQUALIFIEStheLikeunitsmeasure.sm
atedFIXEDQUALIFIEStheLikeunitsmeasure.smallfactor,psc_reldispvaluecontinue Relatedpsc_reldispthisappliedText)displayfieldpsc_reldisppsc_reldispthe columngeneratedrow psc_rowdeletecolumngeneratedrow psc_rowinserthiddenhideperformingINSERTS.Removesuccessfully psc_rowlabelspsc_rowlabels psc_rowlabelsusedlabelgridaccessibilitymode,labels Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category psc_rownumbercolumncontainingPeopleToolsgeneratednumbe

96 r. enabledcontainer.!importantsetting. c
r. enabledcontainer.!importantsetting. contentgroupgroupnecessary. psc_overflowenabled theThisturnsscrollhidden psc_selectedGrids(typicallyitem psc_selectionlinkmenuhidecheckbox/radioPeopleToolsmechanismimplementation.hideselectionmechanism psc_separatorbreadcrumbbreadcrumb(or�""). Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category psc_separator"|". container. Grid/GroupboxesseveralSomeandconjunctionThisdisplaythegroupgridApplicationDe

97 signer"Executelevel.the(identifiedpsc_tr
signer"Executelevel.the(identifiedpsc_trigger)disabled,disabled(orindicator)GROUPappearthe(atlevel),indicatoreverythatusedthattext) Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category theThiscontent. headerbartheactionsonlyrowmechanism.the detailDetailindicatingthatitemdetailappliedthegrid Detailindicatingthatitemexpanded(psc_listexpanded gridonlyIndicatesshoulddisplayedFLEXhidden IndicatesshoulddisplayedhiddenFLEXgrid causepageonlythemul

98 tipleselection Product Documentation Upd
tipleselection Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Category mechanism psc_simple_labelpagetherespacethelabelitselftypical33%container. psc_singleselectindicatessinglemechanismrenderedhidden. sizecheckboxcheckboxlabel. mediumsizecheckboxcheckboxlabel(defaultSMALL). xsmallsizecheckboxcheckbox(defaultSMALL).youtextpsc_notext. betweenSWITCHcheckboxdisplaycheckbox.SWITCHappear Product Documentation Update CSS Guide for PeopleSoft Fluid User

99 Interface Copyright © 2015, Oracle and/o
Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category weightpsc_bold). Grid/Groupboxeschangesappearmoresubtitle,expectingthatcontainerwouldheading.theusedtitle/grouprenderinginherited(removed)andpadding. psc_tablelayoutauto. psc_tablelayout psc_tablelayoutinherit. psc_textdisclaimertextdisplaycontent. psc_textexampleApplicationstextentered.beneath(orbeside)entryfieldexample.Typicalmightdescribeformatting.placedentry Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2

100 015, Oracle and/or its affiliates. All r
015, Oracle and/or its affiliates. All rights reserved. Category (psc_marginbottomnone)theclosethedescribedbydescribesthatcontextavailablewantbesidepsc_reldispthisunits. psc_textimportanttextimportanceyoutext)editboxand(whichThetheirhiddenandaroundpresent). psc_text_centerpsc_haligncenter.alignment psc_tilecontaintile psc_tileimgcontainerimagetile'simage. psc_tiletile psc_tile_contentforcontentThereThis Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface 100 Copyright © 2015, Oracle and/or its affiliates. All rights rese

101 rved. Style Category (psc_tile_content)
rved. Style Category (psc_tile_content),containsmaincontentthethenthepsc_tile_livedata psc_tile_contentcenterthecontenttileusedFLEXmodel.Commonlyusedpsc_tile_content. psc_tile_contentkpicontent psc_tile_contentmetricscontainercontentopposedlive psc_tile_contentmetricsdatalivedatathecontent psc_tile_kpiKPI psc_tile_kpiKPI psc_tile_kpigroupcontainingIndicatordata. psc_tile_kpigroupcontainingIndicatordata. psc_tile_kpilabellabeldata. psc_tile_livedataboxpsc_tile_contentwhenusedpsc_tile_contentand psc_tile_livedataeditbox(typically)containingcount

102 displayed(typically Product Documentatio
displayed(typically Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. 101 Category psc_tile_livedatacontainerlivedescription psc_tile_livedatapsc_tile_livedatacontaining psc_tile_livedatastylewithin psc_tile_livedatatrendimagelivedata psc_tile_livedata_desitempsc_tile_livedatapsc_tile_livedata_item. psc_tile_livedata_iteindicatinglivedata. psc_titlethetextWarningheader,withaccessibilityscreenSimply psc_titlethetextWarningheader,withaccessibilityscree

103 nSimply psc_titlethetextWarningheader,wi
nSimply psc_titlethetextWarningheader,withaccessibility Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface 102 Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category screenSimply psc_titlethetextWarningheader,withaccessibilityscreenSimply psc_titlethetextWarningheader,withaccessibilityscreenSimply psc_titlethetextWarningheader,withaccessibilityscreenSimply psc_titlepagepsc_title psc_titlepsc_title psc_toggleon.ps_buttSelectorgenericpurposecustomThis Product Documentation Update CSS Guide for

104 PeopleSoft Fluid User Interface Copyri
PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. 103 Category containerpsc_toggle psc_toggleSelector.psc_gridviewpsc_toggleimagecontainer.itemsizedsimilarlypsc_gridviewitemimagedeveloperuse.cannotimagesApplicationradio makebutton'sbackgroundandbordercompletely psc_triggerhiddenlinkmenustylingtriggercolumn/field alignment alignmentbottom. middlealignmentmiddle. alignment alignautotext(whethereditablecontroltext[withtype.Mosttypesleftbutnumericright.timealignmentoccursgrid,numericstextleft. e

105 llipsistextoverflow Product Documentatio
llipsistextoverflow Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface 104 Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category specificdesignatedforThisapplicabletext. full(alsochangesblock). texteditablecontroltext. leftjustifieseditablecontrolsdisplaytext. halignrightrighteditablecontrolsdisplaytext. height{1heightonlydisplayhyperlink(email/url) height{1heightonlydisplayhyperlink(email/url)100%incremented height{1heightonlydisplayhyperlink(email/url)100pxincremented heightautoheightonly

106 displayhyperlink(email/url)content. Prod
displayhyperlink(email/url)content. Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface Copyright © 2015, Oracle and/or its affiliates. All rights reserved. 105 Category valignbaselinetext(withheight text(withheight valignmiddletext(withheightmiddle. text(withheighttop. width{1widthonlydisplayhyperlink(email/url)100em width{1widthonlydisplayhyperlink(email/url)100%incremented width{1widthonlydisplayhyperlink(email/url)100pxincremented widthautowidthonlydisplayhyperlink(email/url)content,Application psc_widthwidthcontain

107 er/entity.1em Product Documentation Upda
er/entity.1em Product Documentation Update CSS Guide for PeopleSoft Fluid User Interface 106 Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Style Category psc_widthwidthcontainer/entity. psc_widthwidthcontainer/entity.1px psc_widthwidthcontainer/entity"auto,"contentstyling)drivewidth turnswrappingspecificcontainer.settingcanchildren.listtextlinkscontainedThedefaulttruncation. linkhyperlinkhyperlink)text. linktextImage+Texthyperlinkwrappinghyperlinktext. Product Documentation Update CSS Guide for PeopleSoft Fluid U