Using Style Sheets with DiscussionApp Widgets

Below is a diagram which labels the various selectors in a DiscussionApp Widget:

discussionapp widget style sheet selectors diagram

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.

Back to Style Sheets and DiscussionApps

Using Style Sheets with Widgets