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-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_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-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.

Applying Styles from Delivered Style Sheets

Specific Color Based Styling

Styles for Layout and Behavior