Using style sheets with expanded threads

If you elect to use expanded threads with no style sheet, then your DiscussionApp will look like the following list:

If you use a style sheet, then your DiscussionApp could look like this:

Below is the style sheet that was used for the table above. Feel free to copy and modify it.

UL {
        list-style-position:    inside;
        list-style-type:        none;
}

DIV.thread {
        width: 32em;
        border: 1px solid black;
        margin:1em;
}

DIV.responses {
        border: 1px dashed black;
        font-size: smaller;
        margin:1em;
        padding:1em;
}

DIV.first_message_div {
        padding: 10px;
        background-color: #F8F;
}

SPAN.first_message_span {
        padding: 5px;
        background-color: #CFF;
}

.author_cell {
	font-size: 80%;
}

.date_cell {
	font-size: 80%;
	font-style: italic;
}

Below is a diagram which illustrates style sheet selectors with their corresponding elements:

discussionapp style sheet selectors diagram

Please post questions regarding style sheets and DiscussionApps on the DiscussionApp Forum.

Back to Style Sheets and DiscussionApps