Applying Styles from Delivered Style Sheets

Styles specific to psc_hpmodel-A, which is implemented for advanced sectionalized homepages and dashboards, are available in the PT_HP_CUSTOM_PROPS (PSSTYLEDEF_FMODE) and PTNUI_LANDING_CSS style sheets.

The following table lists the style naming conventions for the psc_hpmodel-A styling. You should note that any style that denotes being available for a section is also available within a section template. Similarly, any style that denotes being available for a homepage is also available for dashboards.

Style Pattern	Description
psc_theme-*	Typically involves section and tile colors.
psc_theme-primary-*	Maps the primary color palette from it's current value to the "*" color palette.
psc_theme-section-*	Assigns colors for a section.
psc_theme-section-primary-*	Assigns the colors for tiles that are found in the section having the color palette number of *.
psc_theme-section-all-primary-*	Assigns colors for both the section and the tiles found within the section or section template using the primary palette.
psc_theme-tile-*	Assigns colors for a specific tile (if applied at the tile level) or all tiles if applied at the section or section template level.
psc_theme-tile-for-primary-*	Assigns tile colors from primary which are the standard for given types of sections. The * (asterisk) in this case is for the palette color number of the section or section template.
psc_section-*	Typically defines some behavior or characteristic to be applied to a section or section template.
psc_tile-*	Typically defines some behavior or characteristic to be applied to a tile or all tiles within a section or section template.

In continuation of the Redwood color scheme for PeopleSoft applications that was introduced in PeopleTools 8.60, new color palettes are added in the PT_CUSTOM_PROPS (PSSTYLEDEF_FMODE) style sheet.

A primary theme with the style pattern: --pt-theme-primary-# and a neutral theme with the style pattern: --pt-theme-neutral-# are added. In PeopleTools 8.62, the primary theme points to the equivalent teal color palette from Redwood.

The palette color ranges from 1 and 10 to 190 with the color numbers having a p suffix, which denotes that these are special PeopleSoft versions of the Redwood color.

The following table lists a few of the color numbers.

Style Class	Applicable Level	Description
psc_theme-section-primary-1	Section Homepage	Setting a section to the primary 1 color (which is typically white background)
psc_theme-section-all-primary-1	Section Homepage	Setting a section and tile content to the white with neutral (10) tiles.
psc_theme-tile-for-primary-1	Section Tile Homepage	This style class provides the ability to use the tile color from a different section color. For example, if you want the tile color from the styling of primary-all-1 on a primary-130 section, you could specify psc_theme-section-primary-130 (only the section color specifications) and psc_theme-tile-for-primary-1 (use the neutral 10 color as if the section were in a primary-1 section).

Style Class

Applicable Level

Description

psc_theme-section-primary-1

Section

Homepage

Setting a section to the primary 1 color (which is typically white background)

psc_theme-section-all-primary-1

Section

Homepage

Setting a section and tile content to the white with neutral (10) tiles.

psc_theme-tile-for-primary-1

Section

Tile

Homepage

This style class provides the ability to use the tile color from a different section color. For example, if you want the tile color from the styling of primary-all-1 on a primary-130 section, you could specify psc_theme-section-primary-130 (only the section color specifications) and psc_theme-tile-for-primary-1 (use the neutral 10 color as if the section were in a primary-1 section).

Use these styles for layout and behavior styling of homepages, sections, and tiles.

