Using Style Sheets with ListApp Widgets

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

listapp 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:5%;
  font-size:smaller;
}

table#widget_table { 
  margin:auto; 
  padding:1%;
  border:1px solid black;
  border-spacing:8px;
}

td {
  padding:4px;
}

a:hover {
  background-color:#eee;
}

td.link_cell {
  background-color:#ccf;
}

td.date_cell {
  background-color:#fcc;
}

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="listapp-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 ListApps on the ListApp Forum.

Introduction to Style Sheets

Using Style Sheets with Widgets