Widget HTML structure

The unstyled NewsTrust widget is generated as follows:

  • There are <div> elements for the main widget, the widget header, every story, and the widget footer. Each of these DIV elements is controlled by a corresponding CSS class - nt_widget, nt_header, nt_story, nt_footer.
  • All elements within the header, footer, and a story are rendered within <span> elements. Each element is controlled by a corresponding CSS class that is logically named (Ex: nt_header_listing_topic, nt_story_url, nt_story_rating, nt_footer_more_stories)
  • For hyperlinked elements (Ex: story url, story rating), there is a nested <a> within the <span> which is not assigned any CSS class of its own.

List of CSS class names

So, you can tailor the look of the widget to your taste by assigning style settings to all or a subset of these CSS classes. The exhaustive list of CSS class names are:

  • Widget: nt_widget
  • Header: nt_header
  • Footer: nt_footer
  • Story: nt_story
  • Header Elements: nt_header_listing_topic, nt_header_listing_type, nt_header_content_type, nt_header_source_type
  • Story Elements: nt_story_rating, nt_story_title, nt_story_source, nt_story_source, nt_story_date, nt_story_authors, nt_story_story_type, nt_story_quote, nt_story_num_reviews, nt_story_review_it, nt_story_save
  • Footer Elements: nt_footer_help, nt_footer_more_stories, nt_footer_submit_story, nt_footer_get_widget

Example

An example widget styling is shown below for a subset of these classes. The corresponding widget is shown further below. 
.nt_widget                { background:white;font-family:arial,helvetica,sans-serif;font-size:10px;color:#777;line-height:14px; }
.nt_story                 { margin:4px 5px; padding:2px 0px; }
.nt_header                { margin:0 5px 5px 5px; padding: 5px 0; border-bottom:1px solid #aaa;font-size:13px;font-weight: bold; }
.nt_footer                { margin:5px 5px 10px 5px; padding: 5px 0; border-top: 1px solid #aaa;font-size:9px;font-weight: bold; }
.nt_widget a              { text-decoration:none; }
.nt_widget a:hover        { text-decoration:underline; color:#1a4 }
.nt_header_listing_type a,
.nt_header_content_type a,
.nt_header_sources_type a,
.nt_story_rating        a { text-decoration:none;font-size:11px;color:#399800;font-weight:bold; }
.nt_story_title         a { text-decoration:none; font-weight:bold;font-size:11px; }
.nt_story_source          { font-size:11px;font-weight:bold;margin-bottom:3px; }
.nt_story_source        a { text-decoration:none;color:#777; }
.nt_story_quote           { font-size:11px;margin-bottom:2px; }
.nt_story_num_reviews   a { text-decoration:none;font-weight:bold; }
.nt_story_review_it     a { text-decoration:none;color:#080; }
.nt_story_save          a { text-decoration:none;font-weight:bold; }
.nt_footer_help         a { font-weight:normal;text-decoration:none; color:#777; }

The widget you see below is an unstyled widget that has been styled via the style settings above.