Style	Applicable Level	Description
psc_branding-bypassall psc_branding-bypass	Homepage	Use these styles for homepages that are not marked as custom layout. These styles block global homepage branding from being applied to the interior of the homepage. While psc_branding-bypass blocks branding only on sections and tiles, but allows branding on the homepage; the psc_branding-bypassall blocks branding settings on the homepage background itself. Note: By default, any homepage marked as custom layout does not get homepage and tile branding applied automatically.
psc_branding-apply psc_branding-backgroundonly	Homepage	Use these styles for homepages that are marked as custom layout. It applies the branding as specified for the custom-layout homepage. While psc_branding-apply applies all branding to the homepage, psc_branding-backgroundonly applies branding only to the homepage background.
psc_homepage-no-bottom-spacing	Homepage	Removes the bottom spacing from the homepage by setting the CSS variable --pt-homepage-bottom-spacing to 0px. It is useful for creating a footer on a homepage where the bottom section is the footer section.
psc_section-compression-none	Homepage	Disables the automatic auto-adjustment of sections when the landing page falls below 453 pixels. This style allows a developer to create their own responsive behavior (typically when the breakpoint of 453 pixels is not correct for their landing page implementation). This section compression reduces the section internal padding, sets the gutters of the homepage to 0 pixel, makes all sections full width sections (meaning it spans the gutter, and is square, has no shadow, reduces interior section spacing, and reduces gaps between sections). For more information, see Automatic Section Adjustments on Small Form Factor Devices.
psc_section-height-fit	Homepage Section	Causes the visual bounding box of a section not to default to the size of the CSS grid style (so that sections are perfectly aligned for dependent sections but instead it shrinks the height of the section within the grid cell to only be large enough to show the content (empty area at the bottom of a section would not be shown). In this case, the alignment of dependent sections may not be consistent but it removes the blank area of the section. Note that this does not affect actual LAYOUT so there is no changes to how many rows the section consumes so no sections can be moved to recover the gap. If applied at the homepage level, all sections are set to FIT (shrink to content). If set at the section level, only that section is affected
psc_tile-height-fit	Homepage Section Tile	By default, a tile's boundary (visual height) is defined by the grid layout. If other tiles are larger on the row, it will also affect the height of all tiles in that row. The psc_tile-height-fit style allows the tile height to fit the content (down to the minimum tile height as defined by tile collection used). Just as with sections, it potentially reduces the blank space found in the tile but it does not affect the layout of tiles among other tiles (other tiles cannot fit within the reclaimed space). It only affects the visual sizing of the tile. If applied at the homepage level, it affects all tiles on the page. If at the section level, it applies to all tiles within the section. If applied at the tile level, it affect the height of only one tile. This still will not affect autosizing tiles.
psc_section-noimage	Section	Hides the image for the section header (typically used only for sections that have the Disable Collapse check box selected).
psc_section-square	Section	Removes the rounded corners of the section.
psc_section-noshadow	Section	Removes the shadow from around the section.
psc_section-full-width	Section	Makes a section span the entire columnar width of the homepage's CSS grid consuming the default gutters on each side. Additionally, the rounded corners and shadows are removed for these type of sections automatically.
psc_section-padding-none	Section	Sets the --pt-section-padding variable to 0px to remove all internal padding to the section. Typically used when the header is not displayed for a section and the tile is responsible for the actual layout of the interior.
psc_section-height-auto	Section	If a homepage has been set to fit with psc_section-height-fit, the psc_section-height-auto allows for the reverting to the default sizing of the specific section to match the grid layout of the section.
psc_section-content-scrollable	Section	Enables a developer to restrict the size of the content of a section (does not include the section header or padding) and make it scrollable given a maximum height (width is also possible but has fewer use cases). By default, merely adding this style to a section does nothing visually. You must also use new CSS variables specifically for setting the maximum size of the content. --Max Height: --pt-section-content-max-height (default is none)--Content Padding: --pt-section-content-padding (defaults to 0px)Max Height is the maximum display size of the content. Content padding is important for tiles configured with shadows because the shadows fall outsize the tile and can be clipped by this scrollable content setting. Should be set only if you style tiles with shadows (psc_tile-shadow).
psc_tile-full-width	Tile	Makes a tile span the entire columnar width of the section's CSS grid.
psc_section-elastic	Section	Makes all tiles within the section elastic, that is, the tiles can grow to consume the entire width of the section container. However, the width can be restricted if the application uses custom stylesheet and sets the --pt-tile-max-width CSS property to the desired value. At that point, the content will be centered within the container, by default.
psc_tile-morph-standard	Section	Makes tiles within the container to morph or behave like elastic tiles when the size of the tile specified in the tile width value attribute (either width 1 or width 2) is reached. This style should not be used with psc_section-elastic or psc_section-simple-list-collection. Tile morphing occurs on changes to the section container (not the overall window size). The break points are at 692px (for 2 wide tiles) and 358px (for 2 and 1 wide tiles). This allows tiles to shrink below the minimum defined size.
psc_tile-simple-link	Tile	Converts a single tile into a simple hyperlink. You can use the --pt-tile-font-weight CSS variable to set the bold font for the hyperlink.
psc_section-link-collection	Section	Converts all tiles found within the section into hyperlinks; a collection of links displayed vertically.
psc_section-simple-tile-collection	Section	Changes layout of tile and only renders the tile image (on top) and tile label (below the image). By default, the tile label does not wrap. However, you can set the --pt-tile-max-width CSS variable on this section through custom styling to restrict the maximum width that any tile can grow and the label will wrap.
psc_section-simple-list-collection	Section	Converts all tiles to be elastic tiles and separates items by horizontal bottom border. By default, the background of the tile will be the same as the section, but the hover may not. Use psc_theme-tile-transparent at the section level to get background to stay same color. Similar to psc_section-elastic, the --pt-tile-max-width CSS variable can be set through custom styling to restrict the growth of the list (and the list will be centered within section by default).
psc_section-collapse-gap-all	Section	Consumes the section gap on all sides of a section using the --pt-section-grid-gap value making the section larger.
psc_section-collapse-gap-inline	Section	Consumes the section gap on the start/left and end/right of a section. This is not a replacement for using full width section but may be used in other use cases.
psc_section-collapse-gap-block	Section	Consumes the section gap above and below the section. Very useful when a new full width section between two other full width sections so that there is no gap between full width sections. Typical use case for psc_section-collapse* styles.
psc_section-collapse-gap-top psc_section-collapse-gap-bottom psc_section-collapse-gap-start psc_section-collapse-gap-end	Section	Consumes the section gap on one side (top, bottom, start/left, end/right) making the section larger based on the value of --pt-section-grid-gap. Typically used when attempting to consume section gap between specific sections. Care must be taken when section possibly wrap as undesired layout may occur.
psc_section-branding-strip	Section	Adds a thin themed branding strip to the top of a section. Uses the strip as defined by the theme. At this point, only neutral and teal themes have a branding strip value. All other themes (if specified using psc_theme-primary-PALETTENAME) will default to the neutral branding strip.
psc_section-spacing-adjust	Section	Applicable only Full Width sections (psc_section-full-width). This automatically modifies the section padding (--pt-section-padding) and section action button adjustment (--pt-section-action-button-adjust) values to match the visual alignment of non-full width sections so that the visual alignments match, even though the full width section consume. May not work for non-default settings of --pt-section-interior-spacing and --pt-section-gutter in some cases.
psc_tile-shadow	Section Tile	Enables tile shadow either for a section or for a single tile. By default, tiles do not have shadows. The shadow by default uses a new shadow color (--pt-tile-alt-shadow-color) to define the default shadow to be used. Shadows if enabled will not change on hover or activate. New styles are specifically created to allow control over the tile shadows other than color (--pt-tile-shadow, --pt-tile-hover-shadow, --pt-tile-active-shadow). If the tile is not actionable (has no main hotspot enabled), this style will not display a shadow.
psc_tile-shadow-none	Tile	Allows for a specific tile that is found within a content where all tiles have shadows to remove the shadow selectively. Has no effect if psc_tile-shadow has not been used at section level. Uses the value of --pt-section-grid-gap to consume the space and make the section larger on all sizes.
psc_section-action-button	Tile	Creates an image only tile which is taken out of the section CSS grid layout and absolutely positioned on the same line as the section header, that is, the upper portion of the section. Image and padding of tile is specifically sized to look like a standard image button. Mostly styled as transparent using one of the styles previously described. Also select the Identify Tile as a Button and the Use Alternate Text on Tile Image check boxes on the Tile CREF (or dynamic tile). This type of style should be applied only to the first tile in the section for proper keyboard navigation.
psc_tile-override	Tile	This style applied to a tile bypasses the entire tile adjustment logic.
psc_tile-layout-override	Tile	Applies to tiles which are dynamic tiles that have content (not just a tile label and an image). These tiles have the ps_tile-dynamic and ps_tile-has-content styles applied to it. When this style applied, it causes the typical grid layout for the dynamic content to be bypassed so that application developers can style the interior of a dynamic tile content from scratch. This provides easier control over complex dynamic tile content.
psc_tile-image-invert	Tile	Sets the tile app filter variable (--pt-tile-image-filter which defaults no none for no filter) to "invert(1) contrast(3)" so that the primary icon of the image can be inverted to be visible on a dark background. This is primarily for section action buttons and can only be applied to the standard dark gray icons for the tile.
psc_tile-emphasis-text	Tile	Typically used to specify emphasis of text for content of a dynamic tile. You can use the --pt-tile-emphasis-text-color, which defaults to the current font size and bold font weight. These defaults can be changed by setting the --pt-tile-emphasis-font-weight and the --pt-tile-emphasis-font-size CSS variables.
psc_tile-emphasis-large-text	Tile	Similar to the psc_tile-emphasis-text style but sets the font-weight and font-size variables to be 28px and bold respectively.
psc_tile-less-emphasis-text	Tile	Typically used for dynamic tile content to specify text that has emphasis but less emphasis then the psc_tile-emphasis* style. The default color is the tile text color and the font weight is bold. These can be changed by using the --pt-tile-less-emphasis-text-color and --pt-tile-less-emphasis-font-weight CSS variables.
psc_tile-secondary-text	Tile	Typically used for dynamic tile content to specify a smaller secondary set of text. The default is to show this text as a font size of 13.667px and font-weight of normal (color is the tile text color). To change the font size or font weight, you can use the --pt-tile-secondary-text-font-size and --pt-tile-secondary-text-font-weight CSS variables.
psc_tile-height-auto	Tile	Allows the specified tile to be reverted to the default height sizing of a tile to consume the grid layout cell of the tile.

Applying Styles from Delivered Style Sheets

Specific Color Based Styling

Styles for Layout and Behavior