Customize Conversation List Styles

You can customize the style of a Conversation List component by adding selectors in the design.css file.

Use these CSS selectors to customize the style of the Conversation List component.

Selector Name Description
.scs-convo-list-cust .scs-convo-list-container Outmost DIV of the component
.scs-convo-list-cust .scs-convo-list-title Title of a conversation in the list when it is selected
.scs-convo-list-cust .scs-convo-list-line-separator Separator between list title and the list
.scs-convo-list-cust .scs-convo-list-convo-title Title of a conversation in the list
.scs-convo-list-cust .scs-convo-list-convo-line-separator Separator between each conversation
.scs-convo-list-cust .scs-convo-list-active Title of a conversation in the list when it is selected
.scs-convo-list-cust .scs-convo-list-convo-posts Number of posts of a conversation
.scs-convo-list-cust .scs-convo-list-convo-unread Number of unread messages of a conversation
.scs-convo-list-cust .scs-convo-list-convo-updated Last updated date and of a conversation
.scs-convo-list-cust .scs-convo-list-no-convo-msg Message when the list is empty
.scs-convo-list-cust .scs-convo-list-no-auth-msg Message when the Conversation List is rendered in public site without user authorization

See Use Styles and Formatting in Building Sites with Oracle Content and Experience.


This sample illustrates the use of customized CSS for type font, style, and color changes to a Conversation List.

Description of convlistsample1.png follows
Description of the illustration convlistsample1.png

The following code shows the customized CSS used to create the sample:

.scs-convo-list-cust .scs-convo-list-container {
    background-color: azure;

.scs-convo-list-cust .scs-convo-list-title {
    color: crimson;

.scs-convo-list-cust .scs-convo-list-line-separator {
    border-bottom: 2px dashed #dfe4e7;

.scs-convo-list-cust .scs-convo-list-convo-title {
    font-style: italic;

.scs-convo-list-cust .scs-convo-list-active {
    text-decoration: underline;

.scs-convo-list-cust .scs-convo-list-convo-posts {
    color: cadetblue;
    font-size: 12px;

.scs-convo-list-cust .scs-convo-list-convo-unread {
    color: brown;
    font-size: 12px;
    float: left;

.scs-convo-list-cust .scs-convo-list-convo-updated {
    color: blueviolet;
    font-size: 12px;

.scs-convo-list-cust .scs-convo-list-no-convo-msg {
    font-size: 18px;
    color: darkorange;

.scs-convo-list-cust .scs-convo-list-no-auth-msg {
    font-size: 18px;
    color: red;