Using Style Sheets with NewsApp Widgets

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

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.

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

Using Style Sheets with NewsApps

Using Style Sheets with Widgets

Copyright © Server Corporation. All Rights Reserved.