Styling Homepages and Dashboards Using CSS Variables

Instead of modifying the styles that are described in the previous topics, you can use CSS variables to style homepages, sections, and tiles.

The following table lists the various levels where CSS variables can be defined.

Level	Identified as Tag or Class/Selector	Description
Top of document	:root OR HTML tag	Top level of the HTML document (the HTML tag). Overall palette and theme definitions and functional CSS variables are defined at this level.
Homepage container	.pt_homepage	Overall homepage container of all homepages. Typically when styling you also want to avoid styling in personalization mode which would be done by this CSS selector - .pt_homepage:not(.persmode). Many overall CSS variables are set here including the homepage background and texture.
Dashboard container	.pt_apphomepage	Same level as homepage container, but it is for dashboard specific styling.
Individual homepage	.psc_hpmodel-A	There are a number of other style classes which are assigned at the individual homepage level (including portal-, node-, and tab- style classes). However, you typically apply the psc_hpmodel-A style at the overall homepage level (per expected usage). Defaults are set here for overall section and tile sizing or layout using CSS variables. You should note that the visible homepage will be the homepage that does not have the psc_invisible style associated at the same level as psc_hpmodel-A.
Container of all sections	.psc_hp-sections	This is the container section for all homepages.
Individual section	.psc_hpsection	Each section has this style class assigned along with the section name or ID as defined by the administrator.
Section tile collection container	.psc_hpsection .nuitilegrid .ps_grid-body	Within the section is a DIV grid which has a grid body. This grid body is defined as a CSS grid where the individual tiles are contained and laid out. You can define CSS variables here to control tile sizing and layout for a specific section.
Individual tile container	.nuitile	Within the collection of tiles, you'll find the tiles. Tiles have two different levels: the overall wrapper used to layout the tiles in the collection and actionable tile area. The outer container is where tile styles are applied as well as the tile sizing styling based on the tile definition.
Individual tile actionable area	.nuilp	Within the tile container (.nuitile) is the actionable area (if the main hot spot is enabled, which is the default). It is here where focus is actually set when dealing with tiles. From this level and down will be the internal layout of the tiles. For this model many tiles will be laid out in a CSS Grid form.