Salesforce Experience Cloud - Record List View Accelerator

sfdc-dxp-recordListViewOverrideStyles.css

/* ========= Frank's Front-End Fun Fridays =============
/* =============== Oct 2, 2020 Edition ================

/*
    This snippet of CSS can be added to a Salesforce Experience theme to 
    override and restyle a record list view. Keep in mind that this CSS may not work
    indefinitely if specific class names in the core product are changed in the future.

    Be sure to use the out-of-the-box config tools that make
    Experience Cloud so great whenever you can! And let it be said, Record List Views
    will pick up some of the brand colors and styles you add automagically!

    If you have any feature requests or ideas to make this better, hit me up
    at fcaron@salesforce.com!

    Cheers!

*/

/* Change size of Nav menu items */
.comm-navigation { 
    font-size: 1.2em;
}


/* Change just the font of the hero content */
.hero .contentTitle {
    font-family: Old Standard TT;
    font-variant: small-caps;
}

/* Change font of a record list component */
.forceCommunityRecordListStandard .listTitle {
    text-transform: none !important;
    font-weight: normal !important;
}

/* Add border to bottom of Hero image to even it out */
.forceCommunityThemeHeroBase {
    border-bottom: 1px solid rgb(20, 95, 125);
}


/* Change to the Welcome Profile font which doesn't inherit */
.cWelcomeProfile .slds-text-heading--large {
    font-family: Open Sans;
    font-size: 2em;
}

/* Foot background */
.footer {
    background-color: #111839;
}

/* ========== List View Override ========== */

/* Alter row borders from the whole table */
.listViewContent .slds-table_bordered, .listViewContent .slds-table--bordered {
    border: 0px !important;
}

/* Alter the border at the top of the record list */
.forceListViewManagerHeader {
    border: 0px !important;
}

/* Remove the item and status details and expand the search bar */
.forceListViewManagerHeader:nth-child(1) > :nth-child(2) > :first-child {
    visibility: hidden !important;
}
.forceListViewManagerHeader .search-in-list .slds-m-left_large {
   margin-left: 0px !important;
   width: var(--lwc-sizeLarge);
}

/* Remove the Salesforcy Icon */
.forceListViewManagerHeader .slds-avatar {
    display: none !important;
}

/* Alter the border at the bottom of the header list */
.slds-table_header-fixed_container:before, .slds-table--header-fixed_container:before {
    border: 0px !important;
}

/* Alter font and row borders from main data rows */
.listViewContent .slds-table_bordered tbody td, .listViewContent .slds-table_bordered tbody th, .listViewContent .slds-table--bordered tbody td, .listViewContent .slds-table--bordered tbody th {
    border: 0px !important;
}

/* Alter row borders from the header row, which are draggable */
.listViewContent .slds-resizable__divider:before {
    background-color: #fff;
}

/* Alter the List View header buttons */
.forceActionsContainer .slds-button {
    border-radius: 0px !important;
    margin-left: 5px;
    margin-right: 5px;
}
.forceActionsContainer .slds-button:last-child {
    margin-right: 0px;
}

/* .slds-table
.forceListViewManagerHeader force-list-view-manager-button-bar
.forceListViewManagerHeader force-list-view-manager-button-bar button
.forceListViewManagerHeader force-list-view-manager-status-info
.forceListViewManagerHeader .triggerLink .slds-button
*/

Hi Frankcaron, This might help me understand more.

If i want to pull the horizontal scroll bar to the top (in the record list view component of the Experience Cloud). How do i do it?

I tried the following, but somehow now able to achive.

https://salesforce.stackexchange.com/questions/316384/show-horizontal-scroll-bar-on-top-of-section