Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Customize the Look and Feel of an Experience Builder Template
Update a Template with the Theme Panel
Override Template Elements with Custom CSS
Migrate CSS Overrides
CSS Overrides Migration for the Navigation Menu
CSS Overrides Migration for the Panels Container
CSS Overrides Migration for the Record Banner Component
CSS Overrides Migration for the Record Detail Component
CSS Overrides Migration for the Record Layout Component
CSS Overrides Migration for the Record List Component
CSS Overrides Migration for the Record Related List Component
CSS Overrides Migration for the Related Articles Component
CSS Overrides Migration for the Reputation Leaderboard Component
CSS Overrides Migration for the Embedded Service Sidebar Header Component
CSS Overrides Migration for Trending Articles by Topic Component
Use Custom Fonts in Your Experience Builder Site
Customize the Theme Layout of Your Template
Create Custom Content Layout Components for Experience Builder
Configure Swappable Search and Profile Menu Components
Standard Design Tokens for Experience Builder Sites
Ensure Custom Components in Orgs with Experience Cloud Sites Are Secure
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: Lightning Locker and CSP
Analyze and Improve Experience Builder Site Performance
Add Pardot Tracking to Your Experience Builder Site
Use a CMS with Your Experience Builder Site
Report on Deflections: The Deflection Signals Framework
Deploy an Experience Cloud Site from Sandbox to Production
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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

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

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