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

Example

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

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;
    clear:none;
}

.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;
}