機械翻訳について

会話リストのスタイルのカスタマイズ

design.cssファイルにセレクタを追加することで、会話リスト・コンポーネントのスタイルをカスタマイズできます。

これらのCSSセレクタを使用して会話リスト・コンポーネントのスタイルをカスタマイズします。

セレクタ名	説明
.scs-convo-list-cust .scs-convo-list-container	コンポーネントの最も外側のDIV
.scs-convo-list-cust .scs-convo-list-title	選択時のリスト内の会話のタイトル
.scs-convo-list-cust .scs-convo-list-line-separator	リスト・タイトルとリストとの間のセパレータ
.scs-convo-list-cust .scs-convo-list-convo-title	リスト内の会話のタイトル
.scs-convo-list-cust .scs-convo-list-convo-line-separator	各会話間のセパレータ
.scs-convo-list-cust .scs-convo-list-active	選択時のリスト内の会話のタイトル
.scs-convo-list-cust .scs-convo-list-convo-posts	会話の投稿数
.scs-convo-list-cust .scs-convo-list-convo-unread	会話の未読メッセージの数
.scs-convo-list-cust .scs-convo-list-convo-updated	会話の最終更新日
.scs-convo-list-cust .scs-convo-list-no-convo-msg	リストが空の場合のメッセージ
.scs-convo-list-cust .scs-convo-list-no-auth-msg	会話リストがユーザー認証なしでパブリック・サイトでレンダリングされる場合のメッセージ

「Oracle Content Managementを使用したサイトの構築」の「スタイルの使用および書式設定」を参照してください。

例

このサンプルでは、会話リストのタイプ・フォント、スタイルおよび色を変更するための、カスタマイズしたCSSの使用を示します。

「図convlistsample1.pngの説明」

次のコードでは、このサンプルを作成するために使用される、カスタマイズしたCSSを示します。

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