Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

CSS Overrides Migration for the Record Layout Component

If you plan to continue using custom CSS overrides, migrate them forward after you update the template.

This topic identifies selector changes.

Use custom CSS sparingly since template updates don’t always support customizations.
Custom CSS is now shared across all your site pages. If you used custom CSS for Login pages, copy it and close the CSS editor. Then navigate to a non-Login page, reopen the editor, and add the custom CSS.

Note

Full Record Layout

Previous Selector	New Selector
`.forceRecordLayout` `.forceRecordLayout.forcePageBlock`	`force-record-layout2` `force-record-layout-block`

Section

Previous Selector	New Selector
`.forceRecordLayout .full.forcePageBlockSectionView` `.forceRecordLayout .full.forcePageBlockSection` `.forceRecordLayout .full.forcePageBlockSectionView.forcePageBlockSection` `.forceRecordLayout .forcePageBlockSectionView` `.forceRecordLayout .forcePageBlockSection` `.forceRecordLayout .forcePageBlockSectionView.forcePageBlockSection`	`force-record-layout2 force-record-layout-section`

Previous Selector

New Selector

.forceRecordLayout .full.forcePageBlockSectionView

.forceRecordLayout .full.forcePageBlockSection

.forceRecordLayout .full.forcePageBlockSectionView.forcePageBlockSection

.forceRecordLayout .forcePageBlockSectionView

.forceRecordLayout .forcePageBlockSection

.forceRecordLayout .forcePageBlockSectionView.forcePageBlockSection

force-record-layout2 force-record-layout-section

Section Title

Previous Selector	New Selector
`.forceRecordLayout .full.forcePageBlockSection h3`	`force-record-layout2 force-record-layout-section h3`

Section Row

Previous Selector	New Selector
`.forceRecordLayout .full.forcePageBlockSectionRow` `.forceRecordLayout .forcePageBlockSectionRow`	`force-record-layout2 force-record-layout-row`

Section Item

Previous Selector	New Selector
`.forceRecordLayout .full.forcePageBlockItem.forcePageBlockItemView` `.forceRecordLayout .full.forcePageBlockItem` `.forceRecordLayout .full.forcePageBlockItemView` `.forceRecordLayout .forcePageBlockItem` `.forceRecordLayout .forcePageBlockItemView` `.forceRecordLayout .forcePageBlockItem.forcePageBlockItemView`	`force-record-layout2 force-record-layout-item`

Previous Selector

New Selector

.forceRecordLayout .full.forcePageBlockItem.forcePageBlockItemView

.forceRecordLayout .full.forcePageBlockItem

.forceRecordLayout .full.forcePageBlockItemView

.forceRecordLayout .forcePageBlockItem

.forceRecordLayout .forcePageBlockItemView

.forceRecordLayout .forcePageBlockItem.forcePageBlockItemView

force-record-layout2 force-record-layout-item

Section Item Label

Previous Selector	New Selector
`.forceRecordLayout .slds-form-element__label`	`force-record-layout2 .slds-form-element__label`

Section Item Value

Previous Selector	New Selector
`.forceRecordLayout .itemBody`	`force-record-layout2 .slds-form-element__static`

Section Item Value Link

Previous Selector	New Selector
`.forceRecordLayout a`	`force-record-layout2 a`

Experience Cloud Developer Guide