TVSS What's On Kids Module Implementation 

What you need to implement this module

 There are three elements necessary to implement the What's On Kids module:

  1. CSS stylesheets
  2. Module code
  3. Javascript code to merge file types

 

Implementation instructions

There are two options to implement this module: 

  • Option 1 (easiest)
    • Links to default styleseheets hosted on PBS servers.
    • Requires copying and pasting one line of code into your template.
    • Does not provide customization options.
  • Option 2
    • Requires advanced CSS knowledge and local hosting of stylesheet files.
    • Requires modifying and uploading stylesheets to your server.
    • Allows extensive customization. 
    • Recommended for advanced users only.

 

Choose an implementation option

Click one of the links below to begin implementation:

I want to add Option 1 to my website (Easiest option)

How to implement Option 1

  • Copy the entire string of code in Figure 1.
  • Paste the code into your template between the <head></head> tags.
  • Save your file.
  • That's it!

Figure 1

<script type="text/javascript"src="http://www.pbs.org/modules/dtv/bootstraps/1.5/whatson.js"></script>

 

I want to add Option 2 to my website

How to implement Option 2

1. Implement the Javascript code:

  • Copy the entire string of code in Figure 1.
  • Paste the code into your template between the <head></head> tags.

Figure 1: The Javascript code

<script type="text/javascript"src="http://www.pbs.org/modules/dtv/bootstraps/1.5/whatson_no_css.js"></script>

2. Implement the Stylesheet code:

Thetable in Figure 2 provides the stylesheets you need. Follow the steps below to implement:

  1. Click on each link in the right column and open each file.
  2. Save each stylesheet to your local computer.
  3. Open an html text editor in code view.
  4. Make modifications to the stylesheet.
  5. Save the stylesheets.
  6. Upload the stylesheets to your server.
  7. Link to the stylsheets by adding the html code in your webpage between the <head></head> tags. (for example: <link rel="stylesheet" type="text/css" href="http://yourwebsite.org/filename.css">)
  8. Use this guide to help you: A Guide to Implementing the Stylesheet

Figure 2: The stylesheets

Stylesheet

Download this code

Global CSS file - governs the look and feel of the DTV Schedules modules.
(CSS | 60 KB)

pbs_tvschedules_modules_global.css

What's On Kids CSS - governs the look and feel of the TV Schedules What's On module.
( CSS | 11 KB )

pbs_tvschedules_modules_whatson.css

3. Implement the Module Code:

The module code is a small snippet of XHTML that consists of a single <script> element.  The module code essentially makes everything work.

NOTE: We recommend you implement this module on a web page with scaling width to avoid the module disrupting your design's look and feel. The width of the module may vary; it can expand if long program titles appear and push the table layout wider.

How to implement the module code

  • Copy the entire string of code in Figure 3.
  • Paste the code into your HTML page where you want the module to appear on your page.
  • To exclude a module, type disabled after the module name.
  • To include a module type enabled after the module name.
  • Open this file and let it guide you: A Guide to Implementing the Code

NOTE: The following code shows all modules enabled except the ShopPBS module. Modules are in blue; enable/disable functionality is in red. Modify red text ONLY.


Figure 3

<script id="PBS.tvschedules.whatson.script" type="text/javascript" src="http://www.pbs.org/modules/dtv/whatson/1.5/whatson.js?localization=WKRP&content=kids&provider=enabled&favorites=enabled&timeblocks=both&feed_id=&tvlink=enabled&shop=disabled"></script>


Each module and its corresponding variable name appears in the left column in the table below.  Each module definition appears in the right column in the table below:

Module

Definition

Provider Finder
(provider)

Allows users to select a cable or satellite provider in addition to the permenent over-the-air provider so they may view channel numbers based on their actual provider. Only cable and satellite providers that carry your station will be available for selection.

Favorites 
(favorites)

Allows visitors to mark program series and individual channels as favorites. You may choose to disable this feature.

Time Blocks
(timeblocks)

Allows you to choose whether the module displays "what's on now," "what's on tonight," or both.

Single Feed
(feed_id)

You may specify a single channel to display. By default, the module displays all channels at once.

TV Schedules Link
(tvlink)

You may choose to enable or disable a link to your full TV Schedules implementation as provided to PBS via the SRC 'Station URLs' Form.

ShopPBS
(shop)

This displays a ShopPBS product feature in the program information pane. By default this feature is disabled. You may choose to enable this feature.

See more information about this module