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:
These stations downloaded the CSS files to customize, but forgot to include media attributes in the links to the CSS file.
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.
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:
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.