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.
Previous SelectorNew Selector
.forceRecordLayout .forceRecordLayout.forcePageBlockforce-record-layout2 force-record-layout-block

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 SelectorNew Selector
.forceRecordLayout .full.forcePageBlockSection h3force-record-layout2 force-record-layout-section h3
Previous SelectorNew Selector
.forceRecordLayout .full.forcePageBlockSectionRow .forceRecordLayout .forcePageBlockSectionRowforce-record-layout2 force-record-layout-row

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 SelectorNew Selector
.forceRecordLayout .slds-form-element__labelforce-record-layout2 .slds-form-element__label
Previous SelectorNew Selector
.forceRecordLayout .itemBodyforce-record-layout2 .slds-form-element__static
Previous SelectorNew Selector
.forceRecordLayout aforce-record-layout2 a