Styling DiscussionApp Widgets
Below is a diagram which labels the various selectors in a DiscussionApp Widget:
Below is the style sheet that was used for the table above. Feel free to copy and modify it.
body#widget {
padding:1%;
}
table#widget_table {
margin:auto;
padding:1%;
border:1px solid black;
border-spacing:8px;
}
td {
padding:4px;
}
td.link_cell {
background-color:#ccf;
}
a:hover {
background-color:#eee;
}
td.author_cell {
border:1px dashed black;
}
td.date_cell {
background-color:#fcc;
font-size:smaller;
}
You can also modify the widget's container on the calling page. Take the following-
<div style="width:30em; height:15em; margin:auto; padding:1ex; border:ridge 8px #ccc;"> <div style="text-align:center;">Check out our new widget</div> <iframe src="discapp-widget-iframe.html" width="99%" height="99%" frameborder="no" scrolling="no"></iframe> </div>
By enclosing the widget in a "div" container, you can adjust the height and width of the widget, place it on your page, and add a border around it.
Check out our new widget
Please post questions regarding style sheets and DiscussionApps on the DiscussionApp Forum.