---
schema_version: "1"
id: 573e27abf2215285fda041eae6427298c953020ad73231e781f252c7671b2dee
title: CSS Overrides Migration for the Record Layout Component
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/communities-dev/guides/communities-dev/communities-dev-record-layout-css.md
canonical_url: https://developer.salesforce.com/docs/platform/communities-dev/guide/communities-dev-record-layout-css.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: de7451f7f8b410067f9247c6bdc9dd9a20e51a8c945c0a99bf94b3ee81146bba
products:
  - Experience Cloud Developer Guide
  - Platform Developer Content
---



# 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.

**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`|