If you plan to continue using custom CSS overrides, migrate them forward after you update the template.
This topic identifies selector changes.
note: - 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.
Full Record Layout
| Previous Selector |
New Selector |
.forceRecordLayout .forceRecordLayout.forcePageBlock |
force-record-layout2 force-record-layout-block |
Section
<sfdocstbl><table>
<col>
</col>
<col>
</col>
<thead>
<tr>
<th>
Previous Selector
</th>
<th>
New Selector
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.forceRecordLayout .full.forcePageBlockSectionView</code>
<p>
<code>.forceRecordLayout .full.forcePageBlockSection</code>
</p>
<p>
<code>.forceRecordLayout .full.forcePageBlockSectionView.forcePageBlockSection</code>
</p>
<p>
<code>.forceRecordLayout .forcePageBlockSectionView</code>
</p>
<p>
<code>.forceRecordLayout .forcePageBlockSection</code>
</p>
<p>
<code>.forceRecordLayout .forcePageBlockSectionView.forcePageBlockSection</code>
</p>
</td>
<td>
<code>force-record-layout2 force-record-layout-section</code>
</td>
</tr>
</tbody>
</table></sfdocstbl>
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
<sfdocstbl><table>
<col>
</col>
<col>
</col>
<thead>
<tr>
<th>
Previous Selector
</th>
<th>
New Selector
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.forceRecordLayout .full.forcePageBlockItem.forcePageBlockItemView</code>
<p>
<code>.forceRecordLayout .full.forcePageBlockItem</code>
</p>
<p>
<code>.forceRecordLayout .full.forcePageBlockItemView</code>
</p>
<p>
<code>.forceRecordLayout .forcePageBlockItem</code>
</p>
<p>
<code>.forceRecordLayout .forcePageBlockItemView</code>
</p>
<p>
<code>.forceRecordLayout .forcePageBlockItem.forcePageBlockItemView</code>
</p>
</td>
<td>
<code>force-record-layout2 force-record-layout-item</code>
</td>
</tr>
</tbody>
</table></sfdocstbl>
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 |
