DTV Modules - CSS Tips


Now that the new DTV Schedules have launched, we thought it would help those stations getting set up to share some of the most frequently asked questions we're receiving here.  To start, here are two tips for those of you wishing to customize the CSS files:

1. Don't Forget the Media Attributes

Several stations have contacted us to report that they implemented the modules, but some of the features they tried to enable such as preferences, provider finder and search weren't appearing:

dptv_css.gif

The problem? 

These stations downloaded the CSS files to customize, but forgot to include media attributes in the links to the CSS file. 

The result? 
When rendering the module, the Web browser doesn't know whether to use the the regular CSS file or the print CSS file since they both control the same elements on the page, and what gets rendered is missing some key features.

The fix:
Make sure that, at a minimum, the links to the print versions of the CSS files contain the attribute, media="print".  Those links should look something like this:

<link rel="stylesheet" href="../css/pbs_tvschedules_modules_global_print.css" type="text/css" media="print"  />

Generally speaking, it's a good idea to assign media attributes to all your CSS links, but including them on the print links at least lets the browser know those styles should only be used when printing.

2. Disable the Scrolling

A few stations have reported that they'd prefer the module not insert a scroll bar alongside their list of digital channels.  This is a feature that may be disabled through the CSS.  I asked the module's designer for some advice on supressing the scrolling, and this was her response:

The CSS ID that needs to be customized is in the tvschedules.css file and is identified by:

#pbs_tvschedules_modules-tvschedules-griddata_container

The height would need to be set to a specific pixel value that is large enough to contain all the station's channel rows. Since each station has a different number of channels, and might set different customizations for other styles, it's impossible to know what height it needs to be set to, though, so that will be a matter of trial and error for them. (A quick way to do it is to use one of the developer toolbar tools like Firebug to test different values in the browser environment and then change the CSS file).

I would not, however, recommend removing the overflow attribute from that style ID, because if a user increases type size in their browser, the channel rows will pop out of the defined container div since it will now have a set specific height. So the overflow attribute works to contain the grid content in a case that the station can't really control in advance, and I'd leave it there to do its job.


So, are these tips helpful?  Please let us know what you think and whether there are other customization questions you'd like us to address.


7 Comments

  1. Posted February 13, 2009 at 11:26 AM | Permalink | Reply

    Have any stations implemented the What's On module? The current layout of our home page is having issues accommodating the increased height of the new module.

  2. Posted February 13, 2009 at 11:39 AM | Permalink | Reply

    Hi Hugh,

    Here are a few examples of stations we know of that have implemented the What's On module:

    Ozarks Public Television: http://optv.org/
    WDES: http://www.wdse.org/
    WIPB: http://www.bsu.edu/wipb/

    Hopefully other stations will chime in as well!

  3. Posted February 16, 2009 at 5:10 PM | Permalink | Reply

    I have an ongoing problem that I feel is probably very easy to fix. The What's On Module on our home page looks great, even in the fixed width is it housed in. However, whenever a user clicks on a program description, the Flash animated buttons/graphics on the left side of the page continually overlap the expanded description and data windows on the pop-up.

    What I would like the window to do is to continually just come to the front leaving all the rest of the home page behind. Any ideas?

  4. Meaghan Zimmerman
    Posted February 16, 2009 at 7:17 PM | Permalink | Reply

    Hi Mark,
    I talked to our developer about this and found this layering problem is a known issue with how the Flash player plug-in interacts with various browsers. From what I understand, there are a few tactics with which people report success.

    Here are Adobe's tech notes on the issue:
    http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523

    http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201&sliceId=2

    If you find success, please feel free to share here. If not, please follow up as well.

  5. Posted February 17, 2009 at 12:26 PM | Permalink | Reply

    I am very happy to report that I got a lot from both the tech notes Meaghan referred me to above. The bottom line was to make sure that the parameters set in Dreamweaver for the Flash animations/video were to "wmode" (minus the quotation marks) and the value of each one set to transparent. It took me about 20 seconds in Dreamweaver to do this ( I type slowly).

    I tested this across Explorer, Safari and Firefox and all three browsers now exhibit no overlap. Thanks so much for the lead and the tips.

  6. Posted March 13, 2009 at 2:46 PM | Permalink | Reply

    I have discovered a bug in the new TV schedule and What's On Now program modules--they are creating unnecessary horizontal scroll bars on pages they are implemented on for viewers running 1024x768 resolution or lower.

    After much investigation, I have found the problem...

    The offending style sheet that is causing this abnormality is this one:
    http://www.pbs.org/includes/javascript/yui/2.5/build/container/assets/skins/sam/container.css

    By doing some additional research I have discovered that this is a part of the Yahoo User Interface Library.

    The version your PBS modules are referencing is 2.5.1.

    The latest version out there is 2.7.0 (with 3.0 very near release).

    I have created a call to this new 2.7.0 container.css file on our television home page and television schedule page and it has fixed this problem somewhat. If any stations would like to grab a copy of this updated container.css file... it can be found here: http://www.netnebraska.org/television/_style/container.css -- make sure to add a link to this updated CSS file within the head of your document AFTER the PBS calls...

    When I say "somewhat" I mean the scrollbar may no longer appear if you visit the page with your browser already resized. If you visit the page with a high resolution and then resize your browser... the horizontal scrollbar will appear. Obviously, the scrollbar appearing on a resize is not that big of a deal--the key is to have it not appear on the initial load for viewers visiting your page with a 1024 or lower resolution.

    Now... here is the goofy part. I have found this fix to work sporadically and inconsistently. In Safari & Firefox--for the "what's on now" module--the scrollbars never appear if you visit the page with your browser already resized. In Internet Explorer... they may or not appear--seems about 50/50 (just keep hitting refresh).

    On the Schedule page, applying the fix has the following results (again, with the browser already resized when visiting the page): Safari & Firefox... no horizontal scrollbar, ever. Internet Explorer... same inconsistencies--about 50% of the time the horizontal scrollbar will show up.

    The only explanation for this that I can think of is that the IE issues are timing related. Meaning the old CSS (ver 2.5.1) hosted on your servers is sometimes loading after and overwriting the newer (2.7.0) CSS declarations that are hosted on our server.

    In conclusion, this is not a "critical" bug--but I think the simple fix is to update the YUI library code on your end. Please forward this message along to your developers and let me know if you or they have any questions. Once the YUI is updated on your end, please let me know so I can remove my redundant code.

  7. Posted March 13, 2009 at 5:10 PM | Permalink | Reply

    Thanks for this, Stephen. We've got the unecessary horizontal scroll bar on the list of items that need to be addressed. We'll certainly provide an update once it's fixed!

Post a Comment

*
*