DTV Module Tip - Increasing font size in the program info pane

We have heard from many stations having trouble with small font sizes in the new suite of tools; specifically within the program information pane.  What seems to be happening is that even when a station increases the size of the text in the module in general, the text in the program information pane is still incredibly small and hard to read:

program_info-small_text.jpg

Fear not, you do not need to download the module CSS to fix the problem if you'd rather not mess with it!  The root of the problem is that the overlay object (ie, the program information pane) belongs directly to the page itself; it gets its base font size from the BODY element that is controlling all the font sizes on your page.

For example, some stations have set the BODY element on their homepage with a font-size attribute defined as 11px. If you have implemented one of these modules on your homepage as well, this means that the module elements will use this as the base to determine what size text to render in relation to that base.  From there the module sets the various font-size elements for the module at various values (in ems) of this base size.

That sounds a lot more complicated than it really is.  Here's what I'm talking about:

Say a station has set their homepage with a font-size attribute of 11px as noted above.

The DTV schedule CSS assigns the program description a font size of .9em.  This means that the font rendered will be nine-tenths the size of the base font (11px)

To increase the font size displaying in the module and the program information pane, first change the font-size attribute in the BODY element of the page to a larger size.  The type in the overlay window will respond accordingly.

More information on using ems to control font size is available from W3C at http://www.w3.org/WAI/GL/css2em.htm.


More on the DTV Module CSS

For anyone wishing to dive into making heavy edits to the module CSS, the styles for the program information overlay are found in the global.css document, grouped as *Program Information* styles.  If stations are downloading and customizing the CSS, we strongly recommend using something like firebug to find individual styles for specific elements for these tools.

A final note from the module's designer:
 

Station's style sheets have the ability to override the module's styles to a certain degree, especially styles defined for standard page elements. These module styles all have a PBS namespace, so they are designed not to conflict with any locally defined styles.

Help Us!

Have you implemented the new DTV modules and figured out a way to overcome an implementation challenge?  Please let us know so we can feature your hard work and help your colleagues at other stations.  Drop us a line at pbsi_stationservices@pbs.org or post a comment below.

5 Comments

  1. Posted February 12, 2009 at 10:45 AM | Permalink | Reply

    The bigger snafu I found was sticking the new "What's On" module into our oooooold site design. I'm just starting a redesign of our site, but we're currently still using the PBS Best Practices templates from a while back, so most of my html and css is still based on that.

    When I plopped the NEW What's On module into the homepage to test (without changing the standard styles or anything), this is what happened by default:
    http://www.wgby.org/_test2/index2.html

    Ooops! And yes, all the pop-up panes have the tiny text too.

    I tried to just change the container settings in my local css, but it's actually nested within several. It's been tweaked so much in the last couple years it just needs to be redone. Since a redesign is already on the way, I didn't want to fight with it, so I went the other route. (Because, you know, I don't really want to give myself another headache right now.)

    I tweaked all the text-size declarations in the PBS module CSS files (there are 2 of them that apply here) to no longer use ems so the size would be independent of my old local css. Now the two play nice with each other, as seen here:
    http://www.wgby.org/_test2/index.html

    Not exactly the cleanest solution, but a working solution, and certainly faster that fighting with old css that I'm planning to replace in the next few months anyhow. If you're a tiny department or not a css expert, it could be a solution to fix your problem. I sent Meagan copies of my altered CSS files to share if anyone needs them who has a similar issue. Or feel free to steal them from my links above if you need them. :)

    I'm calling this the duct-tape and bubble gum solution.

  2. Posted February 12, 2009 at 12:11 PM | Permalink | Reply

    Thanks for sharing this, Jen! If anyone is interested in Jen's CSS, email anyone on the Station Products & Services team or pbsi_stationservices@pbs.org and we'll get it to you.

  3. Posted February 12, 2009 at 12:29 PM | Permalink | Reply

    Thanks for the fix. I would add one other bit of info: Keep in mind that if you are using that body class tag to define the text on that page (as you very likely are), when you change the size defined to affect the size of the text in the info pane, you are also changing the size defined for text on that page. So you may be solving one problem but creating another.

    Mike
    KETC/St. Louis

  4. Posted February 13, 2009 at 11:25 AM | Permalink | Reply

    One more tip I just heard others were asking about:

    In pbs_tvschedules_modules_tvschedules.css

    Look for this:

    #pbs_tvschedules_modules-tvschedules-griddata_container
    {
    height: 300px;
    overflow: auto;
    }

    and change to this to get rid of your vertical scroll in your main schedule block:

    #pbs_tvschedules_modules-tvschedules-griddata_container
    {
    height: auto;
    overflow: auto;
    }


    Jen
    WGBY, Springfield MA

  5. Posted February 13, 2009 at 1:15 PM | Permalink | Reply

    Great catch, Mike!

    Thanks for the scrolling tip, Jen! There's a bit more from the module's designer on the scrolling issue here, too (tip #2): http://www.pbs.org/cove/blog/2009/01/dtv-modules---css-tips.php

Post a Comment

*
*