Styling expanded threads
If you elect to use expanded threads with no style sheet, then your DiscussionApp will look like the following list:
- This is the first message John Doe, Sun Aug 1 08:26
- Re: This is the first message Mary Walsh, Sun Aug 1 08:27
- Re: This is the first message Mark Brady, Sun Aug 1 08:28
- This is a reply to the first message Jane Doe, Sun Aug 1 08:26
- This is the second response John Walsh, Sun Aug 1 08:27
If you use a style sheet, then your DiscussionApp could look like this:
- Re: This is the first message Sun Aug 1 08:27
- Re: This is the first message Sun Aug 1 08:28
- This is a reply to the first message Sun Aug 1 08:26
- This is the second response Sun Aug 1 08:27
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:
Please post questions regarding style sheets and DiscussionApps on the DiscussionApp Forum.