Using Style Sheets with NewsApp Widgets

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

newsapp 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 {
  font-size:smaller;
}

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

td {
  padding:1ex;
  padding-left:2ex;
  padding-right:2ex;
}

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

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

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

You can also modify the widget's container on the calling page. Take the following-

<div style="width:20em; height:12em; margin:auto; padding:1ex; background-color:#eef; ">
<div style="text-align:center;">Check out our new widget</div>
<iframe src="newsapp-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, add a border around it, or change its background color.

Latest Headlines

Please post questions regarding style sheets and NewsApps on the NewsApp Forum.

Using Style Sheets with NewsApps

Using Style Sheets with Widgets